В предыдущем разделе кратко представлена рамка Angular JS. В этом разделе механизмы Bootstrap (начальная загрузка) и компилятор (компиляция) будут продолжаться.
1: начальная загрузка: угловая инициализация
1: начальная автоматизация, рекомендованная Angular, заключается в следующем:
<! Doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html
Используйте NGAPP, чтобы отметить корневой узел, где вам нужно автоматически загрузить приложение, которое, как правило, является тегом HTML. Когда событие, загруженное Domcontent, запускает угловые, оно автоматически найдет NGAPP в качестве корневого узла приложения. Если это найдено, будут выполнены следующие операции:
1. Связанная Директива Модуль загрузки (модуль) (инструкции).
2. Создайте инжектор приложения (механизм инъекции Angular).
3. Скомпилируйте и обрабатывайте ng-app в качестве инструкций корневого узла. Это позволяет настроить выбор узла DOM в качестве корневого узла приложения.
<! Doctype html> <html ng-app = "optactalmodulename"> <body> Я могу добавить: {{ +}}. <script src = "angular.js"> </script> </body> </html>2: Инициализация ручной работы:
Если вы хотите иметь больше контроля над инициализацией, вы можете использовать пользовательский метод загрузки ручной загрузки для инициализации вместо автоматической инициализации Angular. Например, вам нужно что -то сделать, прежде чем угловой компиляции шаблона, например, изменение определенного содержимого шаблона. Метод ручной загрузки будет следующим:
<! Doctype html> <html xmlns: ng = "http://angularjs.org"> <body> hello {{'world'}}! <script src = "http://code.angularjs.org/angular.js"> </script> <cript> angular.Elce. {angular.bootstrap (document);}); </script> </body> </html>1. После того, как весь код на странице загружается, найдите корневой узел шаблона HTML (типичный элемент документа).
2. Вызовите api/angular.bootstrap (angular.bootstrap (element [, modules])), чтобы скомпилировать шаблон, чтобы сделать его исполняемым.
Два: компилятор: перевод Angular
Механизм компиляции Angular позволяет разработчикам добавлять новый HTML -синтаксис в браузер, позволяя нам добавить несколько HTML -узлов, атрибутов и даже создавать некоторые пользовательские узлы, атрибуты. Angular расширяет это поведение в директивы. Angular приносит полезные директивы и позволяет нам создавать специфичные для домена директивы.
1: обработка компилятора разделена на два шага:
1. Преобразовать DOM, собирать директиву и функцию возврата (соединение).
2. Объедините инструкции и объем, чтобы генерировать живой вид. Любые изменения в режиме объема будут отражены в представлении, а взаимодействие с пользователем из представления также будет синхронизировано с моделью объема, а Scope является одним источником данных.
2: Директивная команда
Директива - это акт, который будет обработан специальным редактированием дизайна HTML. Это может быть размещено на именах, атрибутах, классе узла или даже в комментарии HTML. Вот эквивалентный метод написания собственной NG-Bind Angular:
<span ng-bind = "exp"> </span> <pran> </span> <ng-bind> </ng-bind> <!-Директива: ng-bind exp>
Директива - это просто функция, которая будет выполнена угловой в DOM. Вот пример перетаскивания и капель, которые могут быть применены к атрибуту Span и Div:
Angular.Module ('Drag', []). Directive ('Draggable', function ($ document) {var startx =, starty =, x =, y =; return function (сфера, элемент, attr) {element.css ({позиция: «Относительная», граница: 'px solid red', fackgrescolor: 'lightgrey', cursor: 'cointer' atemplor ',' atemplor ',' atemply ',' atember. Функция (Event) {startx = event.screenx - x; 'px', слева: x + 'px'});Демо
Вы можете перетащить меня куда угодно!
3: Посмотреть понимание
Многие шаблонные двигатели предназначены для объединения шаблонов и моделей для возврата строки, а затем добавляют к узлу DOM с использованием innerhtml, который считается, что любые изменения в данных должны быть повторно заработаны для создания нового контента и добавлены к DOM. Следующий рисунок относится к односторонней технологии привязки:
Angular не использует инструкции директивы, а не струны. Возвращаемое значение - это функция ссылки, которая объединяет модель данных. Привязка просмотра и модели является автоматическим и прозрачным, и не требует, чтобы разработчики добавляли дополнительные действия для обновления представления. Angular - это не только связывание модели данных, но и концепция поведения. В качестве двустороннего переплета форма заключается в следующем:
Материал:
1. Ангулярный официальный веб -сайт: http://angularjs.org/
2. Загрузить код: https://github.com/angular/angular.js
Вышеуказанное - угловые механизмы начальной загрузки и компилятора, представленные вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!