На самом деле, я не знаю, на кого следует стремиться или куда начать писать, поэтому я начну писать в соответствии с простой идеей.
1. Angular.Element
2. Angular.bootstrap
Нам очень ясно, что NG-APP применяется к узлам, и Angular автоматически помогает вам инициализировать. Процесс инициализации разделен на следующие шаги
1. Angular будет автоматически инициализироваться при загрузке документа, и, во-первых, будет найден узел, указанный в Директиве NG-APP.
2. Инструкции по загрузке модуля
3. Создать инжектор, связанный с приложением (диспетчер зависимости)
4. Начните компилировать DOM с установленным NG-APP в качестве корневого узла
Теперь мы сами инициализируем это и делаем что-то эквивалентное директиве NG-APP. Angular.Element Это обертка, завершая исходный элемент DOM или HTML -строку как элемент jQuery. Angular.BootStrap может вручную инициализировать сценарий, мы используем эти два для инициализации этого сценария
Кода -копия выглядит следующим образом:
<! Doctype html>
<html lang = "zh-cn">
<голова>
<meta charset = "utf-8">
<Title> Bootstrap- Manual </title>
<стиль типа = "text/css">
.ng-cloak {
дисплей: нет;
}
</style>
</head>
<тело>
Вот внешняя часть Ng-App ~~ {{1+2}}
<div id = "widuu"> это в ng-app ~~~ {{1+2}} </div>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
Angular.Element (Document) .ready (function () {
Angular.BootStrap (angular.Element (document.getElementById ("widuu")));
});
</script>
</body>
</html>
2. Компилер
Мы четко видим, что официальный документ AngularJS полон номенклатуры верблюда, такой как NGAPP, NGMODULE, NGBIND и т. Д., - это связанные инструкции. Среди них HTML Compiler позволяет нам сами определять атрибуты и теги элемента. Угловые называет эти дополнительные директивы поведения.
Официальная документация объясняет такой компилятор
Кода -копия выглядит следующим образом:
Компилятор
Компилятор - это угловой сервис, который пересекает DOM в поисках атрибутов. Процесс компиляции происходит в двух этапах.
Компиляция: пройти дому и собирать все директивы. Результатом является функция связывания.
Ссылка: Объедините директивы с объемом и создайте живой вид. Любые изменения в модели объема отражаются в представлении, и любые пользовательские взаимодействия с представлением отражаются в модели областей. Это делает модель области единственным источником истины.
Некоторые директивы, такие как элементы DOM-repeat ng-repeat один раз для каждого элемента в коллекции. Наличие компиляции и фазы связи повышает производительность, поскольку клонированный шаблон должен быть скомпилирован только один раз, а затем связан один раз для каждого экземпляра клона.
Компилятор является угловой службой, ответственной за пересечение узлов DOM и нахождение свойств. Компиляция разделена на два этапа:
1. Компиляция: пересекайте узлы и собирайте все директивы, верните функцию связывания
2. Ссылка: привязайте директивы в область и создайте живой вид. Любые изменения в области объема будут отражены в представлении (обновить представление); Деятельность любого пользователя (изменение) в шаблоне будет отражена в модели областей (двусторонняя привязка). Это позволяет модели областей отражать правильное значение.
Некоторые директивы, такие как NG-Repeat, копируют определенный элемент (комбинация) один раз для каждого элемента в коллекции. Компиляция и связывание - это два этапа для повышения производительности. Потому что клонированный шаблон должен быть составлен только один раз, а затем связывать элементы в каждой коллекции один раз (аналогично кэше шаблона).
3. Создайте свою собственную директиву шаг за шагом
1. Понять директиву
Прежде всего, мы понимаем, что директива основана на номенклатуре верблюда, такой как Ngmodule. При компиляции матч такой, например:
Кода -копия выглядит следующим образом:
<input ng-model = "foo">
<Input Data-ng: model = "foo">
Директива может использовать x- или data- как префикс и может использовать разделитель:,- или _ и т. Д. Для преобразования методов именования верблюда, следующим образом:
Кода -копия выглядит следующим образом:
<span ng-bind = "name"> </span> <br/>
<span ng: bind = "name"> </span> <br/>
<span ng_bind = "name"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
Как правило, мы используем Ng-Bind, чтобы соответствовать NGBIND, этот формат
$ compile может соответствовать директиве на основе имени элемента, атрибута, имени класса и комментария
Кода -копия выглядит следующим образом:
<My-dir> </my-dir>
<span my-dir = "exp"> </span>
<!-Директива: My-Dir Exp->
<pran> </span>
Во время процесса компиляции компилятор соответствует тексту со встроенными выражениями в атрибутах (таких как {{что -то}}) через службу $ Interpolate. Эти выражения будут зарегистрированы как часы и будут обновляться вместе как часть цикла дайджеста. Вот простая интерполяция:
<img src = "img/{{username}}. jpg"/> hello {{username}}!
2. Шаги компиляции
Три шага, чтобы «компилировать» HTML:
1. Во -первых, преобразовать HTML в объекты DOM через стандартный API браузера. Это очень важный шаг. Потому что шаблон должен быть разыгрывается (соответствует спецификациям). Это можно сравнить с большинством систем шаблонов, которые обычно основаны на строках, а не на элементах DOM.
2. Компиляция DOM выполняется путем вызова метода $ comple (). Этот метод пересекает DOM и соответствует директиве. Если совпадение будет успешным, он будет добавлен в список директивы вместе с соответствующим DOM. До тех пор, пока все директивы, связанные с указанным DOM, идентифицированы, они будут отсортированы в приоритете и выполняют функцию compile () в этом порядке. Функция директивного компиляции имеет возможность изменить структуру DOM и отвечает за создание анализа функции Link (). Метод $ compile () возвращает комбинированную функцию связывания, которая представляет собой набор связанных функций, возвращаемых функцией компиляции самой директивы.
3. Подключите шаблон к областям с помощью функции связывания, возвращаемой на предыдущем шаге. Это, в свою очередь, вызывает собственную функцию связывания директивы, позволяя им зарегистрировать некоторых слушателей на элементе и создавать некоторые часы с областью. Результатом этого является двустороннее, мгновенное связывание между масштабами и DOM. При изменении объема DOM получит соответствующий ответ.
Кода -копия выглядит следующим образом:
var $ compile = ...; // впрыскивают в ваш код
var scope = ...;
var html = '<div ng-bind =' exp '> </div>';
// Шаг 1: разрабатывать HTML в элемент DOM
var stemplate = angular.element (html);
// Шаг 2: Скомпилируйте шаблон
var linkfn = $ compile (шаблон);
// Шаг 3: Свяжите скомпилированный шаблон с прицелом.
Linkfn (Scope);
Привязывание атрибута ngattr
Кода -копия выглядит следующим образом:
<svg>
<circle ng-attr-cx = "{{cx}}"> </circle>
</svg>
Это все сегодня, и начинайте писать, чтобы создать директиву завтра ~~~ Длина управления не должна быть слишком длинной, в этой главе есть много основных понятий ~~~