AngularJS
| AngularJS | |
|---|---|
| | |
| Тип | фреймворк, библиотека JavaScript и библиотека функций |
| Разработчик | |
| Написана на | JavaScript[1] |
| Дата выпуска | 20 октября 2010 |
| Аппаратная платформа | Web-платформа |
| Последняя версия | |
| Репозиторий | github.com/angular/angul… |
| Лицензия | лицензия MIT[4][5] |
| Сайт | angularjs.org (англ.) |
AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений[6]. Его цель — расширение браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.
Фреймворк работает с 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.
Ссылки
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.