bagerman
@bagerman

Как устроен AngularJS?

Приветствую всех!

Объясните, пожалуйста, логику скрипта/действия.
Как браузер понимает, что нужно здесь:
9db36eddfd62488eae35dc40ee4ab6b1.jpg
рендерить HTML/CSS?

Как устроены эти фигурные скобки {{}}?

Буду очень благодарен
  • Вопрос задан
  • 644 просмотра
Решения вопроса 4
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
ангуляр берет HTML и парсит его (не регурялками, ибо парсить HTML регурярками не шибко удобно). Запись вида {{var}} является ничем иным как сокращенной записью директивы ng-bind:

<div>Hello, {{name}}</div>
<!-- Эквивалентно -->
<div> Hello, <span ng-bind="name"></span></div>


Как только шаблон полностью обработан, ангуляр может начать применять директивы к элементам. тут я на 100% не помню, но вроде как Angular тупо траверсит все элементы нашего фрагмента и пытается найти зарегистрированные директивы. Это удобно, тогда у нас есть период простого препроцессинга HTML, а затем мы просим распарсить это дело браузер, далее работая исключительно с DOM. Браузер за нас сделает большую часть грязной работы.

Директивы - если сильно упростить, представляют собой простенькую функцию (link) которая имеет доступ к элементу, его атрибутам и скоупу. Последнее используется как прослойка, призванная разделить взаимодействие контроллера и представления, именно эта штука отвечает за связывание данных и вообще обмен данными между контроллером, который представляет собой логику приложения, и представлением (то что в link).

Директива ngBind, которая используется в нашем случае, слушает изменения переменной в скоупе и, когда дожидается оных, меняет содержимое элемента через DOM.
Ответ написан
@bromzh
Drugs-driven development
Конкретно скобки скорее всего парсятся регуляркой. Всё, что между них разбивается на токены (там ведь может быть не только простой вывод переменной. а целые выражения) и обрабатывается по сложной логике, учитывая всякие окружающие scope`ы, data binding-и, внедрённые зависимости в контроллер и т.д.
Ответ написан
keksmen
@keksmen
Just a programmer
Браузер не понимает, ангуляр сам ищет подобные выражения, парсит их и заполняет в соответствии с текущей областью видимости (scope).
Ответ написан
@xaseros
На месте этих скобок, которые скорее всего ищутся либо регулярками, дибо собственным конечным автоматом, вставляется текстНод - объект DOM, который в свою очередь специальным объектом-биндером "связывается" с объектом scope. Биндер подписан на изменения scope, и при получении такого события, обновляет содержимое textNode.

Вместо textNode может быть любой другой элемент DOM, и может меняться не только текстсовое содержимое элемента, но и его атрибуты например.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы