Möchten Sie Ihre Angular-Website so schnell und barrierefrei wie möglich gestalten? Dann bist du hier genau richtig.
Was ist Angular?
Angular ist ein Framework zum Erstellen von Benutzeroberflächen. Es bietet Bausteine, mit denen Sie schnell eine wartungsfähige und skalierbare Anwendung einrichten können. Mit Angular können Entwickler Anwendungen für das Web, Mobilgeräte oder Computer erstellen.
Was ist in dieser Sammlung enthalten?
Diese Sammlung konzentriert sich auf fünf wichtige Bereiche zur Optimierung einer Angular-Anwendung:
- Leistung Ihrer App verbessern, um Nutzer-Conversions und ‑Interaktionen zu steigern
- Zuverlässigkeit Ihrer Anwendung in schlechten Netzwerken verbessern, indem Sie Assets mit dem Angular-Service-Worker vorab im Cache speichern lassen
- Ihre Anwendung mithilfe von Prerendering und serverseitigem Rendering für Suchmaschinen und Social-Media-Bots auffindbar machen
- Ihre Anwendung installierbar machen, um eine ähnliche Nutzererfahrung wie bei einer iOS-/Android-App zu bieten
In jedem Beitrag der Sammlung werden Techniken beschrieben, die Sie direkt auf Ihre eigenen Anwendungen anwenden können.
Was ist nicht in dieser Sammlung enthalten?
In dieser Sammlung wird davon ausgegangen, dass Sie bereits mit Angular und TypeScript vertraut sind. Wenn Sie sich noch nicht sicher sind, sehen Sie sich die TypeScript-Dokumentation und die Anleitung Erste Schritte mit Angular auf angular.io an.
Projekt starten
Mit der Angular-Befehlszeile (CLI) können Sie schnell eine einfache clientseitige Angular-Anwendung einrichten. In diesem Beitrag wird die CLI kurz vorgestellt. In anderen Beiträgen der Sammlung wird gezeigt, wie Sie erweiterte Funktionen wie serverseitiges Rendering und Bereitstellungsunterstützung hinzufügen.
CLI einrichten
Installieren Sie zuerst die CLI global und prüfen Sie dann mit den folgenden Befehlen, ob Sie die aktuelle Version verwenden:
npm i -g @angular/cli
ng version
Achten Sie darauf, dass der letzte Befehl die Version 8.0.3 oder höher ausgibt.
Wenn Sie die CLI nicht global installieren möchten, können Sie sie auch lokal installieren und mit dem Befehl npx
ausführen:
npm i @angular/cli
npx ng version
Projekt erstellen
So erstellen Sie einen neuen Projektlauf:
ng new my-app
Mit diesem Befehl werden die ersten Dateien und die Ordnerstruktur für Ihre Anwendung erstellt und die erforderlichen Node-Module installiert.
Nachdem die Einrichtung abgeschlossen ist, starten Sie die Anwendung mit folgendem Befehl:
cd my-app
ng serve
Sie sollten jetzt unter http://localhost:4200 auf Ihre Anwendung zugreifen können.
Nächste Schritte
Im Rest dieser Sammlung erfahren Sie, wie Sie die Leistung und SEO Ihrer Angular-Anwendung verbessern können. Folgende Themen werden behandelt:
- Codeaufteilung auf Routing-Ebene in Angular
- Leistungsbudgets mit der Angular-Befehlszeile
- Strategien zum Vorabrufen von Routen in Angular
- Optimierung der Änderungserkennung in Angular
- Große Listen mit dem Angular CDK virtualisieren
- Vorab-Caching mit dem Angular-Service-Worker
- Routen mit der Angular CLI vorrendern
- Serverseitiges Rendering mit Angular Universal
- Web-App-Manifest mit der Angular CLI hinzufügen