Улучшить эту документациюBootstrap

На этой странице описан процесс инициализации AngularJS и способы ручного запуска AngularJS при необходимости.

Тег AngularJS

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

<!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. Пожалуйста, не связывайте свой код в продакшене с этим URL, так как это создаст уязвимость безопасности на вашем сайте. Для экспериментальных целей связь с нашим сайтом допустима.
- Выберите: angular-[version].js для файла, удобного для чтения человеком, подходящего для разработки и отладки.
- Выберите: angular-[version].min.js для сжатого и замаскированного файла, подходящего для использования в продакшене.
Разместите ng-app в корне вашего приложения, обычно внутри тега <html>, если вы хотите, чтобы AngularJS автоматически запускал ваше приложение.
Если вы предпочитаете использовать старую синтаксическую конструкцию директивы ng:, то при работе с XHTML-режимом включите атрибут xml-namespace в html. (Это сохранилось по историческим причинам, и мы больше не рекомендуем использовать ng:.)

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

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

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

<!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>

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

Ручная инициализация

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

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

<!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(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>
</html>

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

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

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

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

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

Отложенный запуск

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

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

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

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

Улучшить эту документациюBootstrap

Тег AngularJS

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

Ручная инициализация

Рекомендации

Отложенный запуск