Обзор
HTML -компилятор AngularJS позволяет браузеру распознавать новый HTML -синтаксис. Это позволяет вам связывать поведение с HTML -элементами или атрибутами, и даже позволяет создавать новые элементы с помощью пользовательского поведения. Angularjs называет это поведение, распространяемое на «инструкции»
HTML имеет много декларативных структур для управления форматом при написании статических страниц. Например, если вы хотите сосредоточиться на контенте, вам не нужно говорить браузеру «найти среднюю точку окна и объединить его с серединой контента». Вам просто нужно добавить атрибут Align = "Center" к элементу, который должен быть центрирован. Это сила декларативного языка.
Но декларативные языки также имеют что -то, чего нельзя достичь, и одна из причин заключается в том, что вы не можете использовать его, чтобы позволить браузерам распознавать новый синтаксис. Например, если вы не центрируете контент, но до 1/3 левых, он не сможет этого сделать. Таким образом, нам нужен способ позволить браузеру изучать новый синтаксис HTML.
Студенты Angularjs приходят из некоторых инструкций, которые очень полезны для создания приложений. Мы также надеемся, что вы сможете создать некоторые инструкции, которые полезны для ваших собственных приложений. Эти расширенные инструкции являются «конкретным доменным языком», который вы создаете приложение.
Процесс компиляции будет происходить на стороне браузера; На стороне сервера не будет участвовать ни в каких шагах, ни не будет предварительно скомпилировано.
Полщик
Компилятор - это услуга, предоставляемая AngularJS. Он ищет свойства, связанные с ним, пройдя DOM. Весь процесс компиляции разделен на два этапа.
1. Компиляция: пройдите DOM и собирайте все соответствующие инструкции, чтобы создать функцию ссылки.
2. Ссылка: привязанность к прицела с директивой и генерируйте динамический вид. Любые изменения в модели областей применения будут отражены в представлении, и любые действия пользователя в представлении будут отражены на модели областей. Это делает модель областей единственной вещью, о которой вам нужно заботиться в вашей бизнес -логике.
Есть некоторые инструкции, такие как NG-Repeat, которые один раз клонируют каждый элемент DOM в наборе данных. Практика деления всего процесса компиляции на два этапа: компиляция и связывание улучшают общую производительность, поскольку клонированный шаблон должен быть скомпилирован только один раз в общей сложности, а затем связан с их соответствующими модельными экземплярами.
инструкция
Директива указывает «действие, которое должно выполняться, когда связанная структура HTML входит в фазу компиляции». Директивы могут быть записаны во имя элемента, в атрибуте, во имя класса CSS и в комментариях. Ниже приведены несколько примеров использования директивы NG-Bind с той же функцией.
Кода -копия выглядит следующим образом:
<span ng-bind = "exp"> </span>
<pran> </span>
<ng-bind> </ng-bind>
<!-Директива: ng-bind exp->
Директивы, по сути, являются просто функциями, которые необходимо выполнять, когда компилятор компиляция компилируется для соответствующего DOM. Вы можете найти более подробную информацию о директивах в документации Directive API.
Ниже приведена команда, которая делает элементы перетаскиваемыми. Обратите внимание на атрибут перетаскивания в элементе <pan>.
index.html:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html ng-app = "перетаскивать">
<голова>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<тело>
<Span Draggable> перетаскивать меня </span>
</body>
</html>
script.js:
Кода -копия выглядит следующим образом:
Angular.Module ('перетаскивать, []).
Директива ('Draggable', function ($ document) {
var startx = 0, starty = 0, x = 0, y = 0;
возврат функции (сфера, элемент, attr) {
element.css ({
позиция: «родственник»,
граница: «1px твердый красный»,
founalcolor: 'lightgrey',
курсор: 'указатель'
});
element.bind ('mousedown', function (event) {
startx = event.screenx - x;
starty = event.screeny - y;
$ document.bind ('MouseMove', MouseMove);
$ document.bind ('MouseUp', MouseUp);
});
Функция mouseMove (event) {
y = Event.screeny - Starty;
x = event.screenx - startx;
element.css ({
Верх: y + 'px',
слева: x + 'px'
});
}
function mouseup () {
$ document.unbind ('MouseMove', MouseMove);
$ document.unbind ('mouseup', mouseup);
}
}
});
Это новое поведение может быть достигнуто, добавив атрибут Draggeble. Прелесть нашего улучшения в том, что мы даем браузеру новые возможности. Мы использовали естественный способ расширить способность браузера понимать новое поведение и новые синтаксисы, если разработчик знаком с правилами HTML.
Понять представление
В Интернете есть много шаблонных систем. Большинство из них «связывают статические шаблоны символов и данные, генерируют новые символы и вставляют их в элементы страницы через innerhtml».
Это означает, что любые изменения в данных приведут к переработке данных с шаблоном для генерации новых символов, а затем вставлены в DOM. Проблемы, которые возникают, включают в себя: пользовательский ввод должен быть прочитал и в сочетании с данными модели, пользовательский ввод должен быть перезаписан, весь процесс обновления необходимо управлять вручную, и отсутствие богатых выражений.
Angularjs отличается. Компилятор AngularJS использует DOM с инструкциями, а не шаблонами струн. Он возвращает функцию ссылки, которая в сочетании с моделью областей применения для генерации динамического представления. Процесс привязки этого представления и модели «прозрачный». Разработчику не нужно ничего делать в обновлении представления. И приложение не использует innerhtml, поэтому нам не нужно перезаписать ввод пользователя. В частности, директивы Angular могут не только использовать привязку строки, но и использовать некоторые структуры, которые указывают на поведение.
Компиляция AngularJS генерирует «стабильный DOM». Это означает, что экземпляры элементов DOM, связанные с моделью данных, не будут изменяться в течение жизненного цикла привязки. Это также означает, что код может получить ссылки на экземпляры элементов DOM и регистрацию событий, не беспокоясь о том, что эта ссылка будет потеряна при объединении шаблона и данных.