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

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

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

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

Примечание: Не следует использовать директиву 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.3.20/docs/guide/bootstrap