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

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

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

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

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

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

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

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

Отложенная инициализация

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

Если 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.5.11/docs/guide/bootstrap

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

Тег Angular

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

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

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

Отложенная инициализация