История Angular: эволюция или революция?
Angular — это фреймворк, который привносит шаблон проектирования MVW (Model View Whatever) в создание мобильных и настольных веб-приложений.
Прошло семь лет с тех пор, как Google выпустила первую версию Angular в 2010 году. Это много времени в компьютерном мире; в конце концов, в том же году вышел самый первый iPad. Давайте посмотрим, привнесли ли основные версии Angular, выпущенные с тех пор, эволюционные или революционные изменения.
Версия 1: AngularJS и появление одностраничных приложений
Когда Google выпустил AngularJS версии 1, большинство веб-приложений по-прежнему основывались на страницах. С AngularJS люди могли разрабатывать одностраничные приложения по образцу Gmail и Google Docs, позволяя веб-приложениям работать как настольные приложения.
Эта версия фреймворка называлась (и есть) AngularJS. Более поздние версии исключили JS из названия, поскольку оно не ограничивалось JavaScript. Стоит отметить, что AngularJS (основная версия 1) по-прежнему поддерживается; его веб-сайт — https://www.angularjs.org, а более поздние версии — https://angular.io.
Версия 2: Шесть лет на революцию
Версия 2 фреймворка Angular не была выпущена до сентября 2016 года и фактически была полностью переписана. Вот основные отличия между версиями 1 и 2:
1. Версия 2 поддерживает TypeScript, который представляет собой надмножество JavaScript со статическими типами.
2. Он основан на компонентах. Контроллеры и области видимости ушли навсегда, их заменили компоненты и директивы. Думайте о компонентах как о директивах с шаблоном и стилем.
3. Привязки данных теперь определяются с использованием следующего синтаксиса: [(twoWayDataBindingModel)], [oneWayDataBindingFromDataSourceToViewTarget] и (oneWayDataBindingFromViewTargetToDataSource).
4. Angular 2 напрямую использует действительные свойства и события элемента HTML DOM, поэтому многие встроенные директивы версии 1 больше не требуются, включая ng-href, ng-src, ng-show и ng-hide. Angular 2 использует свойства href, src и hidden для получения одного и того же вывода. То же самое касается директив, основанных на событиях, поэтому
атрибут ng-click="doSomething() становится (click)="doSomething().
5. Атрибут ng-app был удален. Единственный способ загрузить приложение — использовать функцию начальной загрузки. Для этого требуется начальный компонент, который также является родительским компонентом приложения.
6. Чтобы упростить использование внедрения зависимостей, вводится аннотация @Injectable для служб.
7. Внесены некоторые изменения в синтаксис: локальные переменные определяются с использованием префикса решетка (#), структурная директива ng-repeat заменена на *ngFor, для встроенных директив используется синтаксис camelCase. Например, ng-class теперь ngClass, а ng-model теперь ngModel.
8. В связи с введением компонентов синтаксис маршрутизации также был изменен.
9. Он поставляется с Angular CLI для ускорения процесса создания нового приложения.
10. И последнее, но не менее важное: тесты показали, что эта версия примерно в 5 раз быстрее, чем ее предшественница.
Где версия 3?
Вы можете спросить себя, почему нет версии 3 Angular. Это связано с тем, что пакет @angular/router был смещен в версии 3, в то время как все остальные пакеты имели версию 2. Поэтому команда Angular решила сразу перевести все пакеты в версию 4, чтобы избежать путаницы.
Что дает версия 4?
В отличие от предыдущей основной версии, эта (выпущенная в марте 2017 года) обратно совместима с версией 2, что означает, что почти весь код, написанный в Angular 2, также действителен в Angular 4. Вот ключевые изменения:
1. Директива *ngIf была расширена соответствующей директивой else для упрощения манипуляций с условными DOM. Например:<div> content here if valid... </div>
<ng-template #elseBlock>other content here if invalid...</ng-template>
2. Встроенная проверка полей ввода электронной почты вместо подверженного ошибкам регулярного выражения.
3. Пакет анимаций вытащен из @angular/core и помещен в отдельный пакет. Это означает, что если вы не используете анимацию, этот дополнительный код не попадет в ваши производственные пакеты.
4. Команда обновила Angular до версии 2.1 TypeScript.
5. Это быстрее и генерирует меньше кода по сравнению с версией 2.
Долгожданная версия 5
Версия 5 была выпущена в ноябре 2017 года, на два месяца позже, чем планировалось изначально. Он приносит много полезных функций, в том числе:
1. Поддержка создания прогрессивных веб-приложений, которые можно кэшировать в браузере.
2. Оптимизатор сборки уменьшает размер приложения, удаляя ненужный код.
3. Компоненты Material Design теперь совместимы с рендерингом на стороне сервера.
Журналы изменений
Полный список функций и исправлений каждой версии Angular, начиная с версии 2, можно найти в журнале изменений по адресу: https://github.com/angular/angular/blob/master/CHANGELOG.md.
Журнал изменений для AngularJS (в настоящее время версия 1.6.7) находится по адресу: https://github.com/angular/angular.js/blob/master/CHANGELOG.md.
Будущие выпуски
По словам команды Angular, каждый год планируется выпускать две новые основные версии. Это означает, что мы можем ожидать новых функций и улучшений на регулярной основе. Будем держать пальцы скрещенными, чтобы новые версии были доступны в соответствии с графиком.
Резюме
Angular — это фреймворк с растущей популярностью и большими перспективами на будущее. Каждая версия приносила что-то новое, некоторые из них были революцией, некоторые просто эволюцией, но мы определенно можем с нетерпением ждать следующих выпусков.
Первоначально опубликовано на сайте blog.montrosesoftware.com 30 ноября 2017 г.
