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 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:
- Leistung Ihrer App verbessern, um mehr Nutzer-Conversions und -Interaktionen zu erzielen
- 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
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
Mit diesem Befehl werden die ersten Dateien und die Ordnerstruktur für Ihre Anwendung erstellt und die erforderlichen Node-Module installiert.
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 und die SEO Ihrer Angular-Anwendung verbessern. Folgendes ist abgedeckt:
- Codeaufteilung auf Routingebene in Angular
- Leistungsbudgets mit der Angular-Befehlszeile
- 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 der Angular-Befehlszeile hinzufügen