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

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

Тег AngularJS

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

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

1. Разместите тег script в нижней части страницы. Размещение тегов script в конце страницы улучшает время загрузки приложения, так как загрузка HTML не блокируется загрузкой скрипта angular.js. Вы можете получить последнюю версию с http://code.angularjs.org. Пожалуйста, не связывайте свой код в продакшене с этим URL, так как это создаст уязвимость безопасности на вашем сайте. Для экспериментального разработки ссылка на наш сайт допустима.
   • Выберите: angular-[version].js для файла, удобного для чтения человеком, подходящего для разработки и отладки.
   • Выберите: angular-[version].min.js для сжатого и зашифрованного файла, подходящего для использования в продакшене.

2. Разместите ng-app в корне вашего приложения, обычно в теге <html>, если вы хотите, чтобы AngularJS автоматически запустил ваше приложение.

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

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

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

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

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

Независимо от автоматической или ручной инициализации, следует учитывать несколько моментов:

• Хотя возможно запустить более одного приложения AngularJS на одной странице, мы не активно тестируем этот сценарий. Возможны проблемы, особенно в сложных приложениях, поэтому рекомендуется проявлять осторожность.
• Не следует инициализировать приложение на элементе с директивой, использующей трансклюзию, такой как ngIf, ngInclude и ngView. Делая это, вы неправильно размещаете приложение $rootElement и инжектор приложения, что приводит к остановке анимаций и делает инжектор недоступным извне приложения.

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

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

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

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