Новые возможности Angular v14

Angular v14, наконец, здесь с некоторыми захватывающими новыми функциями!

Прошло много времени с тех пор, как Angular 13 был выпущен еще в ноябре 2021 года. Angular 14 наконец-то здесь с некоторыми свежими и захватывающими новыми функциями.

В этой статье мы кратко рассмотрим, что предлагает Angular v14.

Итак, приступим!

Автозаполнение CLI

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

Примечание. Эта функция не поддерживается в Windows Cmdили Powershell, но мы можем использовать Git Bash. или Подсистема Windows для Linux.

Чтобы использовать эту функцию, нам сначала нужно выполнить:

ng completion

Далее нам нужно перезапустить наш терминал. Затем мы можем использовать интерфейс командной строки, как обычно, за исключением того, что если мы сейчас нажмем Tab, для нас будут перечислены все доступные параметры.

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

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

Автономные компоненты и дополнительные модули

Angular 14 поддерживает автономные компоненты, а это означает, что модули становятся необязательными. В предыдущих версиях компонент нужно было объявлять внутри файла NgModule. Ну, не больше!

Компоненты Angular, помеченные как standalone, могут напрямую управлять зависимостями своих шаблонов через свойство imports. Мы могли бы даже сделать AppComponent автономным и удалить файл AppModule.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `<h1>Hello World</h1>`
})
export class AppComponent {}

Затем загрузите наше приложение, используя AppComponent напрямую!

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Более того, эти автономные компоненты можно использовать с маршрутизацией и отложенной загрузкой. Во-первых, давайте создадим файл routes.ts, в котором мы объявим наш объект маршрутов.

import { Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    title: 'Home Page',
    loadComponent: () =>
      import('./home/home.component').then((c) => c.HomeComponent)
  },
  {
    path: 'personal',
    title: 'Personal Information',
    loadComponent: () =>
      import('./personal/personal.component').then((c) => c.PersonalComponent)
  },
];

Еще одна новая функция заключается в том, что мы можем установить разные титульные страницы для каждого маршрута. Где мы используем только что объявленные маршруты? Внутри нашего файла начальной загрузки, конечно.

import { importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './routes';

bootstrapApplication(AppComponent, {
  providers: [importProvidersFrom(RouterModule.forRoot(routes))],
}).catch((err) => console.error(err));

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

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <h1>Hello World</h1>
    <button routerLink="home" routerLinkActive="router-link-active">Home</button>
    <button routerLink="personal">Personal Information</button>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AppComponent {}

Вы можете найти рабочую демонстрацию по этой ссылке StackBlitz.

Но ждать!

Что произойдет сNgModule? Модули вымирают?

Я предполагаю, что для обеспечения обратной совместимости модули еще некоторое время будут существовать.

Если это когда-нибудь и произойдет, то не в ближайшее время. Учитывая, что Angular — такой широко используемый фреймворк, это было бы действительно неожиданным шагом.

Но это только личное предположение. Так что не верьте мне на слово!

Строго типизированные реактивные формы

Одна из самых востребованных фич — строго типизированные реактивные формы. Элементы управления формы, группы и массивы теперь безопасны для типов, что означает, что TypeScript автоматически применит соответствующий тип.

Это становится особенно удобным, когда вы имеете дело с большими вложенными формами. Ну, мы могли бы использовать трюк или два, чтобы облегчить себе жизнь. Но Angular, прикрывающий нашу спину, намного лучше!

Новый способ внедрения сервисов

Как вы уже знаете, в Angular мы можем внедрять зависимости в конструктор компонентов, пайпов, директив и других сервисов. Кроме того, до Angular 14 мы могли использовать функцию inject() для внедрения токенов.

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
  constructor(public dataService: DataService) {
     // ...
  }
  // ...
}

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

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

export function getNavigationEndEvents() {
  return inject(Router).events.pipe(
    filter((event) => event instanceof NavigationEnd)
  );
}

Расширенная диагностика шаблонов

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

Например, предупреждения могут быть созданы для незначительных проблем, таких как неправильные двусторонние привязки или использование ненужных операторов (например, ??, когда переменная гарантированно не может быть нулевой).

Выводы

В этой статье мы кратко рассмотрели, что нового в Angular v14. Новые функции включают автозаполнение CLI, автономные компоненты, строго типизированные реактивные формы и расширенную диагностику шаблонов. Angular выглядит немного более увлекательно!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.

Для дальнейшего чтения: