AngularJS

Материал из Википедии — свободной энциклопедии
Перейти к: навигация, поиск
AngularJS
AngularJS logo.svg
Тип

фреймворк, библиотека JavaScript и библиотека функций

Разработчик

Brat Tech LLC, Google Inc. и сообщество

Написана на

JavaScript

Первый выпуск

2009

Последняя версия

1.5.8 (22.07.2016)

Тестовая версия

2.0.0 beta 9 (10.03.2016)

Состояние

Active

Лицензия

Лицензия MIT[1]

Сайт

angularjs.org
angular.io

Commons-logo.svg AngularJS на Викискладе

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

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

История разработки[править | править вики-текст]

AngularJS разработан в 2009 году Мишко Хевери и Адамом Абронсом в Brat Tech LLC как программное обеспечение позади сервиса хранения JSON-данных, измеряющихся мегабайтами, для облегчения разработки корпоративных приложений. Сервис располагался на домене «GetAngular.com» и имел нескольких зарегистрированных пользователей, прежде чем они решили отказаться от идеи бизнеса и выпустить Angular как библиотеку с открытым исходным кодом.

Абронс покинул проект, но Хевери, работающий в Google, продолжает развивать и поддерживать библиотеку с другими сотрудниками Google Игорем Минаром и Войта Джином.

Философия Angular[править | править вики-текст]

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

Цели разработки[править | править вики-текст]

  • Отделение DOM-манипуляции от логики приложения, что улучшает тестируемость кода.
  • Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода.[5][6]
  • Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
  • Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.

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

Популярные встроенные Angular-директивы[править | править вики-текст]

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

ng-app
Объявляет элемент корневым для приложения.[8]
ng-bind
Автоматически заменяет текст HTML-элемента на значение переданного выражения.
ng-model
То же что и ng-bind, только обеспечивает двустороннее связывание данных.[9] Изменится содержимое элемента, ангуляр изменит и значение модели. Изменится значение модели, ангуляр изменит текст внутри элемента.
ng-class
Определяет классы для динамической загрузки.
ng-controller
Определяет JavaScript-контроллер для вычисления HTML-выражений в соответствии с MVC.[10]
ng-repeat
Создает экземпляр DOM для каждого элемента из коллекции.[11]
ng-show и ng-hide
Показывает или скрывает элемент в зависимости от значения логического выражения.
ng-switch
Создает экземпляр шаблона из множества вариантов, в зависимости от значения выражения.
ng-view
базовая директива, отвечает за обработку маршрутов[12], которые принимают JSON перед отображением шаблонов, управляемых указанными контроллерами.
ng-if
Удаляет или создает часть DOM-дерева в зависимости от значения выражения. Если значение выражения, назначенного ngIf, равно false, элемент удаляется из DOM, иначе - вновь клонированный элемент вставляется в DOM.[13]

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

Двустороннее связывание данных[править | править вики-текст]

Двустороннее связывание данных в AngularJS является наиболее примечательной особенностью и уменьшает количество кода, освобождая сервер от работы с шаблонами. Вместо этого, шаблоны отображаются как обычный HTML, наполненный данными, содержащимися в области видимости, определенной в модели. Сервис $scope в Angular следит за изменениями в модели и изменяет раздел HTML-выражения в представлении через контроллер. Кроме того, любые изменения в представлении отражаются в модели. Это позволяет обойти необходимость манипулирования DOM и облегчает инициализацию и прототипирование веб-приложений[16].

Плагин для Chrome[править | править вики-текст]

В июле 2012 года команда Angular выпустила плагин для браузера Google Chrome под названием Batarang[17], который облегчает отладку веб-приложений, построенных на Angular. Расширение позволяет легко обнаруживать узкие места и предлагает графический интерфейс для отладки приложений[18].

Версии[править | править вики-текст]

В марте 2014 было объявлено о начале разработки AngularJS 2.0[19] и 15 сентября 2016 года объявлено[20] о выпуске финальной версии по названием Angular 2.

Последняя стабильная на данный момент версия AngularJS — 1.5.0, выпущенная 5 февраля 2016 года.

