RUDE

Узнайте, что нового в Angular 15!

CoderStudio, 17.11.2022 11:36
Узнайте, что нового в Angular 15!

Обновление вашего приложения

Как многие знают, обновить версию вашего приложения Angular очень просто с помощью Angular CLI. Для обновления до версии 15 просто следуйте пошаговым инструкциям в Руководстве по обновлению.

Теперь, когда мы имеем дело с обновленным приложением, давайте узнаем основные новые функции, представленные в этой версии.

Автономные компоненты стабильны!

Те, кто следил за выходом версии 14, вероятно, были очень мотивированы появлением API автономных компонентов. Но команда Angular ясно дала понять, что его использование в производстве не рекомендуется. Теперь в версии 15 эта замечательная новость уже на 100% стабильна! 🎉

Но что это за автономный компонент?

В версии 14 благодаря Standalone Components мы можем создать целое приложение без использования какого-либо NgModule. Как следует из названия, теперь у нас есть возможность создавать полностью независимые компоненты, директивы и трубы.

@Component ({
  standalone: true,
  selector: 'app-root',
  imports: [
    NavbarComponent,
    SidebarComponent,
    HomeComponent,
    AboutComponent,
    HttpClientModule,
    RouterModule.forRoot ([...])
  ],
  template: `[...]`
})
export class AppComponent { }

Флаг standalone: true указывает на то, что это независимый компонент. Свойство imports определяет контекст сборки, т.е. количество всех зависимостей, которые может использовать компонент. Это можно использовать для импорта других автономных компонентов, а также существующих NgModules.

Маршрутизатор также является автономным!

Независимыми могут быть не только компоненты, но и определения маршрутов вашего приложения.

// app.routing.module.ts
export const appRoutes: Routes = [{
  path: 'lazy',
  loadChildren: () => import('./lazy/lazy.routes')
    .then(routes => routes.lazyRoutes)
}];


// lazy.routes.ts
export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

Имея appRoutes, просто зарегистрируйте его в вызове dobootstrapApplication.

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});

Если вы не знаете этот новый процесс, ознакомьтесь с официальной документацией по Angular .

Состав директивы

Эта новая функция была долгожданной для многих людей, поскольку она выводит повторное использование кода на новый уровень!

API композиции директив позволяет присоединять элементы хоста с помощью директив. См. пример ниже:

@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}

В приведенном выше коде мы дополнили MatMenuc двумя директивами: HasColor и CdkMenu. MatMenure использует все входы, выходы и всю логику, связанную с HasColors. CdkMenu присоединяет только выбранные входы и выходы.

Имея в своем распоряжении эту технику, мы можем придумать несколько довольно смелых стратегий.

Нетанель Басал в Твиттере: "🔥😍 Играем с новым API композиции директив в @angular v15 pic.twitter.com/xtakfryZ9y / Twitter"

🔥😍 Играем с новым API композиции директив в @angular v15 pic.twitter.com/xtakfryZ9y

С помощью нескольких строк кода мы можем создавать директивы, похожие на ngIf, но с особой логикой!

Подсказка: В этом фрагменте кода используется функция inject. Еще одна замечательная новая возможность Angular 14, я немного рассказывал о ней в этой статье .

Стоит отметить, что API Directive Composition доступен только для автономных директив.

Заключение

В версии 15 было представлено множество других возможностей, полный список смотрите по этой ссылке , а также в Official Angular Blog.

Можно сделать вывод, что Angular все больше поощряет использование Standalone API. То есть, все чаще мы будем создавать независимые компоненты, директивы и трубы (Без конкретного модуля), чтобы иметь возможность воспользоваться всеми новыми возможностями.