Улучшить эту документацию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-пространство имён в html. (Это делается по историческим причинам, и мы больше не рекомендуем использовать ng:.)

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

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

загружать модуль, связанный с директивой.
создавать инъектор приложения ngApp.
компилировать 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–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/guide/bootstrap

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

Тег AngularJS

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

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

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

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