AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.
Цели разработки
- Отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода.
- Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода.
- Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
- Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.
Angular придерживается MVC-шаблона проектирования и поощряет слабую связь между представлением, данными и логикой компонентов. Используя внедрение зависимости, Angular переносит на клиентскую сторону такие классические серверные службы, как видозависимые контроллеры. Следовательно, уменьшается нагрузка на сервер и веб-приложение становится легче.
Популярные встроенные Angular-директивы
С помощью директив AngularJS можно создавать пользовательские HTML-теги и атрибуты, чтобы добавить поведение некоторым элементам.
ng-app
Объявляет элемент корневым для приложения.
ng-bind
Автоматически заменяет текст HTML-элемента на значение переданного выражения.
ng-model
То же, что и ng-bind, только обеспечивает двустороннее связывание данных. Изменится содержимое элемента — ангуляр изменит и значение модели. Изменится значение модели — ангуляр изменит текст внутри элемента.
ng-class
Определяет классы для динамической загрузки.
ng-controller
Определяет JavaScript-контроллер для вычисления HTML-выражений в соответствии с MVC.
ng-repeat
Создает экземпляр DOM для каждого элемента из коллекции.
ng-show и ng-hide
Показывает или скрывает элемент, в зависимости от значения логического выражения.
ng-switch
Создаёт экземпляр шаблона из множества вариантов, в зависимости от значения выражения.
ng-view
Базовая директива, отвечает за обработку маршрутов, которые принимают JSON перед отображением шаблонов, управляемых указанными контроллерами.
ng-if
Удаляет или создаёт часть DOM-дерева в зависимости от значения выражения. Если значение выражения, назначенного ngIf, равно false, элемент удаляется из DOM, иначе — вновь клонированный элемент вставляется в DOM.
Также существует возможность создавать настраиваемые директивы, используя в том числе шаблоны в теге script.
Двустороннее связывание данных
Двустороннее связывание данных в AngularJS является наиболее примечательной особенностью, и уменьшает количество кода, освобождая сервер от работы с шаблонами. Вместо этого, шаблоны отображаются как обычный HTML, наполненный данными, содержащимися в области видимости, определённой в модели. Сервис $scope в Angular следит за изменениями в модели и изменяет раздел HTML-выражения в представлении через контроллер. Кроме того, любые изменения в представлении отражаются в модели. Это позволяет обойти необходимость манипулирования DOM и облегчает инициализацию и прототипирование веб-приложений.
Плагин для Chrome
В июле 2012 года команда Angular выпустила плагин для браузера Google Chrome под названием Batarang, который облегчает отладку веб-приложений, построенных на Angular. Расширение позволяет легко обнаруживать узкие места и предлагает графический интерфейс для отладки приложений.
Сравнение с Backbone.js
Похожими возможностями обладает Backbone.js — JavaScript-библиотека, основанная на шаблоне проектирования Model-View-Presenter (MVP), предназначена для разработки веб-приложений с поддержкой RESTful JSON интерфейса. Backbone — очень лёгкая библиотека (упакованная и gzip-сжатая по величине ~6.3 Кб), но для работы необходима библиотека Underscore.js, а для поддержки REST API и работы с DOM элементами рекомендуется подключить jQuery-подобную библиотеку: jQueryили Zepto. Backbone.js создан Джереми Ашкенасом, который известен также как создатель CoffeeScript.
Однако, есть и существенные различия:
Связывание данных
Наиболее характерной особенностью, которая разделяет библиотеки, является способ синхронизации модели и представления. В то время как AngularJS поддерживает двустороннее связывание данных, Backbone.js, чтобы связать модель и представление, в значительной мере опирается на шаблонный код.
REST
Backbone.js хорошо поддерживает RESTful-бэкэнд. В AngularJS также очень легко работать с RESTful API при помощи сервиса $resource. В то же время в AngularJS есть более гибкий сервис $http, который подключается к удаленным серверам с помощью браузерного объекта XMLHttpRequest или через JSONP.
Шаблоны
В качестве шаблона AngularJS использует комбинацию настраиваемых HTML-тегов и выражений. Backbone.js использует различные шаблонизаторы, такие как Underscore.js