Möchten Sie Ihre Angular-Website so schnell und einfach 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 verwaltbare, 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 enthält diese Sammlung?
Diese Sammlung konzentriert sich auf fünf Hauptbereiche zur Optimierung einer Angular-Anwendung:
- Verbessern der Leistung Ihrer App, um die Nutzer-Conversion und das Engagement zu erhöhen
- Verbessern Sie die Zuverlässigkeit Ihrer Anwendung in schlechten Netzwerken, indem Sie Assets mit dem Angular-Service-Worker vorab im Cache speichern.
- Machen Sie Ihre Anwendung mithilfe von Pre-Rendering und serverseitigem Rendering für Suchmaschinen und Social-Media-Bots sichtbar
- Installation einer App, um der App eine ähnliche Nutzererfahrung wie bei einer iOS- oder Android-App zu bieten
- Verbesserung der Barrierefreiheit Ihrer Anwendung, damit sie für alle Nutzer nutzerfreundlich 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 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 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 dieser Sammlung wird gezeigt, wie Sie erweiterte Funktionen wie serverseitiges Rendering und Unterstützung für die Bereitstellung hinzufügen.
Befehlszeile einrichten
Installieren Sie zuerst die Befehlszeile global und prüfen Sie mit den folgenden Befehlen, ob Sie die neueste Version haben:
npm i -g @angular/cli
ng --version
Achten Sie darauf, dass durch den letzten Befehl Version 8.0.3 oder höher ausgegeben wird.
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 der Einrichtungsvorgang 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, Barrierefreiheit und SEO Ihrer Angular-Anwendung verbessern können. Folgende Themen werden behandelt:
- Codeaufteilung auf Routenebene in Angular
- Leistungsbudgets mit der Angular CLI
- Strategien für den Routen-Vorabruf in Angular
- Optimierung der Änderungserkennung in Angular
- Große Listen mit 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