Улучшить эту документациюКомпилятор HTML

Обзор

Компилятор HTML Angular позволяет разработчику обучить браузер новому синтаксису HTML. Компилятор позволяет прикрепить поведение к любому HTML-элементу или атрибуту, а также создать новые HTML-элементы или атрибуты с настраиваемым поведением. Angular называет эти расширения поведения директивами.

HTML содержит множество конструкций для форматирования HTML для статических документов декларативным способом. Например, если что-то нужно центрировать, нет необходимости предоставлять браузеру инструкции о том, как нужно разделить размер окна пополам, чтобы найти центр, и как этот центр нужно выровнять по центру текста. Просто добавьте атрибут align="center" к любому элементу, чтобы добиться желаемого поведения. Такова сила декларативного языка.

Однако декларативный язык также ограничен, поскольку не позволяет обучать браузер новому синтаксису. Например, нет простого способа заставить браузер выровнять текст в позиции 1/3 вместо 1/2. Необходим способ обучения браузера новому синтаксису HTML.

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

Все этапы компиляции происходят в веб-браузере; на стороне сервера или на этапе предварительной компиляции никаких действий не производится.

Компилятор

Компилятор — это служба Angular, которая проходит по DOM, ища атрибуты. Процесс компиляции происходит в две фазы.

1. Компиляция: обход DOM и сбор всех директив. Результатом является функция связывания.

2. Связывание: объединение директив со scope и создание живого представления. Любые изменения в модели scope отражаются в представлении, а любые взаимодействия пользователя с представлением отражаются в модели scope. Это делает модель scope единственным источником истины.

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

Директива

Директива — это поведение, которое должно быть активировано при обнаружении определённых конструкций HTML во время процесса компиляции. Директивы могут быть размещены в именах элементов, атрибутах, именах классов, а также в комментариях. Вот несколько эквивалентных примеров вызова директивы ng-bind.

<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->

Директива — это просто функция, которая выполняется, когда компилятор находит её в DOM. Подробная документация по написанию директив доступна в API директивы.

Вот директива, которая делает любой элемент перетаскиваемым. Обратите внимание на атрибут draggable в элементе <span>.

Наличие атрибута draggable в любом элементе придает элементу новое поведение. Мы расширили словарь браузера естественным образом для тех, кто знаком с принципами HTML.

Понимание представления

Большинство других систем шаблонизации используют статический шаблон в виде строки и объединяют его с данными, получая новую строку. Полученный текст затем innerHTML в элемент.

Это означает, что любые изменения данных необходимо повторно объединять с шаблоном и затем innerHTML в DOM. Некоторые проблемы с этим подходом:

1. считывание пользовательского ввода и объединение его с данными
2. затирание пользовательского ввода путём перезаписи
3. управление процессом обновления
4. отсутствие выразительности поведения

Angular отличается. Компилятор Angular использует DOM, а не строковые шаблоны. Результатом является функция связывания, которая, когда объединяется с моделью scope, создаёт живое представление. Связи между представлением и моделью scope прозрачны. Разработчику не нужно выполнять никаких специальных вызовов для обновления представления. И поскольку innerHTML не используется, вы случайно не перезатрете пользовательский ввод. Кроме того, директивы Angular могут содержать не только привязки текста, но и конструкции поведения.

Подход Angular создаёт стабильный DOM. Экземпляр элемента DOM, связанного с экземпляром элемента модели, не изменяется в течение всего срока действия связи. Это означает, что код может получить доступ к элементам, зарегистрировать обработчики событий и знать, что ссылка не будет уничтожена объединением данных шаблона.

Как компилируются директивы

Важно отметить, что Angular работает с узлами DOM, а не со строками. Обычно вы не замечаете этого ограничения, потому что при загрузке страницы веб-браузер автоматически анализирует HTML и создаёт DOM.

Компиляция HTML происходит в три фазы:

1. $compile обходит DOM и сопоставляет директивы.

   Если компилятор обнаруживает, что элемент соответствует директиве, то директива добавляется в список директив, которые соответствуют элементу DOM. Один элемент может соответствовать нескольким директивам.

2. После того как все директивы, соответствующие элементу DOM, будут идентифицированы, компилятор сортирует директивы по их priority.

   Выполняются функции compile каждой директивы. Каждая функция compile имеет возможность изменить DOM. Каждая функция compile возвращает функцию link. Эти функции объединяются в «объединённую» функцию связывания, которая вызывает функцию link возвращённую каждой директивой.

3. $compile связывает шаблон со scope, вызывая объединённую функцию связывания из предыдущего шага. Это, в свою очередь, вызовет функцию связывания каждой директивы, зарегистрирует слушатели на элементах и настроит $watch со scope, так как каждая директива настроена на это.

Результатом является живая привязка между scope и DOM. Таким образом, в этот момент изменение модели в скомпилированном scope отразится в DOM.

Ниже приведен соответствующий код, использующий службу $compile Это должно помочь вам понять, что делает Angular внутри.

var $compile = ...; // injected into your code
var scope = ...;
var parent = ...; // DOM element where the compiled template can be appended

var html = '<div ng-bind="exp"></div>';

// Step 1: parse HTML into DOM element
var template = angular.element(html);

// Step 2: compile the template
var linkFn = $compile(template);

// Step 3: link the compiled template with the scope.
var element = linkFn(scope);

// Step 4: Append to DOM (optional)
parent.appendChild(element);

Разница между Compile и Link

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

Редко бывает, чтобы директивы имели функцию compile, поскольку большинство директив связаны с работой со специфическим экземпляром элемента DOM, а не со изменением его общей структуры.

Директивы часто имеют функцию link. Функция link позволяет директиве регистрировать слушателей на конкретном клонированном экземпляре элемента DOM, а также копировать содержимое в DOM из scope.

