AngularJS
![]() | В статье не хватает ссылок на источники (см. рекомендации по поиску). |
AngularJS | |
---|---|
![]() | |
Тип | JavaScript-фреймворк |
Разработчики | Google Inc. и сообщество. |
Написана на | JavaScript |
Операционная система | Кроссплатформенный |
Первый выпуск | 2009 |
Аппаратная платформа | Web-платформа |
Последняя версия | 1.0.6 (4 апреля 2013 ) |
Репозиторий | github.com/angular/angul… |
Состояние | Active |
Лицензия | MIT License |
Сайт | angularjs.org |
![]() |
AngularJS является JavaScript-фреймворком с открытым исходным кодом, разрабатываемым Google. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MCV шаблона, а так же упрощение тестирования и разработки.
Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющую собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.
Философия Angular
AngularJS спроектирован с убеждением, что декларативное программирование лучше всего подходит для построения пользовательских интерфейсов и описания программных компонентов, в то время как императивное программирование отлично подходит для описания бизнес-логики.[1] Фреймворк адаптирует и расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление. В результате AngularJS уменьшает роль DOM-манипуляций и улучшает тестируемость.
Цели разработки:
- Отделение [[Document Object Model | DOM]-манипуляции от логики приложения,что улучшает тестируемость кода.
- Отношение к тестированию как к важной части разработки. Сложность тестирования напрямую зависит от структурированности кода.
- Разделение клиентской и серверной стороны, что позволяет вести разработку параллельно.
- Проведение разработчика через весь путь создания приложения: от проектирования пользовательского интерфейса, через написание бизнес-логики, к тестированию.
Angular придерживается MVC-шаблона проектирования и поощряет слабую связь между представлением, данными и логикой компонентов. Используя внедрение зависимости, Angular переносит на клиентскую сторону такие классические серверные службы, как видозависимые контроллеры. Следовательно, уменьшается нагрузка на сервер и веб-приложение становится легче.
Популярные Angular-директивы
С помощью директив AngularJS можно создавать пользовательские HTML-теги, чтобы добавить поведение некоторым элементам.
- ng-app
- Объявляет элемент корневым для приложения и может быть изменен с помощью пользовательских HTML-тегов.
- ng-bind
- Автоматически заменяет текст HTML-элемента на значение данного выражения.
- ng-model
- Как и ng-bind, но обеспечивает двустороннее связывание данных между представлением и областью видимости.
- ng-class
- Определяет классы для динамической загрузки.
- ng-controller
- Определяет JavaScript-контроллер для вычисления HTML-выражений.
- ng-repeat
- Создает экземпляр для каждого элемента из коллекции.
- ng-show и ng-hide
- Показывает или скрывает элемент в зависимости от значения логического выражения.
- ng-switch
- Создает экземпляр шаблона из множества вариантов, в зависимости от значения выражения.
- ng-view
- базовая директива, отвечает за обработку маршрутов, которые принимают JSON перед отображением шаблонов, управляемых указанными контроллерами.
Двухстороннее связывание данных
Двустороннее связывание данных в AngularJS является наиболее примечательной особенностью и уменьшает количество кода, освобождая сервер от работы с шаблонами. Вместо этого, шаблоны отображаются как обычный HTML, наполненный данными, содержащимися в области видимости, определенной в модели. Сервис $scope
в Angular следит за изменениями в модели и изменяет разделе HTML-выражения в представлении через контроллер. Кроме того, любые изменения в представлении отражаются в модели. Это позволяет обойти необходимость манипулирования DOM и облегчает инициализацию и прототипирование веб-приложений.[2]
Плагин для Chrome
В июле 2012 года команда Angularвыпустила плагин для браузера Google Chrome под названием Batarang,[3] который облегчает отладку веб-приложений, построенных на Angular. Расширение позволяет легко обнаруживать узкие места и предлагает графический интерфейс для отладки приложений.[4]
История разработки
AngularJS был первоначально разработан в 2009 году Мишко Хевери и Адамом Абронсом как программное обеспечение позади сервиса хранения JSON-данных, измеряющихся мегабайтами, для облегчения разработки приложений организациями. Сервис располагался на домене "GetAngular.com" и имел нескольких зарегистрированных пользователей, прежде чем они решили отказаться от идеи бизнеса и выпустить Angular как библиотеку с открытым исходным кодом.
Абронс покинул проект, но Хевери, работающий в Google, продолжает развивать и поддерживать библиотеку с другими сотрудниками Google Игорем Минаром и Войта Джином.
Версии
Версии 1.0.x в настоящее время стабильны, в то время, как 1.1.x могут содержать нестабильные изменения в минорных релизах (i.e. 1.1.x – 1.1.y).[5]
Дата выпуска | Версия | Кодовое имя |
---|---|---|
Apr 4, 2013 | 1.0.6 | universal-irreversibility (stable) |
Apr 3, 2013 | 1.1.4 | quantum-manipulation (unstable) |
Feb 22, 2013 | 1.1.3 | radioactive-gargle |
Feb 20, 2013 | 1.0.5 | flatulent-propulsion |
Jan 22, 2013 | 1.1.2 | tofu-animation |
Jan 22, 2013 | 1.0.4 | bewildering-hair |
Nov 26, 2012 | 1.1.1 | pathological-kerning |
Nov 26, 2012 | 1.0.3 | bouncy-thunder |
Aug 31, 2012 | 1.1.0 | increase-gravatas |
Aug 31, 2012 | 1.0.2 | debilitating-awesomeness |
Jun 25, 2012 | 1.0.1 | thorium-shielding |
Jun 13, 2012 | 1.0.0 | temporal-domination (stable)[5] |
Jun 12, 2012 | 1.0.0rc12 | regression-extermination |
Jun 10, 2012 | 1.0.0rc11 | promise-resolution |
May 23, 2012 | 1.0.0rc10 | tesseract-giftwrapping |
May 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 чтобы связать модель и представление в значительной мере опирается на шаблонный код.[6]
- REST
- Backbone.js прекрасно поддерживает RESTful бэкэнд, в то время как сервис $http в AngularJS более гибок и подключается к удаленным серверам либо с помощью браузерного объекта
XMLHttpRequest
или черезJSONP
.[7]
- Шаблоны
- В качестве шаблона AngularJS использует комбинацию настраиваемых HTML-тегов и выражений. Backbone.js использует различные шаблонизаторы, такие как Underscore.js.[6]
См. так же
Ссылки
- ↑ What Is Angular? Дата обращения: 12 февраля 2013.
- ↑ 5 Awesome AngularJS Features . Дата обращения: 13 февраля 2013.
- ↑ Batarang homepage
- ↑ http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html
- ↑ 1 2 AngularJS 1.0 -> 1.2 Roadmap . blog.angularjs.org (26 июля 2012). Дата обращения: 27 апреля 2013.
- ↑ 1 2 Backbonejs vs Angularjs: Demystifying the myths . Дата обращения: 13 февраля 2013.
- ↑ Javascript Frameworks And Data Binding . Дата обращения: 13 февраля 2013.
Литература
- Green, Brad. AngularJS / Brad Green, Shyam Seshadri. — 1st. — O'Reilly Media, March 22, 2013. — P. 150. — ISBN 978-1449344856.
Внешние ссылки
- angularjs.org — официальный сайт AngularJS
- сайт на русском
- Angularjs at Google Groups
- AngularJS at Google+
- Batarang Chrome plugin
Шаблон:JS templating Шаблон:Rich Internet applications Шаблон:Application frameworks