Das Angular Framework

In der heutigen schnelllebigen digitalen Welt sind moderne Webanwendungen ein wesentlicher Bestandteil unseres Alltags. Eines der beliebtesten Frameworks für die Entwicklung solcher Anwendungen ist Angular, ein von Google entwickeltes Open-Source-Framework. In diesem Artikel werfen wir einen Blick darauf, warum Angular so mächtig ist und welche Vorteile es bietet.

Was ist Angular?

Angular ist ein Typescript-basiertes Framework, das es Entwicklern ermöglicht, dynamische und reaktionsfähige Webanwendungen zu erstellen. Seit seiner Einführung im Jahr 2010 (damals als AngularJS bekannt) hat es sich kontinuierlich weiterentwickelt. Die moderne Version von Angular (ab Version 2.0) unterscheidet sich erheblich von AngularJS und bietet eine verbesserte Leistung, bessere Tools und Unterstützung für fortschrittliche Architekturen.

Hauptmerkmale von Angular

Komponentenbasierte Architektur Angular verwendet eine modulare, komponentenbasierte Struktur, die die Wiederverwendbarkeit und Wartbarkeit von Code erheblich verbessert. Jede Komponente ist eigenständig und besteht aus HTML, CSS und Typescript-Logik. Hier am Beispiel einer einfachen Hello- World-Komponente:

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

@Component({
  selector: 'app-root',
  imports: [],
  template: `
    <h1>Hello world!</h1>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'homes';
}

Two-Way-Binding Eines der herausragenden Merkmale von Angular ist die Zwei-Wege-Datenbindung. Änderungen in der Benutzeroberfläche werden automatisch im Datenmodell aktualisiert und umgekehrt. Two-Way-Binding am Beispiel eines einfachen Input Feldes:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
  imports: [FormsModule],
  template: `
    <main>
      <h2>Hello {{ firstName }}!</h2>
      <input type="text" [(ngModel)]="firstName" />
    </main>
  `
})
export class AppComponent {
  firstName = 'Ada';
}

Dependency Injection Mit Dependency Injection (DI) können Entwickler Services effizienter verwalten und die Modularität und Testbarkeit von Anwendungen erhöhen. Hier ein Beispiel von DI anhand eines einfachen Service in Form eines Taschenrechners, der die Zahlen x und y addiert:

import {Injectable} from '@angular/core';
@Injectable({providedIn: 'root'})
export class Calculator {
  add(x: number, y: number) {
    return x + y;
  }
}

Der Service wird über die build in inject-Funktion in der Receipt Komponente bereitgestellt:

import { Component, inject } from '@angular/core';
import { Calculator } from './calculator';
@Component({
  selector: 'app-receipt',
  template: `<h1>The total is {{ totalCost }}</h1>`,
})
export class Receipt {
  private calculator = inject(Calculator);
  totalCost = this.calculator.add(50, 25);
}

Leistungsstarke Tools und CLI Angular CLI (Command Line Interface) erleichtert Entwicklern den Einstieg, indem es gängige Aufgaben automatisiert, wie z. B. das Erstellen neuer Komponenten oder das Einrichten von Tests. Die Installation der CLI via npm ist einfach:

npm install -g @angular/cli

Die Angular CLI enthält einen Entwicklungsserver, mit dem du deine App lokal erstellen und bereitstellen kannst:

ng serve --open

Integrierte Lösungen Angular bietet eine Vielzahl integrierter Lösungen, darunter Routing, Formulare und HTTP-Dienste, wodurch die Integration von Drittanbieter-Bibliotheken oft überflüssig wird. Über die provideHttpClient-Funktion wird der HTTP-Dienst in der App bereitgestellt. Standardmäßig verwendet HttpClient die XMLHttpRequest-API für Anfragen. Die Funktion withFetch stellt den Client auf die Verwendung der Fetch-API um.

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withFetch(),
    ),
  ]
};