Möchten Sie Ihre Angular-Website so schnell und zugänglich wie möglich gestalten? Dann bist du hier genau richtig!
Was ist Angular?
Angular ist ein Framework zum Erstellen von Benutzeroberflächen. Sie enthält Bausteine, mit denen Sie schnell eine wartbare, skalierbare Anwendung einrichten können. Mit Angular können Entwickler Anwendungen erstellen, die im Web, auf Mobilgeräten oder auf dem Desktop verfügbar sind.
Was ist in dieser Sammlung?
Diese Sammlung konzentriert sich auf fünf Hauptbereiche zur Optimierung einer Angular-Anwendung:
- Verbessern der Leistung Ihrer Anwendung, um die Conversion-Rate und das Engagement von Nutzern zu steigern
- Verbessern der Zuverlässigkeit Ihrer Anwendung in schlechten Netzwerken durch Precaching von Assets mit dem Angular Service Worker
- Ihre App durch Pre-Rendering und serverseitiges Rendering für Suchmaschinen und Social-Media-Bots sichtbar machen
- Ihre App installierbar machen, um eine ähnliche Nutzererfahrung wie eine iOS- oder Android-App zu bieten
- Verbesserung der Barrierefreiheit Ihrer App, damit sie für alle Nutzer nutzbar und verständlich ist
In jedem Beitrag werden Techniken beschrieben, die Sie direkt auf Ihre eigenen Anwendungen anwenden können.
Was ist nicht in dieser Sammlung?
In dieser Sammlung wird davon ausgegangen, dass Sie mit Angular und TypeScript bereits vertraut sind. Wenn Sie sich mit dieser Technologie noch nicht auskennen, lesen Sie die Dokumentation zu TypeScript und den Leitfaden Erste Schritte mit Angular auf angular.io.
Projekt starten
Mit der Angular-Befehlszeile 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 beschrieben, wie Sie erweiterte Funktionen wie serverseitiges Rendering und Unterstützung bei der Bereitstellung hinzufügen können.
Befehlszeile einrichten
Installieren Sie zuerst die Befehlszeile global und prüfen Sie, ob Sie die neueste Version haben, indem Sie die folgenden Befehle ausführen:
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 lokal installieren und mit dem Befehl npx ausführen:
npm i @angular/cli
npx ng --version
Projekt erstellen
Führen Sie folgenden Befehl aus, um ein neues Projekt zu erstellen:
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 der Einrichtungsprozess erfolgreich abgeschlossen ist, starten Sie Ihre Anwendung mit dem folgenden Befehl:
cd my-app
ng serve
Sie sollten jetzt unter http://localhost:4200 auf Ihre Anwendung zugreifen können.
Nächste Schritte
Im weiteren Verlauf dieser Sammlung erfahren Sie, wie Sie die Leistung, Zugänglichkeit und SEO Ihrer Angular-Anwendung verbessern können. Themen:
- Codeaufteilung auf Routenebene in Angular
- Leistungsbudgets mit der Angular CLI
- Strategien für den Routen-Prefetch in Angular
- Optimierung der Änderungserkennung in Angular
- Große Listen mit dem Angular CDK virtualisieren
- Precaching mit dem Angular Service Worker
- Routen mit Angular CLI vorab rendern
- Serverseitiges Rendering mit Angular Universal
- Web-App-Manifest mit Angular CLI hinzufügen
- Prüfung der Barrierefreiheit mit Codelyzer