AngularJS

Материал из Википедии — свободной энциклопедии
Это старая версия этой страницы, сохранённая Tamtakoe (обсуждение | вклад) в 11:43, 12 мая 2013 (Добавил статью). Она может серьёзно отличаться от текущей версии.
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)
Перейти к навигации Перейти к поиску
AngularJS
AngularJS logo
Тип JavaScript-фреймворк
Разработчики Google Inc. и сообщество.
Написана на JavaScript
Операционная система Кроссплатформенный
Первый выпуск 2009 (2009)
Аппаратная платформа Web-платформа
Последняя версия 1.0.6 (4 апреля 2013; 12 лет назад (2013-04-04))
Репозиторий 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]

Версии AngularJS
Дата выпуска Версия Кодовое имя
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]

См. так же

Ссылки

  1. What Is Angular? Дата обращения: 12 февраля 2013.
  2. 5 Awesome AngularJS Features. Дата обращения: 13 февраля 2013.
  3. Batarang homepage
  4. http://blog.angularjs.org/2012/07/introducing-angularjs-batarang.html
  5. 1 2 AngularJS 1.0 -> 1.2 Roadmap. blog.angularjs.org (26 июля 2012). Дата обращения: 27 апреля 2013.
  6. 1 2 Backbonejs vs Angularjs: Demystifying the myths. Дата обращения: 13 февраля 2013.
  7. Javascript Frameworks And Data Binding. Дата обращения: 13 февраля 2013.

Литература

Внешние ссылки

Шаблон:JS templating Шаблон:Rich Internet applications Шаблон:Application frameworks