stringtranslate.com

AngularJS

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

AngularJS использовался в качестве интерфейса стека MEAN , который состоял из базы данных MongoDB , фреймворка сервера веб-приложений Express.js , самого AngularJS (или Angular ) и среды выполнения сервера Node.js.

С 1 января 2022 года Google больше не обновляет AngularJS для исправления проблем безопасности, совместимости с браузерами или jQuery . [3] [4] [5] Команда Angular рекомендует обновиться до Angular (v2+) как лучший путь вперед, но они также предоставили несколько других вариантов. [6]

Обзор

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

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

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

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

Объем

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

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

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

Бутстрап

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

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

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

ng-animate
Модуль обеспечивает поддержку JavaScript, переходов CSS3 и анимации ключевых кадров CSS3 в существующих основных и пользовательских директивах.
ng-app
Объявляет корневой элемент приложения AngularJS, в котором директивы могут использоваться для объявления привязок и определения поведения.
ng-aria
Модуль для поддержки доступности общих атрибутов ARIA .
ng-bind
Устанавливает текст элемента DOM в значение выражения. Например, <span ng-bind="name"></span>отображает значение 'name' внутри элемента span. Любое изменение переменной 'name' в области действия приложения мгновенно отражается в DOM.
ng-class
Условно применить класс в зависимости от значения логического выражения.
ng-controller
Указывает класс контроллера JavaScript, который оценивает выражения HTML.
ng-if
Базовая директива оператора if, которая создает следующий элемент, если условия истинны. Если условие ложно, элемент удаляется из DOM. Если истинно, клон скомпилированного элемента вставляется повторно.
ng-init
Вызывается один раз при инициализации элемента.
ng-model
Аналогично ng-bind, но устанавливает двустороннюю привязку данных между представлением и областью действия.
ng-model-options
Обеспечивает настройку способа обновления модели.
ng-repeat
Создавайте экземпляр элемента один раз для каждого элемента коллекции.
ng-show&ng-hide
Условно показывать или скрывать элемент в зависимости от значения логического выражения. Показывать и скрывать можно, устанавливая стиль отображения CSS.
ng-switch
Условно создайте один шаблон из набора вариантов в зависимости от значения выражения выбора.
ng-view
Базовая директива, отвечающая за обработку маршрутов [12] , которые разрешают JSON перед рендерингом шаблонов, управляемых указанными контроллерами.

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

Двусторонняя привязка данных

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

$watch
метод Angular, используемый для грязной проверки. Любая переменная или выражение, назначенные в $scope, автоматически устанавливает $watchExpression в Angular. Таким образом, назначение переменной в $scope или использование директив вроде ng-if, ng-show, ng-repeat и т. д. автоматически создают наблюдения в области видимости Angular. Angular поддерживает простой массив $$watchers в объектах $scope
Различные способы определения наблюдателя в AngularJS.
  • явно $watch атрибут в $scope .
    $scope.$watch('person.username', validateUnique);
  • поместите интерполяцию в свой шаблон (для вас будет создан наблюдатель в текущей области действия $scope).
  • попросите директиву, например ng-model, определить для вас наблюдателя.
    <input ng-model="person.username" />
$digest
является методом angular, который вызывается внутри angularjs через частые интервалы. В методе $digest angular перебирает все $watches в своей области видимости/дочерних областях видимости.
$apply
это метод Angular, который внутренне вызывает $digest . Этот метод используется, когда вы хотите вручную указать Angular начать грязную проверку (выполнить все $watches )
$destroy
является одновременно методом и событием в angularjs. Метод $destroy() удаляет область видимости и все ее дочерние элементы из грязной проверки. Событие $destroy вызывается angular всякий раз, когда уничтожается $scope или $controller.

История развития

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

Выпуск 1.6 добавил многие концепции Angular в AngularJS, включая концепцию компонентной архитектуры приложений. [17] В этом выпуске, среди прочего, была удалена Sandbox, которая, по мнению многих разработчиков, обеспечивала дополнительную безопасность, несмотря на многочисленные обнаруженные уязвимости, которые обходили sandbox. [18] Текущая (по состоянию на ноябрь 2023 года) стабильная версия AngularJS — 1.8.3 [19]

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

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

Версии 1.3 и более поздние версии AngularJS не поддерживали Internet Explorer 8 или более ранние версии. Хотя AngularJS 1.2 поддерживал IE8, его команда этого не делает. [20] [21]

Angular и AngularDart

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

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

Угловой Универсальный

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

Библиотеки

Материал AngularJS

AngularJS Material [29] [30] — библиотека компонентов пользовательского интерфейса , которая реализовала Material Design в AngularJS. [31] Библиотека предоставляла набор повторно используемых, хорошо протестированных и доступных компонентов пользовательского интерфейса . В январе 2022 года библиотека была закрыта, о чем было объявлено на ее официальном сайте. [32] Библиотека AngularJS Material — это зрелый и стабильный продукт, готовый к использованию в производстве и работающий только с AngularJS 1.x. Библиотека Angular Material доступна в репозитории angular/material2 GitHub.

