Sie möchten 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 wartbare, skalierbare Anwendung einrichten können. Mit Angular können Entwickler Anwendungen für das Web, Mobilgeräte oder den Computer erstellen.
Was ist in dieser Sammlung?
Diese Sammlung konzentriert sich auf fünf Hauptbereiche zur Optimierung einer Angular-Anwendung:
- Verbessern der Leistung deiner App, um die Nutzer-Conversion und das Engagement zu erhöhen
- Zuverlässigkeit Ihrer Anwendung in schlechten Netzwerken verbessern, indem Sie Assets mit dem Angular-Service-Worker vorab im Cache speichern
- Ihre Anwendung mithilfe von Pre-Rendering und serverseitigem Rendering für Suchmaschinen und Social-Media-Bots sichtbar machen
- Ihre Anwendung installierbar machen, um eine Nutzererfahrung zu bieten, die der einer iOS-/Android-App ähnelt
- Barrierefreiheit Ihrer Anwendung verbessern, damit sie für alle Nutzer verständlich und nutzbar ist
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 mit Angular und TypeScript vertraut sind. Wenn Sie sich noch nicht sicher sind, lesen Sie die TypeScript-Dokumentation und den Einstiegsleitfaden für 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 erfahren Sie, wie Sie erweiterte Funktionen wie serverseitiges Rendering und Bereitstellungsunterstützung hinzufügen.
Befehlszeile einrichten
Installieren Sie zuerst die Befehlszeile global und prüfen Sie, ob Sie die neueste Version haben. Führen Sie dazu die folgenden Befehle aus:
npm i -g @angular/cli
ng --version
Der letzte Befehl muss Version 8.0.3 oder höher ausgeben.
Wenn Sie die Befehlszeile 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 ein neues Projekt:
ng new my-app
Dieser Befehl erstellt die anfänglichen Dateien und die Ordnerstruktur für Ihre Anwendung und installiert die benötigten Knotenmodule.
Sobald 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, Barrierefreiheit und Suchmaschinenoptimierung Ihrer Angular-Anwendung verbessern. Folgendes ist abgedeckt:
- Codeaufteilung auf Routingebene in Angular
- Leistungsbudgets mit der Angular CLI
- Strategien für das Vorabladen von Routen in Angular
- Optimierung der Änderungserkennung in Angular
- Große Listen mit dem Angular CDK virtualisieren
- Assets mit dem Angular-Service-Worker vorab im Cache speichern
- Routen mit der Angular-Befehlszeile vorab rendern
- Serverseitiges Rendering mit Angular Universal
- Web-App-Manifest mit Angular CLI hinzufügen
- Prüfung der Barrierefreiheit mit Codelyzer