25 июля вышел Angular 6.1. Данный минорный релиз фреймворка можно рассматривать как замену Angular 6.0, включающую в себя некоторые новшества и исправления ошибок. Этот материал, перевод заметки из блога Angular, посвящён основным новым возможностям Angular 6.1.
Теперь разработчики Angular-приложений могут воспользоваться новой возможностью маршрутизатора, которая позволяет запоминать и восстанавливать местоположение пользователя на странице — позицию прокрутки или скроллинга. При переходе на очередную страницу приложения позиция скроллинга сбрасывается, при этом запоминается положение пользователя на предыдущей странице. Нажатие на кнопку «Назад» приводит к открытию предыдущей страницы с учётом сохранённой позиции прокрутки.
Для того чтобы включить эту возможность, можно воспользоваться следующей командой:
Ожидается, что в будущем мажорном релизе платформы маршрутизатор по умолчанию будет настроен на восстановление позиции скроллинга.
Существует множество способов связывания CSS-правил с компонентами, в которых определены эти правила. Это называется View Encapsulation. Инкапсуляцию можно переключить на использование ShadowDOM v1 в декораторе компонента. Делается это так:
Теперь применение значения
ShadowDOM v1 отличается лучшей кросс-браузерной поддержкой, чем предыдущая версия стандарта. Работа над этим стандартом изначально велась с учётом возможности его использования в различных браузерах. О различиях Shadow DOM v0 и v1 можно почитать здесь.
Новшества ShadowDOM v1 будут интересны, в основном, авторам библиотеки и продвинутым разработчикам. Надо отметить, что применение Shadow DOM v1 необходимо для использования проецирования контента (content projection) в рамках технологии Angular Elements.
В этом релизе были улучшены возможности инструмента Schematics, в результате теперь из существующего правила можно возвращать новое правило. Это позволяет разработчикам более гибко определять набор правил для Schematics.
Теперь Angular, наряду с TypeScript 2.7, поддерживает TypeScript 2.8 и 2.9. Одна из важных возможностей TS 2.9, которая пригодится многим разработчикам, имеет отношение к ошибкам, к таким, как следующая:
В TS внесены изменения, благодаря которым, во-первых, подобные ошибки больше не появляются, а, во-вторых, больше не нужно переписывать код для того, чтобы привести его к состоянию, соответствующему подобным шаблонам экспорта.
В новом релизе Angular есть и другие изменения, например, касающиеся обработки неправильно сформированных URL (malformedUriErrorHandler) и направленные на улучшение работы с ассоциативными массивами и объектами (KeyValuePipe). Вышла и новая версия angular-cli.
Angular 6.1 является последним запланированным минорным релизом версии 6.x. Поэтому, в обозримом будущем, можно ожидать выхода бета-версий Angular 7.0 и появления в этом фреймворке новых интересных возможностей.
Уважаемые читатели! Какие новшества Angular 6.1 кажутся вам наиболее интересными? Чего вы ждёте от Angular 7.0?
Маршрутизатор и сохранение позиции прокрутки
Теперь разработчики Angular-приложений могут воспользоваться новой возможностью маршрутизатора, которая позволяет запоминать и восстанавливать местоположение пользователя на странице — позицию прокрутки или скроллинга. При переходе на очередную страницу приложения позиция скроллинга сбрасывается, при этом запоминается положение пользователя на предыдущей странице. Нажатие на кнопку «Назад» приводит к открытию предыдущей страницы с учётом сохранённой позиции прокрутки.
Для того чтобы включить эту возможность, можно воспользоваться следующей командой:
RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
Ожидается, что в будущем мажорном релизе платформы маршрутизатор по умолчанию будет настроен на восстановление позиции скроллинга.
ShadowDOM v1 и View Encapsulation
Существует множество способов связывания CSS-правил с компонентами, в которых определены эти правила. Это называется View Encapsulation. Инкапсуляцию можно переключить на использование ShadowDOM v1 в декораторе компонента. Делается это так:
@Component({
templateUrl: './my-component.html',
encapsulation: ViewEncapsulation.ShadowDom
})
export class MyComponent { }
Теперь применение значения
ViewEncapsulation.Native
, которое означает использование Shadow DOM v0, признано устаревшим.ShadowDOM v1 отличается лучшей кросс-браузерной поддержкой, чем предыдущая версия стандарта. Работа над этим стандартом изначально велась с учётом возможности его использования в различных браузерах. О различиях Shadow DOM v0 и v1 можно почитать здесь.
Новшества ShadowDOM v1 будут интересны, в основном, авторам библиотеки и продвинутым разработчикам. Надо отметить, что применение Shadow DOM v1 необходимо для использования проецирования контента (content projection) в рамках технологии Angular Elements.
Объединение правил Schematics в цепочки
В этом релизе были улучшены возможности инструмента Schematics, в результате теперь из существующего правила можно возвращать новое правило. Это позволяет разработчикам более гибко определять набор правил для Schematics.
Поддержка TypeScript 2.9
Теперь Angular, наряду с TypeScript 2.7, поддерживает TypeScript 2.8 и 2.9. Одна из важных возможностей TS 2.9, которая пригодится многим разработчикам, имеет отношение к ошибкам, к таким, как следующая:
Exported variable ‘x’ has or is using name ‘y’ from external module ‘z’ but cannot be named
В TS внесены изменения, благодаря которым, во-первых, подобные ошибки больше не появляются, а, во-вторых, больше не нужно переписывать код для того, чтобы привести его к состоянию, соответствующему подобным шаблонам экспорта.
Итоги
В новом релизе Angular есть и другие изменения, например, касающиеся обработки неправильно сформированных URL (malformedUriErrorHandler) и направленные на улучшение работы с ассоциативными массивами и объектами (KeyValuePipe). Вышла и новая версия angular-cli.
Angular 6.1 является последним запланированным минорным релизом версии 6.x. Поэтому, в обозримом будущем, можно ожидать выхода бета-версий Angular 7.0 и появления в этом фреймворке новых интересных возможностей.
Уважаемые читатели! Какие новшества Angular 6.1 кажутся вам наиболее интересными? Чего вы ждёте от Angular 7.0?
devpreview
Когда писал первое приложение на Angular, был очень удивлён, что не было этой возможности «из коробки».