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 уменьшил акцент на явном манипулировании объектной моделью документа (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-*атрибуты недопустимы в спецификациях HTML, их data-ng-*также можно использовать в качестве префикса. Например, оба ng-appи data-ng-appдействительны в AngularJS.

ng-app
Объявляет корневой элемент приложения AngularJS, в котором можно использовать директивы для объявления привязок и определения поведения.
ng-aria
Модуль поддержки доступности общих атрибутов ARIA .
ng-bind
Устанавливает текст элемента DOM в значение выражения. Например, <span ng-bind="name"></span>отображает значение name внутри элемента span. Любое изменение переменной «имя» в области приложения мгновенно отражается в 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 перед отрисовкой шаблонов, управляемых указанными контроллерами.

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

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

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

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

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

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

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

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

Версии AngularJS 1.3 и более поздние не поддерживали 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] — это библиотека компонентов пользовательского интерфейса , реализующая дизайн материалов в AngularJS. [31] Библиотека предоставила набор повторно используемых, хорошо протестированных и доступных компонентов пользовательского интерфейса . В январе 2022 года библиотека была закрыта, о чем сообщается на ее официальном сайте. [32] Библиотека материалов AngularJS — это зрелый и стабильный продукт, готовый к промышленному использованию и работающий только с AngularJS 1.x. Библиотека материалов Angular доступна в репозитории angular/material2 GitHub.

Расширение Chrome

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

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

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

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

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

Рекомендации

  1. ^ «Релизы · angular/angular.js» . Гитхаб . Проверено 9 апреля 2021 г.
  2. ^ «Выпуск 1.8.3» . 7 апреля 2022 г. Проверено 29 июля 2022 г.
  3. ^ "УгловойJS". docs.angularjs.org . Проверено 14 мая 2021 г.
  4. ^ аб "AngularJS". docs.angularjs.org . Проверено 9 апреля 2021 г.
  5. ^ Аб Дарвин, Пит Бэкон (27 июля 2020 г.). «Стабильный AngularJS и долгосрочная поддержка». Угловой блог . Проверено 9 апреля 2021 г.
  6. ↑ Техсон, Марк (2 февраля 2021 г.). «В поисках пути вперед с помощью AngularJs». Середина . Проверено 9 апреля 2021 г.
  7. ^ "Что такое Angular?" . Проверено 12 февраля 2013 г.
  8. ^ "УгловойJS". docs.angularjs.org . Проверено 9 апреля 2021 г.
  9. ^ «Аннотированный ECMAScript 5.1, раздел 10.2 Лексические среды» . Проверено 03 января 2015 г.
  10. ^ Барендрегт, Хенк; Барендсен, Эрик (март 2000 г.), Введение в лямбда-исчисление (PDF)
  11. ^ «Написание директив». angularjs.org. 28 ноября 2012 года . Проверено 21 июля 2013 г.
  12. ^ "УгловойJS". docs.angularjs.org . Проверено 9 апреля 2021 г.
  13. ^ «5 потрясающих функций AngularJS» . Проверено 13 февраля 2013 г.
  14. ^ аб Хевери, Миско. «Привязка данных в angularjs» . Проверено 9 марта 2014 г.
  15. ^ «Привет, мир, <angular/> здесь» . Проверено 12 октября 2014 г.
  16. ^ аб "GetAngular". Angular / BRAT Tech. ООО. Архивировано из оригинала 13 апреля 2010 г. Проверено 12 октября 2014 г.
  17. ^ «AngularJS: Руководство разработчика для версии 1.5.8: Компоненты» . Проверено 26 сентября 2017 г.
  18. ^ "angular.js". Гитхаб . Проверено 26 сентября 2017 г.
  19. ^ «Выпуск v1.8.3 · angular/angular.js» . Гитхаб . Проверено 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 . Архивировано из оригинала 13 октября 2014 г. Проверено 12 октября 2014 г.
  22. ^ «Введение в Angular» . Проверено 8 декабря 2021 г.
  23. ^ «Хорошо... позвольте мне объяснить: это будет Angular 4.0». angularjs.blogspot.kr . Архивировано из оригинала 13 декабря 2016 г. Проверено 14 декабря 2016 г.
  24. ↑ Флюин, Стивен (26 апреля 2018 г.). «Доступна версия Angular 5.0.0». Середина . Проверено 9 апреля 2021 г.
  25. ^ Криль, Пол (18 сентября 2017 г.). «Выпуск JavaScript-фреймворка AngularJS 5 задерживается». Инфомир . Проверено 9 апреля 2021 г.
  26. ^ Флюин, Стивен (3 мая 2018 г.). «Теперь доступна версия 6 Angular - блог Angular» . Угловой блог . Проверено 8 июня 2018 г.
  27. ^ «Версии и выпуски Angular». angular.io . Проверено 8 июня 2018 г.
  28. ↑ Пишак, Марк (7 января 2020 г.). «Углубленный обзор универсального рендеринга и серверного рендеринга». Середина . Проверено 9 апреля 2021 г.
  29. ^ «Угловой/материал (GitHub)». Гитхаб . Проверено 24 декабря 2020 г.
  30. ^ «Документация по материалам AngularJS» . Проверено 24 декабря 2020 г.
  31. ^ Котару, В. Кирти (25 августа 2016 г.). Реализация Material Design с помощью AngularJS: платформа компонентов пользовательского интерфейса. Апресс. п. 4. ISBN 9781484221907.
  32. ^ «Материал AngularJS». материал.angularjs.org . Проверено 4 мая 2022 г.
  33. ^ "angular/angularjs-batarang (GitHub)". Гитхаб . Проверено 12 октября 2014 г.
  34. ^ Форд, Брайан. «Представляем AngularJS Batarang». Блог AngularJS . Архивировано из оригинала 13 октября 2014 г. Проверено 12 октября 2014 г.
  35. ^ «Расширение batarang Chrome для AngularJS кажется неработающим» .

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

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

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