AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений[6]. Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.
| AngularJS | |
|---|---|
 | |
| Тип | фреймворк, библиотека JavaScript и библиотека функций |
| Разработчик | |
| Написана на | JavaScript[1] |
| Первый выпуск | 20 октября 2010 |
| Аппаратная платформа | Web-платформа |
| Последняя версия | |
| Репозиторий | github.com/angular/angul… |
| Лицензия | лицензия MIT[4][5] |
| Сайт | angularjs.org (англ.) |
 Медиафайлы на Викискладе | |
Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.
История разработки
правитьAngularJS разработан в 2009 году Мишко Хевери и Адамом Абронсом в Brat Tech LLC как программное обеспечение позади сервиса хранения JSON-данных, измеряющихся мегабайтами, для облегчения разработки корпоративных приложений. Сервис располагался на домене «GetAngular.com» и имел нескольких зарегистрированных пользователей, прежде чем они решили отказаться от идеи бизнеса и выпустить Angular как библиотеку с открытым исходным кодом.
Абронс покинул проект, но Хевери, работающий в Google, продолжил развивать и поддерживать библиотеку с другими сотрудниками Google Игорем Минаром и Войта Джином.
В марте 2014 было объявлено о начале разработки AngularJS 2.0[7]. Новая версия писалась с нуля на TypeScript и очень сильно отличалась от предыдущей, поэтому позже было решено развивать её как отдельный фреймворк с названием Angular. Angular 2 был выпущен 15 сентября 2016 года[8], тогда как первая версия продолжила развиваться отдельно как AngularJS.
В апреле 2022 с выпуском последней версии 1.8.3 поддержка AngularJS была официально прекращена.[9]
Философия Angular
правитьAngularJS спроектирован с убеждением, что декларативное программирование лучше всего подходит для построения пользовательских интерфейсов и описания программных компонентов[10], в то время как императивное программирование отлично подходит для описания бизнес-логики[11]. Фреймворк адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление. В результате AngularJS уменьшает роль DOM-манипуляций и улучшает тестируемость.
Цели разработки
править- Отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода.
- Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода.[12][13]
- Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
- Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.
Angular придерживается MVC-шаблона проектирования и поощряет слабую связь между представлением, данными и логикой компонентов. Используя внедрение зависимости, Angular переносит на клиентскую сторону такие классические серверные службы, как видозависимые контроллеры. Следовательно, уменьшается нагрузка на сервер и веб-приложение становится легче.
Популярные встроенные Angular-директивы
правитьС помощью директив AngularJS можно создавать пользовательские HTML-теги и атрибуты, чтобы добавить поведение некоторым элементам.[14]
- ng-app
- Объявляет элемент корневым для приложения.[15]
- ng-bind
- Автоматически заменяет текст HTML-элемента на значение переданного выражения.
- ng-model
- То же, что и ng-bind, только обеспечивает двустороннее связывание данных.[16] Изменится содержимое элемента — ангуляр изменит и значение модели. Изменится значение модели — ангуляр изменит текст внутри элемента.
- ng-class
- Определяет классы для динамической загрузки.
- ng-controller
- Определяет JavaScript-контроллер для вычисления HTML-выражений в соответствии с MVC.[17]
- ng-repeat
- Создает экземпляр DOM для каждого элемента из коллекции.[18]
- ng-show и ng-hide
- Показывает или скрывает элемент, в зависимости от значения логического выражения.
- ng-switch
- Создаёт экземпляр шаблона из множества вариантов, в зависимости от значения выражения.
- ng-view
- Базовая директива, отвечает за обработку маршрутов[19], которые принимают JSON перед отображением шаблонов, управляемых указанными контроллерами.
- ng-if
- Удаляет или создаёт часть DOM-дерева в зависимости от значения выражения. Если значение выражения, назначенного ngIf, равно false, элемент удаляется из DOM, иначе — вновь клонированный элемент вставляется в DOM.[20]
Также существует возможность создавать настраиваемые директивы, используя в том числе шаблоны в теге script.[21][22]
Двустороннее связывание данных
правитьДвустороннее связывание данных в AngularJS является наиболее примечательной особенностью: оно уменьшает количество кода, освобождая сервер от работы с шаблонами. Вместо этого шаблоны отображаются как обычный HTML, наполненный данными, содержащимися в области видимости, определённой в модели. Сервис $scope в Angular следит за изменениями в модели и изменяет раздел HTML-выражения в представлении через контроллер. Кроме того, любые изменения в представлении отражаются в модели. Это позволяет обойти необходимость манипулирования DOM и облегчает инициализацию и прототипирование веб-приложений[23].
Плагин для Chrome
правитьВ июле 2012 года команда Angular выпустила плагин для браузера Google Chrome под названием Batarang[24], который облегчает отладку веб-приложений, построенных на Angular. Расширение позволяет легко обнаруживать узкие места и предлагает графический интерфейс для отладки приложений[25].
Сравнение с 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, чтобы связать модель и представление, в значительной мере опирается на шаблонный код[26].
- REST
- Backbone.js хорошо поддерживает RESTful-бэкэнд. В AngularJS также очень легко работать с RESTful API при помощи сервиса $resource. В то же время в AngularJS есть более гибкий сервис $http, который подключается к удаленным серверам с помощью браузерного объекта XMLHttpRequest или через JSONP[27].
- Шаблоны
- В качестве шаблона AngularJS использует комбинацию настраиваемых HTML-тегов и выражений[28]. Backbone.js использует различные шаблонизаторы, такие как Underscore.js[26].
См. также
правитьПримечания
править- ↑ The angularjs Open Source Project on Open Hub: Languages Page — 2006.
- ↑ Release 1.8.3 — 2022.
- ↑ 1.8.3 ultimate-farewell (2022-04-07)
- ↑ angular.js/LICENSE at master · angular/angular.js · GitHub
- ↑ The angularjs Open Source Project on Open Hub: Licenses Page — 2006.
- ↑ Single Page Application using AngularJs. Tutorial. Дата обращения: 6 ноября 2016. Архивировано 7 ноября 2016 года.
- ↑ AngularJS 2.0. Дата обращения: 14 августа 2015. Архивировано 25 августа 2015 года.
- ↑ Angular, version 2: proprioception-reinforcement. angularjs.blogspot.ru. Дата обращения: 13 октября 2016. Архивировано 12 октября 2016 года.
- ↑ angular (англ.). npm. Дата обращения: 22 октября 2022. Архивировано 22 октября 2022 года.
- ↑ Understanding Components. Дата обращения: 20 октября 2016. Архивировано 20 октября 2016 года.
- ↑ What Is Angular? Дата обращения: 12 февраля 2013. Архивировано 20 мая 2013 года.
- ↑ Unit Testing. Дата обращения: 20 октября 2016. Архивировано 17 октября 2016 года.
- ↑ E2E Testing. Дата обращения: 20 октября 2016. Архивировано 12 апреля 2017 года.
- ↑ Пишем простую директиву
- ↑ ngApp. Дата обращения: 6 ноября 2016. Архивировано 22 октября 2016 года.
- ↑ Data Binding. Дата обращения: 6 ноября 2016. Архивировано 3 января 2015 года.
- ↑ Архивированная копия. Дата обращения: 6 ноября 2016. Архивировано 20 октября 2016 года.
- ↑ ngRepeat — directive in module ng. Дата обращения: 6 ноября 2016. Архивировано 20 октября 2016 года.
- ↑ Component Router. Дата обращения: 20 октября 2016. Архивировано 21 октября 2016 года.
- ↑ ngIf Angular docs. Дата обращения: 6 ноября 2016. Архивировано 20 октября 2016 года.
- ↑ Учебник AngularJS: всеобъемлющее руководство. Часть 2. (Настраиваемые директивы). Дата обращения: 27 ноября 2016. Архивировано 28 ноября 2016 года.
- ↑ Шаблоны в директивах
- ↑ 5 Awesome AngularJS Features. Дата обращения: 13 февраля 2013. Архивировано 20 мая 2013 года.
- ↑ Batarang homepage. Дата обращения: 12 мая 2013. Архивировано 10 февраля 2015 года.
- ↑ AngularJS: Introducing the AngularJS Batarang. Дата обращения: 12 мая 2013. Архивировано 2 февраля 2018 года.
- ↑ 1 2 Backbonejs vs Angularjs: Demystifying the myths. Дата обращения: 13 февраля 2013. Архивировано из оригинала 20 мая 2013 года.
- ↑ Javascript Frameworks And Data Binding. Дата обращения: 13 февраля 2013. Архивировано из оригинала 20 мая 2013 года.
- ↑ script directive in module ng. Дата обращения: 27 ноября 2016. Архивировано 27 ноября 2016 года.
Литература
править- Холмс С. Стек MEAN. Mongo, Express, Angular, Node. — СПб.: «Питер», 2017. — С. 496. — ISBN 978-5-496-02459-4.
- Фримен А. Angular для профессионалов. — СПб.: «Питер», 2018. — С. 800. — ISBN 978-5-4461-0451-2.
- Дилеман П. Изучаем Angular 2. — СПб.: «ДМК Пресс», 2017. — С. 354. — ISBN 978-5-97060-461-8.
- Brad Green, Shyam Seshadri. AngularJS. — O'Reilly Media, 2013. — 196 p. — ISBN 978-1449344856.
- Lukas Ruebbelke with Brian Ford. AngularJS in Action. — Manning Publications, 2015. — ISBN 9781617291333.