Что нового в Angular 4?
Наконец, когда обновленная технология предстала перед нами, мы можем приступить к ее изучению!
То, что новый представитель семейства Angular приобрел новый номер, свидетельствует об инновационных изменениях. Но все же встает вопрос: почему Angular 4, а не 3? Все достаточно просто: так как пакет маршрутизатора был уже представлен в версии 3.x, вместо того, чтобы вносить все нововведения в версию 3.0, а маршрутизатор перенести в 4.0, разработчик решил объединить все в версии 4.0.
Не стоит волноваться касательно обновления Ваших приложений к новой версии Angular: так как тех самых инновационных изменений в принципе оказалось не слишком много, процесс установки не занял больше нескольких минут. Ничего особо страшного.
Среди дополнительных требований стоит упомянуть версию TypeScript 2.1 или выше (раньше требовалась только 1.8+). К тому же некоторые элементы интерфейса были изменены или вовсе упрощены (редко используемые OpaqueTolen или SimpleChange).
Плюс, TypeScript 2.1 и 2.2 приобрел целый ряд прекрасных особенностей, которые теперь поддерживаются в Angular 4. К примеру, в скором времени Вы сможете использовать TypeScript-опцию stringNullChecks.
Итак, что именно позволяет нам новая версия Angular? Давайте углубимся!
Ahead of Time (AoT) компиляция: обновленный движок представлений
Пожалуй, это наиболее значимое изменение, пусть даже Вы, как разработчик, не ощутите разницы.
Как Вы, наверно, знаете, в режиме AoT Angular компилирует Ваши шаблоны во время сборки, после чего генерирует JavaScript код (в отличие от режима Just in Time, когда компиляция происходит во время выполнения приложения).
Режим AoT обладает целым рядом преимуществ, например, в случае неправильного построения шаблона ошибка возникнет во время сборки, а не во время работы приложения, как раньше. Эта методика позволяет ускорить запуск приложения, так как генерация JS-кода уже произведена. Также Вам не нужно отправлять Angular-компиляторы пользователям, что в теории должно уменьшить размер пакетов. Почему в теории? Потому что, как правило, обратная сторона медали в том, что сгенерированный JavaScript-код обычно больше, чем нескомпилированные HTML-шаблоны. Таким образом, в большинстве приложений с использованием AoT размер пакета де-факто увеличивается.
Разработчики Angular хорошо поработали над новым движком представлений, что позволило производить меньше кода при использовании Ahead of Time компиляции. Эффект на больших приложениях не заставил себя ждать. Без падений производительности.
Ежели говорить в цифрах, размер пакета стал:
- С 499 КБ до 187 КБ (или с 68 КБ до 34 КБ после gzip)
- С 192 КБ до 82 КБ (или с 27 КБ до 16 КБ после gzip)
Достаточно большая разница!
Интересно отметить, что в своих дизайн-документах команда Angular сравнивает производительность (как в контексте времени выполнения, так и в контексте нагрузки на память) с базовой имплементацией (лучшим «дефолтным» кодом JS, который они только могут написать) Angular 2.x и InfernoJS (быстрая React-подобная имплементация).
Универсальность
Масса работы была проделана над универсальным проектом, позволяющим производить серверный рендеринг. Когда раньше этот тип проекта поддерживался в основном силами сообщества, теперь, начиная с Angular 4, поддержка приобрела официальный характер.
Анимации
Анимации теперь обзавелись собственным пакетом @angular/platform-browser/animations (одна из вещей, которая может быть изменена в процессе обновления). Что это значит? Это значит, что Вам больше не нужно нагружать пакеты ненужным кодом, если вы не используете анимации.
Шаблоны
ng-template вместо template
Тэг template устарел. Вместо него используйте ng-template. Хотя и первый вариант все еще работает. Вообще, было немного странно использовать template, так как это реально существующий HTML-тэг. Теперь же Angular обзавелась собственным ng-template. В случае, если вы используете устаревший template, будет выдано соответствующее предупреждение: это в значительной мере упростит обнаружение подобного кода в проектах.
Else
С новой версией Angular 4 появилась возможность использовать оператор else:
<div *ngIf="races.length > 0; else empty"><h2>Races</h2></div>
<ng-template #empty><h2>No races.</h2></ng-template>As
Еще одно синтаксическое нововведение. Ключевое слово as позволяет упростить синтаксис let. As позволяет хранить результат переменной шаблона для дальнейшего использование в элементе.
К примеру, сия особенность может быть достаточно полезной для хранения коллекции:
<div *ngFor="let pony of ponies | slice:0:2 as total; index as i">
{{i+1}}/{{total.length}}: {{pony.name}}
</div>Или даже более полезной, если один раз использовать pipe с async. Вместо плохого и некрасивого:
<div>
<h2>{{ (race | async)?.name }}</h2>
<small>{{ (race | async)?.date }}</small>
</div>Вы можете использовать:
<div *ngIf="race | async as raceModel">
<h2>{{ raceModel.name }}</h2>
<small>{{ raceModel.date }}</small>
</div>Видео курсы по схожей тематике:
Различные виды pipe
Titlecase
Angular 4 презентует новый pipe: titlecase. Он позволяет переводить первую букву каждого слова в верхний регистр:
<p>{{ 'ninja squad' | titlecase }}</p>
<!-- will display 'Ninja Squad' -->Http
Задание параметров поиска Http-запроса было упрощено:
http.get(`${baseUrl}/api/races`, { params: { sort: 'ascending' } });Раньше вам необходимо было произвести следующее:
const params= new URLSearchParams();
params.append('sort', 'ascending');
http.get(`${baseUrl}/api/races`, { search: params });Test
Переопределение шаблона во время теста также было упрощено:
TestBed.overrideTemplate(RaceComponent, '<h2>{{race.name}}</h2>');До этого мы обычно писали так:
TestBed.overrideComponent(RaceComponent, {
set: { template: '<h2>{{race.name}}</h2>' }
});Сервисы
Meta
Для получения содержимого или обновления meta-тэгов был введен новый сервис:
@Component({
selector: 'ponyracer-app',
template: `<h1>PonyRacer</h1>`
})
export class PonyRacerAppComponent {
constructor(meta: Meta) {
meta.addTag({ name: 'author', content: 'Ninja Squad' });
}
}Формы
Валидаторы
Новый валидатор позволит объединить существующие required, minLength, maxLength, и pattern. email позволит провести валидацию e-mail адреса (если Вы планируете просто обойтись подходящими регулярными выражениями – удачи в поисках).
Сравнение выбранных опций
Для сравнения выбранных опций была добавлена новая директива: compareWith:
<select [compareWith]="byId" [(ngModel)]="selectedPony">
<option *ngFor="let pony of race.ponies" [ngValue]="pony">{{pony.name}}</option>
</select>
byId(p1: PonyModel, p2: PonyModel) {
return p1.id === p2.id;
}Маршрутизатор
ParamMap
Для представления параметров URL был введен новый интерфейс: ParamMap. Вместо использования params или queryParams, отныне Вам стоит использовать paramMap или queryParamMap, так как они позволяют выбрать между get() для получения значения или getAll() для получения всех значений (так как параметры запросов могут иметь несколько значений, к примеру).
const id = this.route.snapshot.paramMap.get('ponyId');
this.ponyService.get(id).subscribe(pony => this.pony = pony);Или как здесь:
.map((params: ParamMap) => params.get('ponyId'))
.switchMap(id => this.ponyService.get(id))
.subscribe(pony => this.pony = pony);CanDeactivate
Интерфейс CanDeactivate теперь обзавелся дополнительным опциональным параметром, содержащим следующее состояние (то, куда Вы собираетесь перейти). Теперь можно реализовать «умную логику», когда пользователь может покинуть текущий компонент в зависимости от того, куда он или она направляется.
I18n
Интернационализация также медленно, но верно улучшается. К примеру, ngPlural теперь упрощен:
<div [ngPlural]="value">
<ng-template ngPluralCase="0">there is nothing</ng-template>
<ng-template ngPluralCase="1">there is one</ng-template>
</div>Бесплатные вебинары по схожей тематике:
А теперь давайте сравним с тем, что было раньше:
<div [ngPlural]="value">
<ng-template ngPluralCase="=0">there is nothing</ng-template>
<ng-template ngPluralCase="=1">there is one</ng-template>
</div>Только что мы добавили целую главу к нашей электронной книге, включая несколько юз-кейсов и прочее!
Подведем итоги
Релиз Angular 4 привносит множество улучшений и действительно востребованных инноваций в сферы размера генерируемого кода, сохраняя в целом концепцию предыдущей версии Angular. Благодаря этому обновление технологии не должно вызвать затруднений.
Автор перевода: Евгений Лукашук
Статьи по схожей тематике
