AngularJS
 | |
| Оригинальный автор(ы) | Форест Хевери |
|---|---|
| Разработчики) | |
| Начальная версия | 20 октября 2010 г [1] |
| Стабильная версия | 1.8.3 [2]  / 7 апреля 2022 г |
| Репозиторий | Репозиторий AngularJS |
| Написано в | JavaScript |
| Платформа | JavaScript-движок |
| Размер | 167 КБ продукция 1,2 МБ разработки |
| Тип | Веб-фреймворк |
| Лицензия | МОЯ лицензия |
| Веб-сайт | 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 включали:
- чтобы отделить манипуляции с DOM от логики приложения. На сложность этого существенно влияет способ структурирования кода.
- отделить клиентскую часть приложения от серверной. Это позволяет работе по разработке развиваться параллельно и позволяет повторно использовать обе стороны.
- обеспечить структуру процесса создания приложения: от проектирования пользовательского интерфейса, написания бизнес-логики и тестирования.
AngularJS реализовал шаблон MVC для разделения компонентов представления, данных и логики. [8] Используя внедрение зависимостей , Angular перенес традиционные серверные сервисы, такие как контроллеры, зависящие от представления, в веб-приложения на стороне клиента. Следовательно, большая часть нагрузки на сервер может быть уменьшена.
Область применения [ править ]
AngularJS использовал термин «область действия», аналогичный основам информатики.
Область действия в информатике описывает, когда в программе определенная привязка действительна . Спецификация ECMA-262 определяет область действия как: лексическую среду, в которой объект Function выполняется в веб-скриптах на стороне клиента; [9] аналогично тому, как определяется область видимости в лямбда-исчислении . [10]
Как часть архитектуры «MVC», область видимости образует «Модель», и все переменные, определенные в области видимости, доступны как из «Представления», так и из «Контроллера». Область действия ведет себя как связующее звено и связывает «Вид» и «Контроллер».
Бутстрап [ править ]
Задача, выполняемая загрузчиком AngularJS , выполнялась в три этапа. [11] после загрузки DOM:
- Создание нового инжектора
- Компиляция директив, украшающих DOM
- Связывание всех директив с областью действия
Директивы AngularJS позволяли разработчику указывать пользовательские и повторно используемые HTML-подобные элементы и атрибуты, которые определяют привязки данных и поведение компонентов представления. Некоторые из наиболее часто используемых директив:
ng-animate- Модуль обеспечивает поддержку JavaScript, переходов CSS3 и анимаций ключевых кадров CSS3 в рамках существующих основных и пользовательских директив.
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 перед рендерингом шаблонов, управляемых указанными контроллерами.
С ng-* атрибуты недопустимы в спецификациях HTML, data-ng-*также может использоваться в качестве префикса. Например, оба ng-app и data-ng-app действительны в AngularJS.
Двусторонняя привязка данных [ править ]
Двусторонняя привязка данных AngularJS имела свою наиболее примечательную особенность, которая в значительной степени освобождала серверную часть от обязанностей по шаблонированию. Вместо этого шаблоны отображались в простом HTML в соответствии с данными, содержащимися в области, определенной в модели. $scopeСервис в Angular обнаружил изменения в разделе модели и измененные HTML-выражения в представлении через контроллер. Аналогично, любые изменения вида отражались в модели. Это избавило от необходимости активно манипулировать DOM и способствовало начальной загрузке и быстрому созданию прототипов веб-приложений. [13]
AngularJS обнаруживал изменения в моделях путем сравнения текущих значений со значениями, сохраненными ранее в процессе грязной проверки, в отличие от Ember.js и Backbone.js , которые запускали прослушиватели при изменении значений модели. [14]
$watch- — угловой метод, используемый для грязной проверки. Любая переменная или выражение, назначенное в $scope, автоматически устанавливает $watchExpression в angular. Поэтому присвоение переменной $scope или используя такие директивы, как ng-if, ng-show, ng-repeat и т. д. все автоматически создают часы в области angular. Angular поддерживает простой массив $$наблюдатели в $область объектов
- Различные способы определения наблюдателя в AngularJS.
- явно $смотреть атрибут $ область действия .
$scope.$watch('person.username', validateUnique);
- поместите интерполяцию в свой шаблон (для вас будет создан наблюдатель в текущей области $).
- задайте такую директиву, как ng-model , чтобы определить для вас наблюдателя.
<input ng-model="person.username" />
- явно $смотреть атрибут $ область действия .
$digest- — это угловой метод, который вызывается внутри angularjs через частые промежутки времени. В Метод $digest , angular перебирает все $watches в своей области/дочерних областях.
$apply- это угловой метод, который внутренне вызывает $ дайджест . Этот метод используется, когда вы хотите указать Angular вручную начать грязную проверку (выполнить все $часы )
$destroy- это одновременно метод и событие в angularjs. $destroy() удаляет область и все ее дочерние элементы из грязной проверки. Событие $destroy вызывается angular всякий раз, когда уничтожается $scope или $controller.
История развития [ править ]
AngularJS был первоначально разработан в 2009 году Мишко Хевери. [15] в ООО Брат Тех [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 Universal [ править ]
Обычное приложение Angular выполняется в браузере, а Angular Universal генерирует статические страницы приложения на сервере посредством рендеринга на стороне сервера (SSR). [28]
Библиотеки [ править ]
Материал AngularJS [ править ]
![[икона]](/wiki/File:Wiki_letter_w_cropped.svg){kind=small} | Этот раздел нуждается в расширении . Вы можете помочь, дополнив это . ( август 2019 г. ) |
Материал AngularJS [29] [30] — это библиотека компонентов пользовательского интерфейса , реализующая Material Design в AngularJS. [31] Библиотека предоставила набор повторно используемых, хорошо протестированных и доступных компонентов пользовательского интерфейса . В январе 2022 года библиотека была закрыта, о чем сообщается на ее официальном сайте. [32] Библиотека материалов AngularJS — это зрелый и стабильный продукт, готовый к использованию в производстве и работающий только с AngularJS 1.x. Библиотека Angular Material доступна в репозитории 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]
См. также [ править ]
Ссылки [ править ]
- ^ «Релизы · angular/angular.js» . Гитхаб . Проверено 9 апреля 2021 г.
- ^ «Выпуск 1.8.3» . 7 апреля 2022 г. Проверено 29 июля 2022 г.
- ^ «АнгулярДжС» . docs.angularjs.org . Проверено 14 мая 2021 г.
- ^ Перейти обратно: а б «АнгулярДжС» . docs.angularjs.org . Проверено 9 апреля 2021 г.
- ^ Перейти обратно: а б Дарвин, Пит Бэкон (27 июля 2020 г.). «Стабильный AngularJS и долгосрочная поддержка» . Угловой блог . Проверено 9 апреля 2021 г.
- ^ Техсон, Марк (2 февраля 2021 г.). «В поисках пути вперед с помощью AngularJs» . Середина . Проверено 9 апреля 2021 г.
- ^ «Что такое угловой?» . Проверено 12 февраля 2013 г.
- ^ «АнгулярДжС» . docs.angularjs.org . Проверено 9 апреля 2021 г.
- ^ «Аннотированный ECMAScript 5.1, раздел 10.2 Лексические среды» . Проверено 03 января 2015 г.
- ^ Барендрегт, Хенк; Барендсен, Эрик (март 2000 г.), Введение в лямбда-исчисление (PDF)
- ^ «Написание директив» . angularjs.org. 28 ноября 2012 года . Проверено 21 июля 2013 г.
- ^ «АнгулярДжС» . docs.angularjs.org . Проверено 9 апреля 2021 г.
- ^ «5 замечательных функций AngularJS» . Проверено 13 февраля 2013 г.
- ^ Перейти обратно: а б Хевери, Миско. «Привязка данных в angularjs» . Проверено 9 марта 2014 г.
- ^ «Привет, мир, <angular/> здесь» . Проверено 12 октября 2014 г.
- ^ Перейти обратно: а б «Получить Ангуляр» . Angular / BRAT Tech. ООО. Архивировано из оригинала 13 апреля 2010 г. Проверено 12 октября 2014 г.
- ^ «AngularJS: Руководство разработчика для версии 1.5.8: Компоненты» . Проверено 26 сентября 2017 г.
- ^ "угловой.js" . Гитхаб . Проверено 26 сентября 2017 г.
- ^ «Выпуск v1.8.3 · angular/angular.js» . Гитхаб . Проверено 29 ноября 2023 г.
- ^ «Совместимость Internet Explorer» . Руководство разработчика Angular JS 1.7.7 . Проверено 12 февраля 2019 г.
В AngularJS 1.3 прекращена поддержка IE8. Подробнее об этом читайте в нашем блоге. AngularJS 1.2 продолжит поддерживать IE8, но основная команда не планирует тратить время на решение проблем, характерных для IE8 или более ранних версий.
- ^ Минар, Игорь. «AngularJS 1.3: приближается новый релиз» . Блог AngularJS . Архивировано из оригинала 13 октября 2014 г. Проверено 12 октября 2014 г.
- ^ «Введение в Angular» . Проверено 8 декабря 2021 г.
- ^ «Хорошо… позвольте мне объяснить: это будет Angular 4.0» . angularjs.blogspot.kr . Архивировано из оригинала 13 декабря 2016 г. Проверено 14 декабря 2016 г.
- ^ Флюин, Стивен (26 апреля 2018 г.). «Доступна версия Angular 5.0.0» . Середина . Проверено 9 апреля 2021 г.
- ^ Крил, Пол (18 сентября 2017 г.). «Выпуск JavaScript-фреймворка AngularJS 5 задерживается» . Инфомир . Проверено 9 апреля 2021 г.
- ^ Флюин, Стивен (3 мая 2018 г.). «Версия 6 Angular уже доступна — блог Angular» . Угловой блог . Проверено 8 июня 2018 г.
- ^ «Версии и выпуски Angular» . angular.io . Проверено 8 июня 2018 г.
- ^ Пешак, Марк (7 января 2020 г.). «Углубленный обзор универсального и серверного рендеринга Angular» . Середина . Проверено 9 апреля 2021 г.
- ^ «угловой/материал (GitHub)» . Гитхаб . Проверено 24 декабря 2020 г.
- ^ «Документация по материалам AngularJS» . Проверено 24 декабря 2020 г.
- ^ Котару, В. Кирти (25 августа 2016 г.). Реализация Material Design с помощью AngularJS: платформа компонентов пользовательского интерфейса . Апресс. п. 4. ISBN 9781484221907 .
- ^ «Материал AngularJS» . материал.angularjs.org . Проверено 4 мая 2022 г.
- ^ «angular/angularjs-batarang (GitHub)» . Гитхаб . Проверено 12 октября 2014 г.
- ^ Форд, Брайан. «Представляем AngularJS Бэтаранг» . Блог AngularJS . Архивировано из оригинала 13 октября 2014 г. Проверено 12 октября 2014 г.
- ^ «Расширение batarang Chrome для AngularJS кажется неработающим» .
Дальнейшее чтение [ править ]
- Грин, Брэд; Сешадри, Шьям (22 марта 2013 г.). AngularJS (1-е изд.). О'Рейли Медиа . п. 150. ИСБН 978-1449344856 .
- Козловский, Павел; Дарвин, Питер Бэкон (23 августа 2013 г.). Освоение разработки веб-приложений с помощью AngularJS (1-е изд.). Пакт Паблишинг . п. 372. ИСБН 978-1782161820 .
- Рюббельке, Лукас (1 января 2015 г.). AngularJS в действии (1-е изд.). Публикации Мэннинга . п. 325. ИСБН 978-1617291333 .
Внешние ссылки [ править ]
| Базы данных органов управления : Национальные |
|---|