Блог Андрея Амельченя

 Я достаточно много писал на 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 очень мощный фреймворк, который позволяет просто и элегантно справлять со многими задачами.
Думаю, получение столько мощного инструмента окупает время, затраченное на его изучение…