Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
Эта статья про первую версию фреймворка Angular. Для версий 2 и более поздних см. Angular (веб-платформа) .
AngularJS
AngularJS logo.svg
Разработчики)Google
изначальный выпуск20 октября 2010 г . ; 10 лет назад [1] ( 2010-10-20 )
Стабильный выпуск
1.8.2 / 21 октября 2020 г . ; 3 месяца назад [2] ( 2020-10-21 )
РепозиторийРепозиторий 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 года. После этой даты Google больше не будет обновлять AngularJS, и вместо этого предлагается Angular (2.0+) . [3] [4]

Обзор [ править ]

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

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

Цели дизайна AngularJS включают:

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

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

Сфера [ править ]

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

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

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

Bootstrap [ править ]

Задача, выполняемая загрузчиком AngularJS, выполняется в три этапа [9] после загрузки 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. Если true, клон скомпилированного элемента вставляется повторно.
ng-init
Вызывается один раз при инициализации элемента.
ng-model
Аналогично ng-bind, но устанавливает двустороннюю привязку данных между представлением и областью.
ng-model-options
Обеспечивает настройку того, как обновляются модели.
ng-repeat
Создайте экземпляр элемента один раз для каждого элемента из коллекции.
ng-show & ng-hide
Условно показать или скрыть элемент в зависимости от значения логического выражения. Отображение и скрытие достигается установкой стиля отображения CSS.
ng-switch
Условно создайте экземпляр одного шаблона из набора вариантов в зависимости от значения выражения выбора.
ng-view
Базовая директива, отвечающая за обработку маршрутов [10], которые разрешают JSON перед отображением шаблонов, управляемых указанными контроллерами.

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

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

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

История развития [ править ]

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

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

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

Поддержка устаревшего браузера [ править ]

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

Angular и AngularDart [ править ]

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

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

Angular Universal [ править ]

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

Библиотеки [ править ]

AngularJS Material [ править ]

AngularJS Material [27] [28] - это библиотека компонентов пользовательского интерфейса, которая реализует Material Design в AngularJS. [29] Библиотека предоставляет набор повторно используемых, хорошо протестированных и доступных компонентов пользовательского интерфейса .

Расширение Chrome [ править ]

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

Производительность [ править ]

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

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

См. Также [ править ]

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

Ссылки [ править ]

  1. ^ Самые ранние известные выпуски
  2. ^ «Релизы» . GitHub .
  3. ^ https://docs.angularjs.org/misc/version-support-status
  4. ^ https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c
  5. ^ "Что такое Angular?" . Проверено 12 февраля 2013 года .
  6. ^ Понимание компонентов
  7. ^ "Аннотированный ECMAScript 5.1, раздел 10.2 Лексические среды" . Проверено 3 января 2015 .
  8. ^ Barendregt, Хенк; Барендсен, Эрик (март 2000 г.), Введение в лямбда-исчисление (PDF)
  9. ^ «Написание директив» . angularjs.org. 28 ноября 2012 . Проверено 21 июля 2013 .
  10. ^ Компонентный маршрутизатор
  11. ^ «5 потрясающих возможностей AngularJS» . Проверено 13 февраля 2013 года .
  12. ^ a b Миско Хевери. «Привязка данных в angularjs» . Проверено 9 марта 2014 .
  13. ^ "Привет, мир, <angular /> здесь" . Проверено 12 октября 2014 .
  14. ^ a b "GetAngular" . Угловой / BRAT Tech. ООО. Архивировано из оригинала на 2010-04-13 . Проверено 12 октября 2014 .
  15. ^ "AngularJS: Руководство разработчика для v1.5.8: Компоненты" . Проверено 26 сентября 2017 .
  16. ^ "angular.js / CHANGELOG.md" . GitHub . Проверено 26 сентября 2017 .
  17. ^ «Github Release 1.7.9» .
  18. ^ «Стабильный AngularJS и долгосрочная поддержка» . Блог Angular . 2018-01-26 . Проверено 16 марта 2018 .
  19. ^ «Совместимость с Internet Explorer» . Руководство разработчика Angular JS 1.7.7 . Проверено 12 фев 2019 . AngularJS 1.3 отказался от поддержки IE8. Подробнее об этом читайте в нашем блоге. AngularJS 1.2 продолжит поддерживать IE8, но основная команда не планирует тратить время на решение проблем, характерных для IE8 или более ранних версий.
  20. ↑ Минар, Игорь. «AngularJS 1.3: приближается новый релиз» . Блог AngularJS . Проверено 12 октября 2014 .
  21. ^ "Хорошо ... позвольте мне объяснить: это будет Angular 4.0" . angularjs.blogspot.kr . Проверено 14 декабря 2016 .
  22. ^ https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced
  23. ^ "Angular 5 JavaScript framework отложен" .
  24. ^ Fluin, Стивен (3 мая 2018). «Версия 6 Angular уже доступна - блог Angular» . Блог Angular . Проверено 8 июня 2018 .
  25. ^ "Angular версионирование и выпуски" . angular.io . Проверено 8 июня 2018 .
  26. ^ «Динамический SSR и статический предварительный рендеринг» .
  27. ^ "угловой / материал (GitHub)" . Проверено 24 декабря 2020 .
  28. ^ "Документация по материалам AngularJS" . Проверено 24 декабря 2020 .
  29. ^ Kotaru, В. Keerti (2016-08-25). Реализация материального дизайна с помощью AngularJS: UI Component Framework . Апресс. п. 4. ISBN 9781484221907.
  30. ^ "angular / angularjs-batarang (GitHub)" . Проверено 12 октября 2014 .
  31. ^ Форд, Брайан. «Представляем AngularJS Batarang» . Блог AngularJS . Проверено 12 октября 2014 .
  32. ^ "Расширение batarang Chrome для AngularJS кажется сломанным" .

Дальнейшее чтение [ править ]

  • Грин, Брэд; Сешадри, Шьям (22 марта 2013 г.). AngularJS (1-е изд.). O'Reilly Media . п. 150. ISBN 978-1449344856.
  • Козловский, Павел; Дарвин, Питер Бэкон (23 августа 2013 г.). Освоение разработки веб-приложений с помощью AngularJS (1-е изд.). Packt Publishing . п. 372. ISBN. 978-1782161820.
  • Руббельке, Лукас (1 января 2015 г.). AngularJS в действии (1-е изд.). Публикации Мэннинга . п. 325. ISBN 978-1617291333.

Внешние ссылки [ править ]

  • Официальный веб-сайт