Erstellen von Angular-Anwendungen und weitere Ressourcen
Hinweis: Die MDN-Artikel zu Angular werden nicht mehr gepflegt und werden in 3 Monaten (bis zum 20. August 2026) von der Website entfernt. Der Inhalt wird im MDN Museum archiviert. Weitere Informationen finden Sie in dieser Diskussion.
Dieser letzte Angular-Artikel behandelt, wie Sie eine für die Produktion bereite App erstellen, und bietet weitere Ressourcen, um Ihre Lernreise fortzusetzen.
| Voraussetzungen: | Vertrautheit mit den Kernsprachen HTML, CSS und JavaScript sowie Kenntnisse über die Eingabeaufforderung/Terminal. |
|---|---|
| Ziel: | Erlernen, wie man Ihre Angular-App erstellt. |
Erstellen Ihrer fertigen Anwendung
Nachdem Sie nun Ihre Anwendung entwickelt haben, können Sie den Angular CLI-Befehl build ausführen.
Wenn Sie den build-Befehl in Ihrem todo-Verzeichnis ausführen, wird Ihre Anwendung in ein Ausgabeverzeichnis namens dist/ kompiliert.
Führen Sie im todo-Verzeichnis den folgenden Befehl in der Eingabeaufforderung aus:
ng build -c production
Die CLI kompiliert die Anwendung und legt die Ausgabe in einem neuen dist-Verzeichnis ab.
Das --configuration production/-c production Flag mit ng build entfernt Dinge, die 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 in der Lage ist, Dateien zu servieren, wie zum Beispiel:
- Node.js
- Java
- .NET
Sie können jeden Backend-Dienst wie Firebase, Google Cloud oder App Engine verwenden.
Lokal hosten
Zum Spaß können Sie die erstellte App auf Ihrem Rechner mit dem http-server-Paket hosten, indem Sie folgenden Befehl ausführen, nachdem Sie einen Build ausgeführt haben:
npx http-server ./dist/todo/browser/ -o
Dieser Befehl serviert das Verzeichnis dist/todo/browser auf Port 8080, sodass Sie http://127.0.0.1:8080 in Ihrem Browser öffnen können, um die App laufen zu sehen.
Der HTTP-Server ermöglicht es Ihnen auch, von jedem anderen Gerät in Ihrem lokalen Netzwerk auf die App zuzugreifen, und diese Adresse wird in der Konsole unter der Adresse 127.0.0.1 aufgelistet.
Was kommt als Nächstes
An diesem Punkt haben Sie eine grundlegende Anwendung erstellt, aber Ihre Angular-Reise hat gerade erst begonnen. Sie können mehr lernen, indem Sie die Angular-Dokumentation erkunden, wie zum Beispiel:
- Tutorials: Ein ausführliches Tutorial, das Angular-Features wie die Verwendung von Diensten, die Navigation und das Abrufen von Daten von einem Server hervorhebt.
- Die Angular Components Leitfäden: Eine Serie von Artikeln, die Themen wie Lebenszyklus, Komponenteninteraktion und View-Kapselung abdecken.
- Die Forms Leitfäden: Artikel, die Sie durch den Aufbau von reaktiven Formularen in Angular führen, die Eingabe validieren und dynamische Formulare erstellen.
Zusammenfassung
Das ist es für den Moment. Wir hoffen, dass Sie Spaß mit Angular hatten!