Angular-Entwicklung mit Standalone Components

Einführung

Angular war schon immer ein Vorreiter bei der Bereitstellung robuster Lösungen für die sich wandelnden Anforderungen des modernen Webs. Mit der Einführung von Angular 14 hat das Framework mit dem Feature der Standalone Components einen gigantischen Sprung gemacht. Diese revolutionäre Funktion hat Entwicklern neue Wege eröffnet, um modularere, wiederverwendbare und wartbare Anwendungen zu erstellen. Lassen Sie uns in die Welt der Standalone Components eintauchen und untersuchen, wie sie die Angular-Landschaft verändern.

Verständnis von Standalone Components

Komponenten sind eine neue Art von Angular Bausteinen, die nicht an ein bestimmtes Angular-Module gebunden sind. Im Gegensatz zum traditionellen Ansatz, bei dem Komponenten innerhalb eines Angular-Modules deklariert werden mussten, sind Standalone Components von dieser Anforderung befreit.

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

@Component({
  standalone: true,
  selector: 'app-cart-item',
  template: '<p>Item: {{ item.name }}, Price: {{ item.price }}</p>',
})
export default class CartItemComponent {
  item = { name: 'Apple', price: 1.25 };
}

In dem obigen Ausschnitt bedeutet die Eigenschaft standalone: true, dass CartItemComponent eine eigenständige Komponente ist.

Erstellen von Standalone Components

Das Erstellen von Standalone Components, Direktiven oder Pipes ist mit Angular ein Kinderspiel. Verwenden Sie das --standalone Flag im Befehl ng generate component, und Angular erledigt den Rest.

ng g c cartItem --standalone

Dieser Befehl generiert eine Standalone Component namens CartItemComponent.

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

@Component({
  standalone: true,
  selector: 'app-cart-item',
  templateUrl: './cart-item.component.html',
  styleUrls: ['./cart-item.component.scss'],
  imports: [CommonModule],
})
export class CartItemComponent { }

Standalone Component einbinden

Sie können CartItemComponent in andere eigenständige oder modulbasierte Komponenten integrieren.

import { Component } from '@angular/core';
import { CartItemComponent } from './cart-item/cart-item.component';

@Component({
  selector: 'app-cart',
  template: '<app-cart-item></app-cart-item>',
  imports: [CartItemComponent],
})
export class CartComponent {}

Lazy Loading und Standalone Components

Lazy Loading kann die Leistung Ihrer App erheblich verbessern.

const routes: Routes = [
  {
    path: 'cart-item',
    loadChildren: () => import('./path/to/cart-item.component')
  }
];

Dependency Injection (DI) in Standalone Components

Die Verwaltung von Abhängigkeiten ist in eigenständigen Komponenten einfach und effektiv.

import { Component, inject } from '@angular/core';
import { ItemService } from '../services/item.service';

@Component({
  selector: 'app-cart-item',
  template: '<p>Item: {{ item.name }}, Price: {{ item.price }}</p>',
  providers: [ItemService],
})
export default class CartItemComponent {
  item = inject(ItemService).getItem();
}

Durch die Angabe von Anbietern auf Komponentenebene können Standalone-Components ihre Abhängigkeiten effizient verwalten.

Official doc: https://angular.io/guide/standalone-components

Fazit

Die Einführung von Standalone Components in Angular 14 markiert einen bedeutenden Schritt in Richtung einer modulareren und besser verwaltbaren Anwendungsstruktur. Die einfache Erstellung und Integration sowie die Unterstützung von Lazy Loading und Dependency Injection machen Standalone Components zu einem leistungsstarken Feature für die moderne Angular-Entwicklung. Die Einführung von Standalone Components wird zweifellos zu saubererem Code, schnelleren Entwicklungszyklen und einer bemerkenswerten Reduzierung der Komplexität von Angular-Projekten führen.