Möchten Sie Ihre Angular-Website so schnell und barrierefrei wie möglich gestalten? Dann bist du hier richtig.
Was ist Angular?
Angular ist ein Framework zum Erstellen von Benutzeroberflächen. Es bietet Bausteine, mit denen Sie schnell eine wartbare, skalierbare Anwendung einrichten können. Mit Angular können Entwickler Anwendungen für das Web, für Mobilgeräte oder für den Desktop erstellen.
Was ist in dieser Sammlung enthalten?
Diese Sammlung konzentriert sich auf fünf Hauptbereiche zur Optimierung einer Angular-Anwendung:
- Leistung Ihrer App verbessern, um die Conversion-Rate und die Nutzerinteraktion zu steigern
- Zuverlässigkeit Ihrer Anwendung in schlechten Netzwerken verbessern, indem Sie Assets mit dem Angular-Service-Worker im Voraus im Cache speichern
- Ihre Anwendung mithilfe von Prerendering und serverseitigem Rendering für Suchmaschinen und Social-Media-Bots auffindbar machen
- Ihre Anwendung installierbar machen, um eine Nutzererfahrung zu bieten, die der einer iOS-/Android-App ähnelt
In jedem Beitrag der Sammlung werden Techniken beschrieben, die Sie direkt in Ihren eigenen Anwendungen einsetzen 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, lesen Sie die TypeScript-Dokumentation und den Leitfaden Erste Schritte mit Angular auf angular.io.
Projekt starten
Mit der Angular-Befehlszeile (CLI) können Sie schnell eine einfache clientseitige Angular-Anwendung einrichten. Dieser Beitrag enthält eine kurze Einführung in die Befehlszeile. In anderen Beiträgen der Sammlung wird gezeigt, wie Sie erweiterte Funktionen wie serverseitiges Rendering und Bereitstellungsunterstützung hinzufügen.
Befehlszeile einrichten
Installieren Sie zuerst die Befehlszeile global und prüfen Sie mit den folgenden Befehlen, ob Sie die aktuelle Version haben:
npm i -g @angular/cli
ng version
Achten Sie darauf, dass die letzte Befehlsausgabe Version 8.0.3 oder höher ausgibt.
Wenn Sie die Befehlszeile nicht global installieren möchten, können Sie sie lokal installieren und mit dem Befehl npx ausführen:
npm i @angular/cli
npx ng version
Projekt erstellen
Führen Sie den folgenden Befehl aus, um ein neues Projekt zu erstellen:
ng new my-app
Mit diesem Befehl werden die ersten Dateien und die Ordnerstruktur für Ihre Anwendung erstellt und die erforderlichen Knotenmodule installiert.
Nachdem die Einrichtung erfolgreich abgeschlossen wurde, starten Sie Ihre 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 Routenebene in Angular
- Leistungsbudgets mit der Angular-Befehlszeile
- Strategien für das Prefetching von Routen in Angular
- Optimierung der Änderungserkennung in Angular
- Große Listen mit dem Angular CDK virtualisieren
- Precaching mit dem Angular Service Worker
- Routen mit der Angular-Befehlszeile vorab rendern
- Serverseitiges Rendering mit Angular Universal
- Web-App-Manifest mit der Angular-Befehlszeile hinzufügen