Расширение Chrome

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

Производительность

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

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

Смотрите также

Ссылки

  1. ^ "Выпуски · angular/angular.js". GitHub . Получено 9 апреля 2021 г. .
  2. ^ "Release 1.8.3". 7 апреля 2022 г. Получено 29 июля 2022 г.
  3. ^ "AngularJS". docs.angularjs.org . Получено 2021-05-14 .
  4. ^ ab "AngularJS". docs.angularjs.org . Получено 9 апреля 2021 г. .
  5. ^ ab Darwin, Pete Bacon (27 июля 2020 г.). "Стабильный AngularJS и долгосрочная поддержка". Блог Angular . Получено 9 апреля 2021 г.
  6. ^ Techson, Mark (2 февраля 2021 г.). «Finding a Path Forward with AngularJs». Medium . Получено 9 апреля 2021 г. .
  7. ^ "Что такое Angular?" . Получено 12 февраля 2013 г. .
  8. ^ "AngularJS". docs.angularjs.org . Получено 9 апреля 2021 г. .
  9. ^ "Аннотированный ECMAScript 5.1, Раздел 10.2 Лексические среды" . Получено 2015-01-03 .
  10. ^ Барендрегт, Хенк; Барендсен, Эрик (март 2000 г.), Введение в лямбда-исчисление (PDF)
  11. ^ "Письменные директивы". angularjs.org. 28 ноября 2012 г. Получено 21 июля 2013 г.
  12. ^ "AngularJS". docs.angularjs.org . Получено 9 апреля 2021 г. .
  13. ^ "5 потрясающих функций AngularJS" . Получено 13 февраля 2013 г.
  14. ^ ab Hevery, Misko. "Databinding in angularjs" . Получено 2014-03-09 .
  15. ^ "Привет, мир, <angular/> здесь" . Получено 2014-10-12 .
  16. ^ ab "GetAngular". Angular / BRAT Tech. LLC. Архивировано из оригинала 2010-04-13 . Получено 2014-10-12 .
  17. ^ "AngularJS: Руководство разработчика для v1.5.8: Компоненты" . Получено 2017-09-26 .
  18. ^ "angular.js". GitHub . Получено 2017-09-26 .
  19. ^ "Release v1.8.3 · angular/angular.js". GitHub . Получено 29 ноября 2023 г. .
  20. ^ "Совместимость с Internet Explorer". Руководство разработчика Angular JS 1.7.7 . Получено 12 февраля 2019 г. AngularJS 1.3 прекратил поддержку IE8. Подробнее об этом читайте в нашем блоге. AngularJS 1.2 продолжит поддерживать IE8, но основная команда не планирует тратить время на решение проблем, специфичных для IE8 или более ранних версий.
  21. ^ Минар, Игорь. "AngularJS 1.3: приближается новый релиз". Блог AngularJS . Архивировано из оригинала 2014-10-13 . Получено 2014-10-12 .
  22. ^ "Введение в Angular" . Получено 2021-12-08 .
  23. ^ "Хорошо... позвольте мне объяснить: это будет Angular 4.0". angularjs.blogspot.kr . Архивировано из оригинала 2016-12-13 . Получено 2016-12-14 .
  24. ^ Fluin, Stephen (26 апреля 2018 г.). «Версия 5.0.0 Angular уже доступна». Medium . Получено 9 апреля 2021 г. .
  25. ^ Крилл, Пол (18 сентября 2017 г.). «AngularJS 5 JavaScript framework отложен». InfoWorld . Получено 9 апреля 2021 г. .
  26. ^ Fluin, Stephen (3 мая 2018 г.). «Версия 6 Angular уже доступна – блог Angular». Блог Angular . Получено 8 июня 2018 г.
  27. ^ "Версии и релизы Angular". angular.io . Получено 8 июня 2018 г. .
  28. ^ Pieszak, Mark (7 января 2020 г.). "Angular Universal & Server-side rendering Deep-Dive". Medium . Получено 9 апреля 2021 г. .
  29. ^ "angular/material (GitHub)". GitHub . Получено 2020-12-24 .
  30. ^ "AngularJS Material Documentation" . Получено 2020-12-24 .
  31. ^ Котару, В. Кирти (25 августа 2016 г.). Реализация Material Design с помощью AngularJS: платформа компонентов пользовательского интерфейса. Апресс. п. 4. ISBN 9781484221907.
  32. ^ "AngularJS Material". material.angularjs.org . Получено 2022-05-04 .
  33. ^ "angular/angularjs-batarang (GitHub)". GitHub . Получено 2014-10-12 .
  34. ^ Форд, Брайан. "Введение в AngularJS Batarang". Блог AngularJS . Архивировано из оригинала 2014-10-13 . Получено 2014-10-12 .
  35. ^ "Расширение Chrome batarang для AngularJS, похоже, сломано". Stack Overflow .

Дальнейшее чтение

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

На Викискладе есть медиафайлы по теме AngularJS .