Veröffentlicht · wird verbessert
Framework · Seit 2016
Angular ist ein von Google geführtes Web-Framework auf Basis von TypeScript, mit Routing, Formularen und HTTP für große, wartbare Webanwendungen.
Angular ist ein Frontend-Framework, mit dem man Webanwendungen in TypeScript entwickelt. Es erschien erstmals 2016 und wird vom Angular-Team bei Google als Open Source entwickelt. Trotz des ähnlichen Namens ist es ein eigenständiges Framework und nicht dasselbe wie das 2010 erschienene AngularJS. Die Oberfläche besteht aus Komponenten aus Template und TypeScript-Klasse, veränderlicher Zustand wird mit Signals verfolgt, und gemeinsame Logik steckt in Services, die per Dependency Injection bereitgestellt werden.
Da Router, Formulare, HttpClient, Internationalisierung und Testwerkzeuge als offizielle Pakete mitgeliefert werden, ist Angular besonders bei großen Geschäftsanwendungen und Verwaltungsoberflächen verbreitet, die mehrere Teams über Jahre pflegen. Die einheitliche Struktur und die Codegeneratoren sorgen dafür, dass Angular-Projekte ähnlich aufgebaut sind und sich neue Entwickler schnell zurechtfinden. Serverseitiges Rendering und statische Seitengenerierung werden mit denselben Werkzeugen unterstützt.
Am schnellsten startet man, indem man Node.js installiert, mit der Angular CLI ein Projekt anlegt und mit ng serve den Entwicklungsserver startet. Die offizielle Website angular.dev bietet ein interaktives Tutorial direkt im Browser sowie ausführliche Leitfäden zu allen Themen. Grundkenntnisse in TypeScript sind sehr hilfreich, denn Angular-Code besteht aus Klassen, Typen und Dekoratoren.
Jede Komponente importiert die Komponenten und Direktiven, die sie nutzt, direkt. So lässt sich die Oberfläche ohne zusätzliche Module in kleine, eigenständige Teile gliedern.
Mit signal, computed und effect deklariert man Zustand und abgeleitete Werte; Angular erkennt genau, was sich geändert hat, und aktualisiert nur die betroffenen Stellen.
Router, Reactive Forms, HttpClient, Internationalisierung und Server-Rendering sind offizielle Pakete, sodass die Auswahl zentraler Bibliotheken entfällt.
Die Angular CLI übernimmt Projektanlage, Codegenerierung, Entwicklungsserver, Tests und optimierte Produktions-Builds in einem einheitlichen Ablauf.
Die Angular CLI läuft auf Node.js. Installieren Sie eine LTS-Version von nodejs.org und prüfen Sie, ob node und npm ihre Versionen ausgeben. Welche Node.js-Versionen unterstützt werden, steht in der Kompatibilitätstabelle auf angular.dev.
node --version && npm --versionInstallieren Sie die Angular CLI global mit npm. Danach steht der Befehl ng zur Verfügung; ng version zeigt die installierte Version an.
npm install -g @angular/cliLegen Sie mit ng new ein neues Projekt an und starten Sie den Entwicklungsserver. Nachdem Sie die Fragen zum Stylesheet-Format und zu SSR beantwortet haben, öffnet sich die App unter http://localhost:4200.
ng new my-app && cd my-app && ng serve --openDer Dekorator @Component macht aus einer Klasse eine Komponente, also einen Teil der Oberfläche. Der selector ist der Tag-Name im HTML, {{ }} im Template gibt einen Wert aus, und (click) verbindet ein Ereignis mit einer Methode. Ein Signal liest man, indem man es wie eine Funktion aufruft, und ändert es mit update; danach aktualisiert Angular die Ansicht automatisch.
src/app/app.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name() }}!</h1>
<button (click)="increment()">Clicked {{ count() }} times</button>
`,
})
export class App {
protected readonly name = signal('Angular');
protected readonly count = signal(0);
increment() {
this.count.update((value) => value + 1);
}
}
npm install -g @angular/cli
ng new hello-angular
cd hello-angular
ng serve --openSechs Kapitel führen dich von der Installation bis zu den Kernkonzepten von Angular.
Stelle Fragen, teile Erfahrungen und tausche Meinungen zu Angular aus.
Noch keine Diskussionen. Starte die erste.
0 Kommentare
Anmelden · Melde dich an, um einen Kommentar zu schreiben.
Schreib den ersten Kommentar.