AngularJS

13 Червня, 2018 2

AngularJS – свободный JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель – расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.

Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.

AngularJS спроектирован с убеждением, что декларативное программирование лучше всего подходит для построения пользовательских интерфейсов и описания программных компонентов, в то время как императивное программирование отлично подходит для описания бизнес-логики. Фреймворк адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление. В результате AngularJS уменьшает роль DOM-манипуляций и улучшает тестируемость.

Цели разработки AngularJS

• Отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода.
• Отношение к тестированию как к важной части разработки.

Сложность тестирования напрямую зависит от структурированности кода.

• Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
• Проведение разработчика через весь путь создания приложения:

от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.

Angular придерживается MVC-шаблона проектирования и поощряет слабую связь между представлением, данными и логикой компонентов. Используя внедрение зависимости, Angular переносит на клиентскую сторону такие классические серверные службы, как видозависимые контроллеры. Следовательно, уменьшается нагрузка на сервер и веб-приложение становится легче.

Популярные встроенные Angular-директивы

С помощью директив AngularJS можно создавать пользовательские HTML-теги и атрибуты, чтобы добавить поведение некоторым элементам.

• ng-app

Объявляет элемент корневым для приложения.

• ng-bind

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

• ng-model

То же что и ng-bind, только обеспечивает двустороннее связывание данных. Изменится содержимое элемента, ангуляр изменит и значение модели. Изменится значение модели, ангуляр изменит текст внутри элемента.

• ng-class

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

• ng-controller

Определяет JavaScript-контроллер для вычисления HTML-выражений в соответствии с MVC (Model-View-Controller).

• ng-repeat

Создаёт экземпляр DOM для каждого элемента из коллекции.

• ng-show и ng-hide

Показывает или скрывает элемент в зависимости от значения логического выражения.

• ng-switch

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

• ng-view

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

• ng-if

Удаляет или создаёт часть DOM-дерева в зависимости от значения выражения. Если значение выражения, назначенного ngIf, равно false, элемент удаляется из DOM, иначе – вновь клонированный элемент вставляется в DOM.

Также существует возможность создавать настраиваемые директивы, используя в том числе шаблоны в теге <script>.

Сравнение AngularJS с Backbone.js

Похожими возможностями обладает Backbone.js – JavaScript-библиотека, основанная на шаблоне проектирования MVP (Model-View-Presenter), предназначена для разработки веб-приложений с поддержкой RESTful JSON-интерфейса. Backbone.js – очень лёгкая библиотека (упакованная и 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.

Ссылки

Сайт AngularJS

Скачать AngularJS