AngularJS

AngularJS

Разработчик (и)	Google
Первоначальный выпуск	20 октября 2010 г.; 10 лет назад (2010-10-20)
Стабильный выпуск	1.8.0 / 1 июня 2020 г.; 4 месяца назад (2020-06-01)
Репозиторий	Репозиторий AngularJS
Написано на	JavaScript
Платформа	JavaScript-движок
Размер	167 КБ рабочая. 1,2 МБ для разработки
Тип	Веб-фреймворк
Лицензия	Лицензия MIT
Веб-сайт	angularjs.org

AngularJS - это JavaScript на основе с открытым исходным кодом интерфейс веб-фреймворк, который в основном поддерживается Google и сообществом частных лиц и корпораций для решения многих проблем, возникающих при разработке одностраничные приложения. Он призван упростить как разработку, так и тестирование таких приложений, предоставляя основу для клиентской стороны модель – представление – контроллер (MVC) и модель – представление – модель просмотра. Архитектуры (MVVM) вместе с компонентами, обычно используемыми в многофункциональных интернет-приложениях..

AngularJS используется в качестве внешнего интерфейса стека MEAN, состоящего из базы данных MongoDB, Express.js фреймворк сервера веб-приложений, сам Angular.js и Node.js среда выполнения сервера. Версия 1.8.x находится на долгосрочной поддержке до 31 декабря 2021 года. После этой даты AngularJS больше не будет обновляться, и вместо него предлагается Angular (2.0+).

• 1 Обзор
• 2 Область действия
• 3 Bootstrap
• 4 Двусторонняя привязка данных
• 5 История разработки
  • 5.1 Поддержка старых браузеров
  • 5.2 Angular и AngularDart
  • 5.3 Angular Universal
• 6 Библиотеки
  • 6.1 Angular Материал
• 7 Расширение Chrome
• 8 Производительность
• 9 См. Также
• 10 Ссылки
• 11 Дополнительная литература
• 12 Внешние ссылки

AngularJS framework работает путем первого чтения страницы языка гипертекстовой разметки (HTML), в которую встроены дополнительные настраиваемые атрибуты HTML. Angular интерпретирует эти атрибуты как директивы для привязки частей ввода или вывода страницы к модели, которая представлена ​​стандартными переменными JavaScript . Значения этих переменных JavaScript могут быть установлены вручную в коде или получены из статических или динамических ресурсов JSON.

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

Цели проектирования AngularJS включают:

• для отделения манипуляции с DOM от логики приложения. Сложность этого существенно зависит от способа структурирования кода.
• для отделения клиентской стороны приложения от серверной. Это позволяет вести разработку параллельно и позволяет повторно использовать обе стороны.
• для обеспечения структуры пути создания приложения: от проектирования пользовательского интерфейса через написание бизнес-логики до тестирования.

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

AngularJS использует термин «область действия» в манере, близкой к основам информатики.

Область действия в информатике описывает, когда в программе действует конкретная привязка . Спецификация ECMA-262 определяет область действия как: лексическую среду, в которой объект Function выполняется в клиентских веб-скриптах; аналогично тому, как область видимости определяется в лямбда-исчислении.

Как часть архитектуры "MVC", область видимости формирует "Модель", и все переменные, определенные в области видимости, также могут быть доступны из "Представления" как «Контроллер». Область действия действует как клей и связывает «Вид» и «Контроллер».

Задача, выполняемая AngularJS bootstrapper, происходит в три этапа после загрузки DOM:

1. Создание нового инжектора
2. Компиляция директив, которые украшают DOM
3. Связывание всех директив с областью действия

Директивы AngularJS позволяют разработчику указывать настраиваемые и повторно используемые HTML-подобные элементы и атрибуты, которые определяют привязки данных и поведение компонентов представления. Вот некоторые из наиболее часто используемых директив:

ng-animate

Модуль обеспечивает поддержку JavaScript, переходов CSS3 и перехватов анимации ключевых кадров CSS3 в рамках существующих основных и пользовательских директив.

Начиная с ng - Атрибуты *недопустимы в спецификациях HTML, data-ng-*также можно использовать в качестве префикса. Например, в AngularJS действительны как ng-app, так и data-ng-app.

ng-app

Объявляет корневой элемент приложения AngularJS, в котором можно использовать директивы для объявления привязок и определения поведения.

ng-aria

Модуль для поддержки специальных возможностей общего Атрибуты ARIA.

ng-bind

Устанавливает текст элемента DOM в значение выражения. Например, отображает значение «name» внутри элемента span. Любое изменение переменной name в области видимости приложения мгновенно отражается в DOM.

ng-class

Условное применение класса в зависимости от значения логического выражения.

ng-controller

Задает класс контроллера JavaScript, который оценивает выражения HTML.

ng-if

Базовая директива оператора if, которая создает экземпляр следующего элемента, если условия истинны. Когда условие ложно, элемент удаляется из DOM. При значении true клон скомпилированного элемента вставляется повторно.

ng-init

Вызывается один раз при инициализации элемента.

ng-model

Аналогично ng-bind, но устанавливает двустороннюю привязку данных между представлением и областью действия.

ng-model-options

Обеспечивает настройку того, как выполняются обновления модели.

ng-repeat

Создание экземпляра элемента один раз на элемент из коллекции.

ng-showng-hide

Условно показать или скрыть элемент в зависимости от значения логического выражения. Отображение и скрытие достигается путем установки стиля отображения CSS.

ng-switch

