Erstellen von Angular-Anwendungen und weitere Ressourcen
Dieser abschließende Angular-Artikel behandelt, wie Sie eine App bereit für die Produktion erstellen und bietet weitere Ressourcen, um Ihre Lernreise fortzusetzen.
| Voraussetzungen: | Vertrautheit mit den grundlegenden Sprachen HTML, CSS und JavaScript, sowie Kenntnisse über den Umgang mit der Terminal-/Befehlszeile. |
|---|---|
| Ziel: | Erlernen, wie Sie Ihre Angular-App erstellen können. |
Erstellen Ihrer fertigen Anwendung
Da Sie nun mit der Entwicklung Ihrer Anwendung fertig sind, können Sie den Befehl build der Angular CLI ausführen.
Wenn Sie den Befehl build in Ihrem todo-Verzeichnis ausführen, kompiliert Ihre Anwendung in ein Ausgabeverzeichnis namens dist/.
Führen Sie im todo-Verzeichnis den folgenden Befehl in der Befehlszeile aus:
ng build -c production
Die CLI kompiliert die Anwendung und legt die Ausgabe in einem neuen dist-Verzeichnis ab.
Das Flag --configuration production/-c production bei ng build entfernt alles, was Sie für die Produktion nicht benötigen.
Bereitstellen Ihrer Anwendung
Um Ihre Anwendung bereitzustellen, können Sie den Inhalt des dist/my-project-name-Ordners auf Ihren Webserver kopieren.
Da diese Dateien statisch sind, können Sie sie auf jedem Webserver hosten, der Dateien bereitstellen kann, wie zum Beispiel:
- Node.js
- Java
- .NET
Sie können jedes Backend verwenden, wie Firebase, Google Cloud oder App Engine.
Lokal hosten
Zum Spaß können Sie die erstellte App auf Ihrem Rechner mit dem http-server Paket hosten, indem Sie nach einem Build den folgenden Befehl ausführen:
npx http-server ./dist/todo/browser/ -o
Dieser Befehl bedient das dist/todo/browser-Verzeichnis auf Port 8080, sodass Sie http://127.0.0.1:8080 in Ihrem Browser öffnen können, um die laufende App zu sehen.
Der HTTP-Server ermöglicht es Ihnen auch, auf die App über die IP-Adresse Ihres Computers von jedem anderen Gerät in Ihrem lokalen Netzwerk zuzugreifen, und diese Adresse wird in der Konsole unter der Adresse 127.0.0.1 aufgelistet.
Was kommt als Nächstes
Zu diesem Zeitpunkt haben Sie eine grundlegende Anwendung erstellt, aber Ihre Angular-Reise hat gerade erst begonnen. Sie können mehr erfahren, indem Sie die Angular-Dokumentation erkunden, wie zum Beispiel:
- Tutorials: Ein ausführliches Tutorial, das Angular-Funktionen hervorhebt, wie die Verwendung von Diensten, Navigation und das Abrufen von Daten von einem Server.
- Die Angular Komponenten Leitfäden: Eine Artikelserie, die Themen wie Lebenszyklus, Komponenten-Interaktion und View-Kapselung behandelt.
- Die Formulare Leitfäden: Artikel, die Ihnen beim Erstellen reaktiver Formulare in Angular, der Validierung von Eingaben und dem Erstellen dynamischer Formulare helfen.