StandWithUkraine
Angular 7: Обновления и новые фичи
Вы еще не используете Angular 7 и не знаете с чего начать? Тогда эта статья специально для Вас! Здесь мы рассмотрим основные отличия Angular 7 от более ранних версий, некоторые отличные функции для повышения производительности и разберемся чем же он так привлекает разработчиков.
Angular 7 теперь использует Typescript 3.1, RxJS обновлен до версии 6.3 и поддерживает Node 10.
CLI
Новая обновленна CLI позволит Вам сделать установку вашего ng-app еще более точным чем раньше. Теперь, за милой беседой через командную строку при использовании команды ng new или ng add вы сможете добавить роутинг, выбрать вариант написания стилей между CSS, SCSS, LESS и т.д. и все это при помощи prompts.
Обзор Angular Material CDK
- CDK предоставляет ряд инструментов для улучшения Accessibility.
- Bidirectionality — При включении BidiModule, компоненты могут вводить Directionality для получения текущего направления текста (RTL or LTR);
@Component({ ... })
export class MyWidget implements OnDestroy {
/** Whether the widget is in RTL mode or not. */
private isRtl: boolean;
/** Subscription to the Directionality change EventEmitter. */
private _dirChangeSubscription = Subscription.EMPTY;
constructor(dir: Directionality) {
this.isRtl = dir.value === 'rtl';
_dirChangeSubscription = dir.change.subscribe(() => {
this.flipDirection();
});
}
ngOnDestroy() {
this._dirChangeSubscription.unsubscribe();
}
} - Пакет layout предоставляет утилиты для создания адаптивных пользовательских интерфейсов, которые реагируют на изменения размера экрана.
const layoutChanges = breakpointObserver.observe([
'(orientation: portrait)',
'(orientation: landscape)',
]);
layoutChanges.subscribe(result => {
updateMyLayoutForOrientationChange();
});- Пакет overlay позволяет открывать плавающие панели на экране. Если Вы не используете Angular Material, Вам нужно его подключить вручную:
@import '~@angular/cdk/overlay-prebuilt.css';- ScrollingModule и DragDropModule рассмотрим в следующих пунктах более детально, так как это очень занятные вещи
ScrollingModule (Angular Material CDK)
Поскольку многие мобильные фреймворки начали совершать переход к динамической загрузке данных, таких как изображения или длинные списки, Angular последовали этому примеру, добавив ScrollingModule, чтобы разрешить виртуальную прокрутку.
Поскольку элементы появляются или скрываются, они фактически загружаются и выгружаются из DOM, что позволило значительно увеличить производительность. В следующий раз, когда у вас есть потенциально большой список элементов для прокрутки, вставьте его в компонент cdk-virtual-scroll-viewport.
Реализация виртуальной прокрутки теперь доступна в yarn add @angular/cdk@7.0.0-beta.0.
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
imports: [ ScrollingModule ]
})
export class AppModule { }В качестве примера создадим компонент, который отображает список.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-virtual-scroll',
templateUrl: './virtual-scroll.component.html',
styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {
fixedSizeData = Array(10000).fill(30);
}В примере мы создаем массив из 10000 элементов, давайте перейдем к шаблону.
<cdk-virtual-scroll-viewport class="list-container list-group" autosize>
<div *cdkVirtualFor="let size of fixedSizeData; let i = index"
class="list-group-item"
[style.height.px]="size">
Item {{i}}
</div>
</cdk-virtual-scroll-viewport>Атрибут autosize указывает, что мы хотим использовать стратегию виртуального прокрутки, которая поддерживает элементы неизвестного или динамического размера.
DragDropModule (Angular Material CDK)
Реализация DragDropModule теперь доступна с @angular/cdk/drag-drop. С помощью этого модуля Вы можете осуществлять поддержку перетаскивания, включая переупорядочивание списков и перенос элементов между списками. CDK включает в себя автоматический рендерниг, drag&drop обработчики, анимацию, поддержку сенсорных устройств и даже возможность переноса данных между списками.
Начните с импорта DragDropModule в NgModule, в том файле, где Вы хотите использовать функции перетаскивания. Теперь вы можете добавить директиву cdkDrag в элементы, чтобы сделать их перетаскиваемыми.
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{cards}}</div>
</div>import {Component} from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
/**
* @title Drag&Drop
*/
@Component({
selector: 'cdk-drag-drop-sorting-example',
templateUrl: 'cdk-drag-drop-sorting-example.html',
styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample {
cards= [
...
];
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.cards, event.previousIndex, event.currentIndex);
}
}
Производительность приложений
Angular 7 быстрее чем любая из предыдущих версий. Фреймворк стал работать более быстро из-за многих вещей — добавленый ScrollingModule, более быстрый ребилд, использование Budget Bundles, что уведомляют Вас, когда ваше приложение достигает ограничений по размеру. По умолчанию вы получаете предупреждения, когда вы достигаете 2 МБ и ошибки при 5 МБ, а если же Вам нужно немного больше места, просто добавьте некоторые конфиги в json файл:
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]Ivy Renderer
Новое поколение рендеринга еще находится на стадии разработки и активно улучшается, но на момент релиза Angular 7 он все еще не включен в стандартную спецификацию, ожидается ближе к 8 версии Angular. На данный момент Ivy Renderer все еще доступен в экспериментальном формате и его можно включить добавив следующие строки в файл tsconfig.json:
"angularCompilerOptions": {
"enableIvy": true
}Более подробно об Ivy Вы можете узнать из статьи Angular 6.
Slots с Angular Elements
Теперь стало возможным использовать ViewEncapsulation.ShadowDom с Angular 6.1, который прекрасно подходит для Angular Elements, но ранее отсутствовала возможность использовать <slot>,
новый стандартный HTML-элемент, введенный спецификацией Web Component. Теперь это поправили и <slot> стал доступен:
@Component({
selector: 'ns-card',
template: `
<header>
<slot name="card-header"></slot>
</header>
<slot></slot>`,
encapsulation: ViewEncapsulation.ShadowDom,
styles: []
})
export class CardComponent {
}В виде Angular Element это выглядят подобным образом:
<ns-card>
<span slot="card-header">Angular 7</span>
<p>Upgrading and New Features </p>
</ns-card>А какой фреймворк предпочитаете использовать Вы?
Напишите мне ответ в комментариях 🙂
Если Вы хотите узнать больше о некоторых фичах, которые здесь описаны или же Вам еще не удалось достаточно времени приделить Angular 6 — почитайте эту статью и Вы можете найти в ней ответы на многие вопросы:
Что нового появилось в Angular 6