Условно создает экземпляр одного шаблона из набора вариантов, в зависимости от значения выражения выбора.

ng-view

директива base, отвечающая за обработку маршрутов, которые разрешают JSON перед рендерингом шаблонов, управляемых указанными контроллерами.

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

$ watch

- это угловой метод, используемый для грязной проверки. Любая переменная или выражение, назначенное в $ scope, автоматически устанавливает $ watchExpression в angular. Таким образом, присвоение переменной $ scope или использование таких директив, как ng-if, ng-show, ng-repeat и т. Д., Создают часы в области видимости angular автоматически. Angular поддерживает простой массив наблюдателей $$ в объектах $ scope

Различные способы определения наблюдателя в AngularJS.

• явно $ смотреть атрибут в $ области.

  $ scope. $ Watch ('person.username', validateUnique);

• разместить интерполяцию в вашем шаблоне (наблюдатель будет создан для вас в текущей $ scope).
• спросить директива, такая как ng-model, чтобы определить наблюдателя за вас.

$ digest

- это метод angular, который часто вызывается внутри angularjs. В методе $ digest angular перебирает все часы $ в своей области / дочерних областях.

$ apply

- это метод angular, который внутренне вызывает $ digest. Этот метод используется, когда вы хотите указать angular вручную начать грязную проверку (выполнить все $ watch).

$ destroy

является одновременно методом и событием в angularjs. $ destroy (), удаляет область и все ее дочерние элементы из грязной проверки. Событие $ destroy вызывается angular всякий раз, когда уничтожается $ scope или $ controller.

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

В выпуске 1.6 в AngularJS добавлено множество концепций Angular, включая концепцию компонентной архитектуры приложения. В этом выпуске, помимо прочего, была удалена песочница, которая, по мнению многих разработчиков, обеспечивала дополнительную безопасность, несмотря на обнаруженные многочисленные уязвимости, обходившие песочницу. Текущий (по состоянию на март 2020 года) стабильный выпуск AngularJS - 1.7.9

В январе 2018 года был объявлен график поэтапного отказа от AngularJS: после выпуска 1.7.0 активная разработка AngularJS будет продолжаться до 30 июня 2018 г. После этого 1.7 будет поддерживаться до 30 июня 2021 г. в качестве долгосрочной поддержки.

Поддержка устаревших браузеров

AngularJS версии 1.3 и более поздних не поддерживают Internet Explorer. 8 или ранее. Хотя AngularJS 1.2 поддерживает IE8, его команда не поддерживает.

Angular и AngularDart

Последующие версии AngularJS просто называются Angular. Angular - это несовместимая версия AngularJS на основе TypeScript. Angular 4 был анонсирован 13 декабря 2016 года, пропущено 3, чтобы избежать путаницы из-за несоответствия версии пакета маршрутизатора, который уже был распространен как v3.3.0.

AngularDart работает на Dart, который является объектно-ориентированным, определенным классом, языком программирования с одинарным наследованием с использованием синтаксиса стиля C , что отличается от Angular JS (который использует JavaScript ) и Angular 2 / Angular 4 (который использует TypeScript ). Angular 4 выпущен в марте 2017 года, при этом версия фреймворка согласована с номером версии используемого маршрутизатора. Angular 5 был выпущен 1 ноября 2017 года. Ключевые улучшения Angular 5 включают поддержку прогрессивных веб-приложений, оптимизатор сборки и улучшения, связанные с материальным дизайном. Angular 6 был выпущен 3 мая 2018 года, Angular 7 - 18 октября 2018 года, а Angular 8 - 28 мая 2019 года. Angular следует стандартам семантического управления версиями, причем каждый основной номер версии указывает на потенциально критические изменения. Angular обязалась предоставить 6 месяцев активной поддержки для каждой основной версии, а затем 12 месяцев долгосрочной поддержки. Основные выпуски выходят раз в два года, от 1 до 3 второстепенных выпусков для каждого основного выпуска.

Angular Universal

Обычное приложение Angular выполняется в браузере, в то время как Angular Universal генерирует статические страницы приложения на сервере посредством рендеринга на стороне сервера (SSR).

Angular Material

Angular Material - это библиотека компонентов UI, которая реализует Material Design в AngularJS.

В июле 2012 года команда Angular создала расширение для браузера Google Chrome под названием Batarang, которое улучшает процесс отладки для веб-приложения, созданные с помощью Angular. Расширение призвано облегчить обнаружение узких мест в производительности и предлагает графический интерфейс для отладки приложений. Какое-то время в конце 2014 и начале 2015 года расширение не было совместимо с последними выпусками (после v1.2.x) Angular. Последнее обновление этого расширения было 4 апреля 2017 года.

AngularJS устанавливает парадигму цикла дайджеста. Этот цикл можно рассматривать как цикл, во время которого AngularJS проверяет, есть ли какие-либо изменения во всех переменных, наблюдаемых всеми $ scopes. Если $ scope.myVarопределен в контроллере и эта переменная отмечена для просмотра, Angular будет отслеживать изменения myVar на каждой итерации цикла.

Этот подход потенциально приводит к медленному рендерингу, когда AngularJS проверяет слишком много переменных в $ scopeкаждый цикл. Мишко Хевери предлагает держать на любой странице менее 2000 наблюдателей.

• Портал бесплатного программного обеспечения с открытым исходным кодом

• React.js
• Vue.js
• Полимер (библиотека)
• Сравнение фреймворков JavaScript

Викискладе есть материалы, связанные с AngularJS.

• Официальный сайт