Версии AngularJS
Дата выпуска Версия Кодовое имя
5 февраля 2016 1.5.0 ennoblement-facilitation
19 ноября 2015 1.4.8 ice-manipulation
29 сентября 2015 1.4.7 dark-luminescence
17 сентября 2015 1.4.6 multiplicative-elevation
28 августа 2015 1.4.5 permanent-internship
13 августа 2015 1.4.4 pylon-requirement
15 июля 2015 1.4.3 foam-acceleration
6 июля 2015 1.4.2 nebular-readjustment
16 июня 2015 1.4.1 hyperionic-illumination
26 мая 2015 1.4.0 jaracimrman-existence
12 мая 2015 1.4.0-rc.2 rocket-zambonimation
13 января 2015 1.3.9 multidimensional-awareness
1 ноября 2013 1.0.9 lerigos-devconf
23 мая 2013 1.0.7 monochromatic-rainbow
23 мая 2013 1.1.5 triangle-squarification
4 апреля 2013 1.0.6 universal-irreversibility (stable)
3 апреля 2013 1.1.4 quantum-manipulation (unstable)
22 февраля 2013 1.1.3 radioactive-gargle
20 февраля 2013 1.0.5 flatulent-propulsion
22 января 2013 1.1.2 tofu-animation
22 января 2013 1.0.4 bewildering-hair
26 ноября 2012 1.1.1 pathological-kerning
26 ноября 2012 1.0.3 bouncy-thunder
31 авг. 2012 1.1.0 increase-gravatas
31 авг. 2012 1.0.2 debilitating-awesomeness
25 июня 2012 1.0.1 thorium-shielding
13 июня 2012 1.0.0 temporal-domination (stable)[21].
12 июня 2012 1.0.0rc12 regression-extermination
10 июня 2012 1.0.0rc11 promise-resolution
23 мая 2012 1.0.0rc10 tesseract-giftwrapping
14 мая 2012 1.0.0rc9 eggplant-teleportation
May 6, 2012 1.0.0rc8 blooming-touch
Apr 30, 2012 1.0.0rc7 rc-generation
Apr 20, 2012 1.0.0rc6 runny-nose
Apr 12, 2012 1.0.0rc5 reality-distortion
Apr 5, 2012 1.0.0rc4 insomnia-induction
Mar 29, 2012 1.0.0rc3 barefoot-telepathy
Mar 20, 2012 1.0.0rc2 silence-absorption
Mar 13, 2012 1.0.0rc1 moiré-vision
Jan 17, 2012 0.10.6 bubblewrap-cape
Nov 8, 2011 0.10.5 steel-fist
Oct 22, 2011 0.10.4 human-torch
Oct 13, 2011 0.10.3 shattering-heartbeat
Oct 8, 2011 0.10.2 sneaky-seagull
Sep 9, 2011 0.10.1 inexorable-juggernaut
Sep 2, 2011 0.10.0 chicken-hands
Aug 20, 2011 0.9.19 canine-psychokinesis
Jul 29, 2011 0.9.18 jiggling-armfat
Jun 30, 2011 0.9.17 vegetable-reanimation
Jun 7, 2011 0.9.16 weather-control
April 11, 2011 0.9.15 lethal-stutter
April 1, 2011 0.9.14 key-maker
Mar 13, 2011 0.9.13 curdling-stare
Mar 3, 2011 0.9.12 thought-implanter
Feb 8, 2011 0.9.11 snow-maker
Jan 26, 2011 0.9.10 flea-whisperer
Jan 13, 2011 0.9.9 time-shift
Dec 23, 2010 0.9.8 astral-projection
Dec 10, 2010 0.9.7 sonic-scream
Dec 6, 2010 0.9.6 night-vision
Nov 25, 2010 0.9.5 turkey-blast
Nov 18, 2010 0.9.4 total-recall
Nov 10, 2010 0.9.3 cold-resistance
Nov 3, 2010 0.9.2 faunal-mimicry
Oct 26, 2010 0.9.1 repulsion-field
Oct 20, 2010 0.9.0 dragon-breath

Сравнение с Backbone.js[править | править вики-текст]

Связывание данных
Наиболее характерной особенностью, которая разделяет библиотеки, является способ синхронизации модели и представления. В то время как AngularJS поддерживает двустороннее связывание данных, Backbone.js чтобы связать модель и представление в значительной мере опирается на шаблонный код[22].
REST
Backbone.js хорошо поддерживает RESTful-бэкэнд. В AngularJS также очень легко работать с RESTful API при помощи сервиса $resource. В то же время в AngularJS есть более гибкий сервис $http, который подключается к удаленным серверам с помощью браузерного объекта XMLHttpRequest или через JSONP[23].
Шаблоны
В качестве шаблона AngularJS использует комбинацию настраиваемых HTML-тегов и выражений.[24] Backbone.js использует различные шаблонизаторы, такие как Underscore.js[22].

Примечания[править | править вики-текст]

  1. https://github.com/angular/angular.js/blob/master/LICENSE
  2. Single Page Application using AngularJs. Tutorial
  3. Understanding Components
  4. What Is Angular?. Проверено 12 февраля 2013. Архивировано из первоисточника 20 мая 2013.
  5. Unit Testing
  6. E2E Testing
  7. Пишем простую директиву
  8. ngApp
  9. Data Binding
  10. https://docs.angularjs.org/api/ng/directive/ngController
  11. ngRepeat - directive in module ng
  12. Component Router
  13. ngIf Angular docs
  14. Учебник AngularJS: всеобъемлющее руководство. Часть 2. (Настраиваемые директивы).
  15. Шаблоны в директивах
  16. 5 Awesome AngularJS Features. Проверено 13 февраля 2013. Архивировано из первоисточника 20 мая 2013.
  17. Batarang homepage
  18. AngularJS: Introducing the AngularJS Batarang
  19. AngularJS 2.0
  20. Angular, version 2: proprioception-reinforcement. angularjs.blogspot.ru. Проверено 13 октября 2016.
  21. AngularJS 1.0 -> 1.2 Roadmap. blog.angularjs.org (26 июля 2012). Проверено 27 апреля 2013. Архивировано из первоисточника 20 мая 2013.
  22. 1 2 Backbonejs vs Angularjs: Demystifying the myths. Проверено 13 февраля 2013. Архивировано из первоисточника 20 мая 2013.
  23. Javascript Frameworks And Data Binding. Проверено 13 февраля 2013. Архивировано из первоисточника 20 мая 2013.
  24. script directive in module ng

Литература[править | править вики-текст]

  • 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.

Ссылки[править | править вики-текст]