Angular нужен веб-сервер для запуска? Так будет ли работать Angular, если я дам браузеру URL локального файла?

Под этим я подразумеваю, что я прочитал, что Angular позволяет макету данных использоваться, чтобы RESTFul apis не нужно было подключать. Я могу придумать пример использования, где дизайнеру UX нужно только смотреть на косметику и не подключаться к веб-серверу. Я также могу думать о других случаях использования.

Так будет ли работать Angular я предоставляю браузеру URL-адрес локального файла, такого как C:\temp\index.html, а файлы js либо находятся в c:\temp, либо говорят c:\temp\js.

Итак, я попробовал это, вот все в одном файле приложения (я знаю, что его нужно разделить)

<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-controller="myNoteCtrl">

<h2>My Note</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

<script >
// was in separate file but pasted in for demo purposes
var app = angular.module("myNoteApp", []);

</script>
<script >
// was in separate file but pasted in for demo purposes
app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved:" + $scope.message);};
});
</script>
</body>
</html>

Результаты: он работает в Chrome и Firefox без проблем, IE блокирует контент изначально, но можно разрешить его запуск.

Благодаря ответам. Вероятно, я удалю этот вопрос, потому что люди его понизили. Я на самом деле думаю, что это полезно найти, но лучше знать сообщество.

Ответы

Ответ 1

Итак, способ, которым я это сделал, - создать временную службу и просто загрузить ее вместо URL-адреса.

Пример:

//tempUser.js
angular.module("app").constant("tempUser", {
    firstname : "Joe",
    lastname : "Smith"
});

//userService.js
angular.module("app").factory("userService", function ($q, tempUser) {
    return {
        load : load
    };

    function load(id) {
        //TODO: finish impl
        return $q.when(tempUser);
    }
});

Таким образом, контроллер может работать, как если бы вы загружались из веб-службы.

angular.module("app").controller("UserDetailCtrl", function (userService) {
    userService.load().then(function (user) {
        $scope.user = user;
    });
});

Ответ 2

Вы не можете просто получить доступ к угловому приложению по пути к файлу на локальном компьютере, потому что вы получите ошибки домена из разных источников.

Решение состоит в том, чтобы установить http-сервер (который требует установки node.js). Это позволяет вам создать локальный http-сервер для вашего компьютера и получить доступ к приложению Angular, как если бы оно было размещено в Интернете для целей разработки и тестирования.

Ответ 3

Да, вы можете запустить локальный файл, но если вам нужны данные с сервера, браузер должен заблокировать их, в зависимости от того, какую версию и тип браузера вы используете.

Вот официальное объяснение Angularjs Tutorial в приложении PhoneCat Tutorial App: Запуск веб-сервера разработки

Хотя приложения Angular являются чисто клиентским кодом и их можно открывать в веб-браузере непосредственно из файловой системы, лучше обслуживать их с веб-сервера HTTP. В частности, по соображениям безопасности большинство современных браузеров не позволяют JavaScript выполнять запросы к серверу, если страница загружается непосредственно из файловой системы.

Ответ 4

Если вам нужно просто отображать данные с помощью выражения типа {{mymessage}} внутри div, вам не нужен веб-сервер.

Но если вам нужно загрузить template html файлы uing ngview, вам нужен веб-сервер, иначе он будет жаловаться на следующую ошибку.

Запрос не может загрузить файл. Запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Если для обучения angularjs-маршрутизации нужны шаблоны laoding, я нашел простой web server exe - HFS. Пока это соответствует моим требованиям для обучения AngularJS.

Ссылки

Ответ 5

Как уже говорили другие, лучше всего правильно служить http. Однако есть и другие обходные пути.

Некоторые редакторы, такие как скобки (щелкните значок молнии в правом верхнем углу в файле), могут корректно передавать код в браузер. Для других могут быть плагины, которые делают это.

Обновление: мое предложение ниже работало достаточно хорошо для AngularJS 1, но для Angular 2 недостаточно просто помнить. См. Также Отключить ту же политику происхождения в Chrome.

Кроме того, если вы работаете в Chrome, вы можете запускать его с флагами, что означает, что вы добавляете некоторые вещи за частью пути .exe на коротком пути; варианты, если вы будете. В частности, вы бы хотели:

--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt

Это позволяет избежать ошибок при попытке доступа к файлам из разных источников. Был плагин для этого, но я не мог заставить его работать. Обратите внимание, что безопасность объясняет, почему это не значение по умолчанию, поэтому, возможно, не включайте его в основной ярлык, который вы все время используете для серфинга... - Используйте на свой страх и риск.