19.11.2024 в 19:54

Новый Angular 19

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

Автономные компоненты по умолчанию

Введение автономных компонентов в Angular 14 стало важным шагом. Теперь в Angular 19 они применяются автоматически, без необходимости явно указывать standalone: true.

До Angular 19:

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'standalone-component',
  templateUrl: './standalone-component.html',
})
export class StandaloneComponent { }

Сейчас:

@Component({
  imports: [CommonModule],
  selector: 'standalone-component',
  templateUrl: './standalone-component.html',
})
export class StandaloneComponent { }

Это устраняет необходимость использования NgModule в большинстве случаев, делая структуру приложения проще и способствуя модульной разработке. Если NgModule всё же необходим, его можно явно задать с помощью standalone: false.

Быстрый рендеринг с частичной и постепенной гидратацией

Angular 19 оптимизирует приложения с рендерингом на сервере (SSR) благодаря частичной и постепенной гидратации.

Частичная гидратация: приоритетно загружает критически важные компоненты, сокращая время загрузки.
Инкрементная гидратация: откладывает загрузку некритичных элементов до взаимодействия пользователя (клика, наведения), экономя ресурсы.

Эти улучшения обеспечивают более быструю и отзывчивую работу приложения с самого начала.

Улучшенные сигналы: упрощение реактивности

Возможности работы с сигналами в Angular развиваются, с расширенной поддержкой и новыми инструментами, такими как LinkedSignal.

Что такое сигналы?

Сигналы — это API для реактивного и предсказуемого управления состоянием, уменьшая зависимость от Zone.js. Это упрощает отладку, повышает производительность и уменьшает размер приложения.

Пример с сигналами: знакомство с LinkedSignal

linkedSignal позволяет создавать зависимые сигналы, которые автоматически обновляются на основе исходного сигнала.

import { signal, linkedSignal } from '@angular/core';

const source = signal(10);
const double = linkedSignal(source, value => value * 2);

console.log(double()); // 20
source.set(15);
console.log(double()); // 30

Улучшения API компонентов

Angular 19 добавляет новый хук жизненного цикла ngAfterSignalUpdate для реагирования на обновления сигналов. Это облегчает работу с сложными состояниями.

import { Component, Signal, signal, AfterSignalUpdate } from '@angular/core';

@Component({
  selector: 'app-signal-lifecycle',
  template: `
    <h3>Signal Lifecycle Demo</h3>
    <button (click)="updateSignal()">Update Signal</button>
  `,
})
export class SignalLifecycleComponent implements AfterSignalUpdate {
  mySignal = signal(0);

  updateSignal() {
    this.mySignal.set(this.mySignal() + 1);
  }

  ngAfterSignalUpdate() {
    console.log('Signal updated to:', this.mySignal());
  }
}

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

Более быстрые сборки

Оптимизации в Angular CLI ускоряют сборку как в режиме разработки, так и в продакшене. Кэширование дополнительно повышает скорость итераций.

Пример: сборка с кэшем

ng build --optimization=true --build-cache

Улучшения внедрения зависимостей

Angular теперь автоматически выводит типы при внедрении зависимостей (DI), сокращая повторяющийся код и повышая безопасность типов.

Пример: Вывод типа в DI

// Before
constructor(private http: HttpClient) {}

// Now in Angular 19
constructor(private readonly httpClient) {}

API-интерфейсы Resource и rxResource: упрощение асинхронных данных

Новые экспериментальные API-интерфейсы Resource и rxResource облегчают работу с асинхронными данными, предоставляя удобный способ работы как с промисами, так и с наблюдаемыми.

Свойства resource:

status: отражает текущее состояние ресурса (загрузка, успех, ошибка).
value: содержит данные после успешной загрузки.
error: обрабатывает возможные ошибки.

Пример сrxResource

import { rxResource } from '@angular/core';

const data = rxResource(async () => {
  const response = await fetch('/api/data');
  return response.json();
});

data.value.subscribe(data => console.log(data));

Эти инструменты обеспечивают единый подход к асинхронной работе с данными, что упрощает и интуитивно понятнее делает рабочие процессы.

Улучшенная маршрутизация

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

Пример: использование сигналов с маршрутизатором

import { Component, inject, OnInit, Signal } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-route-demo',
  template: `
    <h2>Route Demo</h2>
    <p>Route ID: {{ routeId() }}</p>
  `,
})
export class RouteDemoComponent implements OnInit {
  private route = inject(ActivatedRoute);
  routeId: Signal<string> = signal('');

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.routeId.set(params.get('id') ?? '');
    });
  }
}

Бонус: Улучшения в Angular Material

Angular Material обзавёлся новыми стилями, функциями доступности и улучшенными компонентами. Например, компоненты mat-menu и mat-select стали более удобными и интуитивно понятными.

Пример: Улучшенное использование mat-menu

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item>Item 3</button>
</mat-menu>

Заключение

Angular 19 знаменует собой значительный шаг в развитии фреймворка. От стандартных автономных компонентов до улучшенной реактивности с сигналами и оптимизациями SSR, эта версия предоставляет инструменты для создания более быстрых, более реактивных и поддерживаемых приложений.

Команда к обновлению фреймворка

ng update @angular/core @angular/cli

Источник:

Exit fullscreen mode

#Angular

Войти на сайт