Инициализация библиотеки AngularJS в приложениях

| Суббота, 22 июня, 2013

Метки: AngularJS, Javascript Комментарии: 0

Статья расскажет о процессе инициализации библиотеки Angular в приложении и о том, как в ручном режиме проинициализировать библиотеку, если это необходимо.

Тег <script> для Angular

Пример ниже показывает рекомендованный способ подключения Angular и автоматическую инициализацию библиотеки.

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

Поместить тег script нужно внизу страницы. Размещение подключения внизу страницы уменьшает время загрузки, потому что загрузка HTML не блокируется загрузкой файла angular.js. Получить свежую версию библиотеки можно по адресу http://code.angularjs.org. Но не указывайте этот урл из вашего приложения, это может предоставить потенциальную уязвимость для злоумышленников. Хотя для разработки ссылка на код на сайте angularjs.org вполне приемлема.

Angular-[version].js – читабельная версия библиотеки, подходит для разработки и отладки.
Angular-[version].min.js – сжатый и обфусцированный файл, пригоден для применения в рабочей версии приложения.

Атрибут ng-app нужно поместить в тег html. Это заставит библиотеку Angular автоматически проинициализироваться.

<html ng-app>

Если требуется поддержка IE7, то нужно добавить id="ng-app".

<html ng-app id="ng-app">

Можно использовать и старый стиль синтаксиса директивы ng. Это для старых версий (IE), но разработчики Angular не рекомендуют использовать такой способ.

<html xmlns:ng="http://angularjs.org">

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

Angular автоматически инициализируется в событии DOMContentLoaded. В этом событии Angular ищет директиву ng-app, которая обозначает корневой элемент приложения. Если эта директива найдена, то Angular произведет следующие действия:

Загрузит модуль, который назначен директивой.
Создаст приложение injector.
Значение директивы ng-app будет трактоваться как корневой элемент компиляции. Это дает возможность обозначить приложение Angular для определенной секции DOM.

<!doctype html>
<html ng-app="optionalModuleName">
    <body>
        Сумма 1+2: {{ 1+2 }}.
        <script src="angular.js">
    </body>
</html>

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

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

Ниже показан пример ручной инициализации Angular:

<!doctype html>
<html xmlns:ng="http://angularjs.org">
   <body>
      Привет {{'Мир'}}!
      <script src="http://code.angularjs.org/angular.js"></script>
      <script>
         angular.element(document).ready(function() {
            angular.bootstrap(document, ['optionalModuleName']);
         });
      </script>
   </body>
</html>

Заметьте, что имя нашего модуля приложения передается вторым параметром в функцию angular.bootstrap. Этот код аналогичен использованию директивы ng-app, в виде ng-app="optionalModuleName".

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

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

Инициализация библиотеки AngularJS в приложениях

Тег <script> для Angular

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

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

Комментарии

Популярные метки

Читают сейчас