Улучшить эту документациюЗагрузка Angular

Эта страница объясняет процесс инициализации Angular и то, как можно вручную инициализировать Angular, если это необходимо.

Тег Angular

Этот пример демонстрирует рекомендуемый способ интеграции Angular с автоматической инициализацией.

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <body>
    ...
    <script src="angular.js"></script>
  </body>
</html>

1. Разместите тег script в нижней части страницы. Размещение тегов script в конце страницы улучшает время загрузки приложения, потому что загрузка HTML не блокируется загрузкой скрипта angular.js. Вы можете получить последние версии с http://code.angularjs.org. Пожалуйста, не связывайте ваш производственный код с этим URL, так как это создаст брешь в безопасности на вашем сайте. Для экспериментального развития ссылка на наш сайт приемлема.
   • Выберите: angular-[version].js для файла, удобного для чтения человеком, подходящего для разработки и отладки.
   • Выберите: angular-[version].min.js для сжатого и зашифрованного файла, подходящего для использования в производстве.

2. Разместите ng-app в корне вашего приложения, обычно внутри тега <html>, если вы хотите, чтобы Angular автоматически загрузил ваше приложение.

3. Если вы используете старую синтаксическую конструкцию директивы ng:, добавьте xml-пространство в html, чтобы IE работал правильно. (Это сделано по историческим причинам, и мы больше не рекомендуем использовать ng:.)

Автоматическая инициализация

Angular автоматически инициализируется при событии DOMContentLoaded или когда скрипт angular.js выполняется, если в этот момент document.readyState установлено в значение 'complete'. В этот момент Angular ищет директиву ng-app, которая определяет корень вашего приложения. Если директива ng-app найдена, Angular:

• загрузит модуль, связанный с директивой.
• создаст инжектор приложения инжектор
• скомпилирует DOM, рассматривая директиву ng-app как корень компиляции. Это позволяет вам указать, что только часть DOM должна быть Angular-приложением.

<!doctype html>
<html ng-app="optionalModuleName">
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

В качестве лучшей практики рассмотрите добавление директивы ng-strict-di на тот же элемент, что и ng-app:

<!doctype html>
<html ng-app="optionalModuleName" ng-strict-di>
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

Это гарантирует, что все сервисы в вашем приложении будут должным образом аннотированы. Подробнее об этом см. в документации строгого режима инъекции зависимостей.

Вручную инициализация

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

Вот пример ручной инициализации Angular:

<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(document).ready(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>
</html>

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

Вы должны вызвать angular.bootstrap() после загрузки или определения ваших модулей. Вы не можете добавлять контроллеры, сервисы, директивы и т. д. после загрузки приложения.

Вот последовательность действий вашего кода:

1. После загрузки страницы и всего кода найдите корневой элемент вашего AngularJS-приложения, который обычно является корнем документа.

2. Вызовите angular.bootstrap, чтобы скомпилировать элемент в исполняемое приложение с двунаправленной привязкой.

Отложенная загрузка

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

Если window.name содержит префикс NG_DEFER_BOOTSTRAP! при вызове angular.bootstrap, процесс загрузки будет приостановлен до вызова angular.resumeBootstrap().

angular.resumeBootstrap() принимает необязательный массив модулей, которые должны быть добавлены к исходному списку модулей, с которыми приложение должно было загрузиться.