Настало время изучить AngularJS и начать им пользоваться…
Я достаточно много писал на jQuery, и сразу захотелось выяснить, какие же есть сходства и различия между этими инструментами.
Сразу бросается в глаза то, что jQuery – это библиотека, которая упрощает взаимодействие с DOM, а AngularJS – это уже фреймворк, который позволяет расширять браузерные приложения, на основе MVC шаблона.
В рантайме, приложение использующее jQuery практически ничего не делает (делает конечно, но для простоты данным количеством операций можно пренебречь), а вызывает выполнение кода только в ответ на какое-либо действие, тогда как AngularJS на стадии загрузки страницы из DOM дерева и кода строит angular-приложение.
При загрузке страницы, использующий AngularJS HTML код с angular-директивами компилируется в дерево шаблонов, которые соответствуют scope(области видимости), контроллеры присоединяются к ним, приложение предоставляет правильную привязку данных между представлением и моделью.
После каждой обновлении модели Angular перезапускает цикл процедуры $digest, которая обновляет привязки данных и сохраняет модель в актуальном состоянии.
В Angular используется декларативного подход вместо императивный. Фреймворк адаптирует и расширяет HTML код.
При использовании AngularJS рекомендуется не использовать манипуляции в DOM, если это не собственные фильтры или директивы.
Одной из примечательных особенностей AngularJS является использование двухстороннего связывания данных. Любые изменения в представлении сразу отражаются и в модели и наоборот!
Использование декларативного стиля в AngularJS возможно благодаря использования директив. Огромное количество стандартных директив и пользователь может создавать свои директивы при необходимости.
Наиболее популярные директивы:
ng-app – данная директива приложению, какой элемент является корневым.
Здесь директива an-app прописана в теге body. Также можно заметить код {{40+2}}. Двойные фигурные скобки в
AngularJS являются разметкой для привязки данных(
data-binding). Об этом я напишу позже, сейчас нужно только сказать, что данное выражение будет вычислено и на выходе мы получим число 42.
ng-bind – заменяет текст HTML элемента на значение, заданное в выражении и обновляет его содержимое, при изменении значения выражения.
ng-model – аналогично
ng-bind, но дополнительно обеспечивает двустороннее связывание между представлением и областью видимости.
ng-class – определяет классы для динамической загрузки.
ng-controller – определяет JavaScript контроллер, для вычисления HTML выражения.
ng-repeat – создают экземпляр объекта, для каждого объекта из коллекции.
{{i}}
ng-show , ng-hide – показывают и скрывают элемент, в зависимости от логического выражения.
Show me
This is text...
ng-switch – создаёт экземпляр шаблона из множества вариантов в зависимости от значения выражения.
ng-view – отвечает за обработку маршрутов, которые принимает
JSON перед отображением шаблонов, управляемых указанными контроллерами.
Как можно увидеть,
AngularJS очень мощный фреймворк, который позволяет просто и элегантно справлять со многими задачами.
Думаю, получение столько мощного инструмента окупает время, затраченное на его изучение…