Пример «Compile» по сравнению с «Link»

Чтобы понять, давайте посмотрим на реальный пример с ngRepeat:

Hello {{user.name}}, you have these actions:
<ul>
  <li ng-repeat="action in user.actions">
    {{action.description}}
  </li>
</ul>

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

{{user.name}} соответствует директиве интерполяции интерполяции, а ng-repeat соответствует директиве ngRepeat.

Но у ngRepeat есть дилемма.

Ей нужно уметь клонировать новые элементы <li> для каждого action в user.actions. Это кажется тривиальным, но становится сложнее, если учесть, что в user.actions могут добавляться элементы позже. Это означает, что ей нужно сохранить чистую копию элемента <li> для целей клонирования.

По мере вставки новых action шаблонный элемент <li> необходимо клонировать и вставить в ul. Но клонирование элемента <li> недостаточно. Необходимо также скомпилировать <li>, чтобы его директивы, такие как {{action.description}}, оценивались относительно правильного scope.

Примитивный подход к решению этой проблемы заключался бы в простом вставлении копии элемента <li> и последующей компиляции. Проблема с этим подходом заключается в том, что компиляция каждого элемента <li> при клонировании приведет к дублированию большого объёма работы. В частности, мы бы просматривали <li> каждый раз перед клонированием, чтобы найти директивы. Это замедлило бы процесс компиляции, что, в свою очередь, привело бы к менее отзывчивым приложениям при вставке новых узлов.

Решение заключается в разделении процесса компиляции на две фазы:

фазу компиляции, где все директивы идентифицируются и сортируются по приоритету, и фазу связывания, где выполняется любая работа, которая «связывает» конкретный экземпляр scope и конкретный экземпляр <li>.

ngRepeat работает, предотвращая прохождение процесса компиляции в элемент <li>, чтобы она могла создать клон исходного элемента и самостоятельно управлять вставкой и удалением узлов DOM.

Вместо этого директива ngRepeat компилирует <li> отдельно. Результатом компиляции элемента <li> является функция связывания, которая содержит все директивы, содержащиеся в элементе <li> , готовые к подключению к конкретному клону элемента <li>.

При выполнении ngRepeat отслеживает выражение, и по мере добавления элементов в массив клонирует элемент <li>, создает новый объект scope для клонированного элемента <li> и вызывает функцию link для клонированного <li>.

Понимание работы объектов scope с трансклюдированными директивами

Одно из наиболее распространенных применений директивы — создание переиспользуемых компонентов.

Ниже представлен псевдокод, демонстрирующий работу упрощенного компонента диалога.

<div>
  <button ng-click="show=true">show</button>

  <dialog title="Hello {{username}}."
          visible="show"
          on-cancel="show = false"
          on-ok="show = false; doSomething()">
     Body goes here: {{username}} is {{title}}.
  </dialog>
</div>

Нажатие на кнопку «Показать» откроет диалог. Диалог будет иметь заголовок, связанный данными с username, и тело, которое мы хотим трансклюдировать в диалог.

Вот пример того, как может выглядеть определение шаблона для виджета dialog.

<div ng-show="visible">
  <h3>{{title}}</h3>
  <div class="body" ng-transclude></div>
  <div class="footer">
    <button ng-click="onOk()">Save changes</button>
    <button ng-click="onCancel()">Close</button>
  </div>
</div>

Это не будет отображаться должным образом, если мы не применим некоторые трюки с объектом scope.

Первая проблема, которую нужно решить, заключается в том, что шаблон диалогового окна ожидает, что title будет определен. Но мы хотим, чтобы свойство scope шаблона title было результатом интерполяции атрибута <dialog> элемента (т.е. "Hello {{username}}"). Кроме того, кнопки ожидают, что в объекте scope будут присутствовать функции onOk и onCancel. Это ограничивает полезность виджета. Для решения проблемы сопоставления мы используем scope для создания локальных переменных, которые шаблон ожидает следующим образом:

scope: {
  title: '@',             // the title uses the data-binding from the parent scope
  onOk: '&',              // create a delegate onOk function
  onCancel: '&',          // create a delegate onCancel function
  visible: '='            // set up visible to accept data-binding
}

Создание локальных свойств в объекте scope виджета создает две проблемы:

1. изоляция — если пользователь забудет установить атрибут title виджета диалога, шаблон диалога будет привязываться к свойству родительского scope. Это непредсказуемо и нежелательно.

2. трансклюзия — трансклюдированная DOM-структура может видеть локальные переменные виджета, что может перезаписывать свойства, необходимые для привязки данных. В нашем примере свойство title виджета перекрывает свойство title трансклюзии.

Для решения проблемы отсутствия изоляции директива объявляет новый изолированный isolated scope. Изолированный scope не наследует свойства от родительского scope, и поэтому нам не нужно беспокоиться о случайном перекрытии свойств.

Однако изолированный isolated scope создает новую проблему: если трансклюдированная DOM-структура является дочерним элементом изолированного scope виджета, то она не сможет привязаться ни к чему. По этой причине трансклюдированный scope является дочерним элементом исходного scope до того, как виджет создал изолированный scope для своих локальных переменных. Это делает трансклюдированный и изолированный scope виджета «братьями».

Это может показаться неожиданной сложностью, но оно обеспечивает минимальное количество сюрпризов для пользователя и разработчика виджета.

Поэтому окончательное определение директивы выглядит примерно так:

transclude: true,
scope: {
    title: '@',             // the title uses the data-binding from the parent scope
    onOk: '&',              // create a delegate onOk function
    onCancel: '&',          // create a delegate onCancel function
    visible: '='            // set up visible to accept data-binding
},
restrict: 'E',
replace: true