{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Новые фичи Angular 6 за три минуты

Angular вышел с новыми функциями в версии 6.0.0, особенно в Angular-cli. Теперь, с помощью Angular 6, вы можете легко обновить свои старые пакеты, создать собственные веб-элементы, используя Angular Elements, и многое другое. Давайте посмотрим!

ng add

ng add - новая команда в Angular-cli, которая помогает устанавливать и загружать новые пакеты в ваших Angular приложениях. Он работает так же, как и npm, но не заменяет его.

ng update

ng update еще одна новая команда Angular-cli. Она используется для обновления пакетов. Это полезно, например, когда вы хотите перейти с Angular 5 на Angular 6 или на любой другой пакет в Angular приложении.

Объявление провайдеров внутри сервиса

До этого обновления, приходилось объявлять массив провайдеров в app.module.ts

Теперь с помощью Angular 6 вы можете предоставить свою услугу внутри самого супервизора, поместив свойство providedIn:root в пределах "@injectable".

Теперь с помощью Angular 6 вы можете предоставить ваш сервис внутри супервизора, поместив свойство providedIn:root в "@injectable"

Используйте ng-template вместо template директив

Вы можете использовать ng-template для отрисовки HTML вместо тега template в новой версии Angular. ng-template - элемент Angular, который используется со структурной директивой, такой как *ngFor и *ngIf

Элементы Angular

Angular 6 знакомит нас с элементами Angular. Вы можете отображать свои элементы Angular как собственные веб-элементы, и они интерпретируются как доверенные элементы HTML.

Вы можете добавить Angular элементы, выполнив следующую команду:

Импортируйте createCustomElement в свой компонент.

Затем создайте свой собственный элемент.

MyElemComponent.ts

Результат:

Примечание. Вы должны реализовать метод DomSanitizer из @angular/platform-browser, чтобы использовать ваш пользовательский элемент.

Обновление до RxJS 6.0.0

Angular 6 использует последнюю версию библиотеки Rxjs. Теперь вы можете наслаждаться новейшими функциями RxJS 6 в своем Angular приложении :)

Angular сам по себе не имеет много новаторских изменений в Angular core, но Angular-cli действительно захватывает. Команда Angular больше ориентируется на производительность, легко создает PWA, обеспечивая хорошую среду для работы, чтобы работать с Angular в простой форме.

Адаптированный перевод статьи Angular 6 and its new features — explained in three minutes от Digital Skynet :)

0
5 комментариев
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Кохоне

На хабре такой недообзор заплевали бы

Ответить
Развернуть ветку
FooWarrior

Полгода назад вышел. Весной

Ответить
Развернуть ветку
Артем Липатов

В angular-cli 6 не работает команда eject, будьте осторожны, когда будете решать использовать его или нет.
Мне пришлось использовать ngw, который позволяет модифицировать существующий конфиг вебпака.
А ещё тайпинги ангуляра отвратительны - куча any в реактивных формах, нет дженериков там, где они очень нужны: например, в SimpleChanges. Так что, когда кто-нибудь будет рассказывать про тайпскрипт из коробки, - это скорее маркетинг, чем типобезопасное программирование.

Ответить
Развернуть ветку
Владимир Щедрин

То чувство когда перешел на работу с бекендом, и юзнал Angular, который был второй версии ))

Ответить
Развернуть ветку
2 комментария
Раскрывать всегда