AngularJS – начало работы

Настало время изучить AngularJS и начать им пользоваться…
 Я достаточно много писал на jQuery, и сразу захотелось выяснить, какие же есть сходства и различия между этими инструментами.
Сразу бросается в глаза то, что jQuery – это библиотека, которая упрощает взаимодействие с DOM, а AngularJS – это уже фреймворк, который позволяет расширять браузерные приложения, на основе MVC шаблона.
В рантайме, приложение использующее jQuery практически ничего не делает (делает конечно, но для простоты данным количеством операций можно пренебречь), а вызывает выполнение кода только в ответ на какое-либо действие, тогда как AngularJS на стадии загрузки страницы из DOM дерева и кода строит angular-приложение.
При загрузке страницы, использующий AngularJS HTML код с angular-директивами компилируется в дерево шаблонов, которые соответствуют scope(области видимости), контроллеры присоединяются к ним, приложение предоставляет правильную привязку данных между представлением и моделью.
После каждой обновлении модели Angular перезапускает цикл процедуры $digest, которая обновляет привязки данных и сохраняет модель в актуальном состоянии. В Angular используется декларативного подход вместо императивный. Фреймворк адаптирует и расширяет HTML код.
При использовании AngularJS рекомендуется не использовать манипуляции в DOM, если это не собственные фильтры или директивы. Одной из примечательных особенностей AngularJS является использование двухстороннего связывания данных. Любые изменения в представлении сразу отражаются и в модели и наоборот! Использование декларативного стиля в AngularJS возможно благодаря использования директив. Огромное количество стандартных директив и пользователь может создавать свои директивы при необходимости.
Наиболее популярные директивы:
ng-app – данная директива приложению, какой элемент является корневым.
    

{{40+2}}

Здесь директива an-app прописана в теге body. Также можно заметить код {{40+2}}. Двойные фигурные скобки в AngularJS являются разметкой для привязки данных(data-binding). Об этом я напишу позже, сейчас нужно только сказать, что данное выражение будет вычислено и на выходе мы получим число 42.

ng-bind
– заменяет текст HTML элемента на значение, заданное в выражении и обновляет его содержимое, при изменении значения выражения.
    

Hello, !


ng-model
– аналогично ng-bind, но дополнительно обеспечивает двустороннее связывание между представлением и областью видимости.

ng-class
– определяет классы для динамической загрузки.
    

    

Hello, world!


ng-controller
– определяет JavaScript контроллер, для вычисления HTML выражения.

ng-repeat
– создают экземпляр объекта, для каждого объекта из коллекции.
    

{{i}}


ng-show , ng-hide
– показывают и скрывают элемент, в зависимости от логического выражения.
     Show me
    
This is text...

ng-switch
– создаёт экземпляр шаблона из множества вариантов в зависимости от значения выражения.

ng-view – отвечает за обработку маршрутов, которые принимает JSON перед отображением шаблонов, управляемых указанными контроллерами.

Как можно увидеть, AngularJS очень мощный фреймворк, который позволяет просто и элегантно справлять со многими задачами.
Думаю, получение столько мощного инструмента окупает время, затраченное на его изучение…

Комментарии (2) -

Андрей 02.03.2016 20:19:15

Хорошо написал. Кратко. Лаконично. Спасибо!

P.S: После первого примера описка. Ведь нужно ng-app писать? ("Здесь директива an-app прописана в теге body.")

Андрей 02.03.2016 20:38:42

Вот сразу при использовании AngularJS увидел директиву ng-init. Почему про неё решил ничего не писать?

Добавить комментарий