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

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

Тег Angular

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

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

Разместите тег script в нижней части страницы. Размещение тегов script в конце страницы улучшает время загрузки приложения, так как загрузка HTML не блокируется загрузкой скрипта angular.js. Последние версии можно получить по адресу http://code.angularjs.org. Пожалуйста, не используйте эту ссылку в вашем коде для производства, так как это создаст уязвимость в вашей системе. Для экспериментального развития ссылка на наш сайт допустима.
- Выберите: angular-[version].js для файла, удобного для чтения человеком, подходящего для разработки и отладки.
- Выберите: angular-[version].min.js для сжатого и зашифрованного файла, подходящего для использования в производстве.
Разместите ng-app в корне вашего приложения, обычно в теге <html>, если вы хотите, чтобы Angular автоматически инициализировал ваше приложение.
Если вам требуется поддержка IE7, добавьте id="ng-app"
Если вы выбираете синтаксис старых директив 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>

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

Если вам нужен больший контроль над процессом инициализации, вы можете использовать метод ручной загрузки вместо автоматического. Примерами ситуаций, когда это необходимо, являются использование загрузчиков сценариев или необходимость выполнить операцию до компиляции страницы 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() после загрузки или определения ваших модулей. Вы не можете добавлять контроллеры, сервисы, директивы и т.д. после загрузки приложения.

Примечание: Не используйте директиву ng-app при ручном запуске приложения.

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

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

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

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

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

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

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.2.32/docs/guide/bootstrap