Erstellen von Angular-Anwendungen und weitere Ressourcen
Dieser letzte Angular-Artikel behandelt, wie Sie eine App für die Produktion bereitstellen und bietet weitere Ressourcen, um Ihre Lernreise fortzusetzen.
| Voraussetzungen: | Vertrautheit mit den Kernsprachen HTML, CSS und JavaScript, Kenntnisse im Umgang mit dem Terminal/Befehlszeile. |
|---|---|
| Ziel: | Zu lernen, wie Sie Ihre Angular-App erstellen. |
Erstellen Ihrer fertigen Anwendung
Nachdem Sie die Entwicklung Ihrer Anwendung abgeschlossen haben, können Sie den build-Befehl der Angular CLI ausführen.
Wenn Sie den build-Befehl in Ihrem todo-Verzeichnis ausführen, wird Ihre Anwendung in ein Ausgabeverzeichnis mit dem Namen dist/ kompiliert.
Führen Sie im todo-Verzeichnis den folgenden Befehl in der Befehlszeile aus:
ng build -c production
Die CLI kompiliert die Anwendung und platziert die Ausgabe in einem neuen dist-Verzeichnis.
Der Flag --configuration production/-c production mit ng build beseitigt Dinge, die Sie für die Produktion nicht benötigen.
Bereitstellen Ihrer Anwendung
Um Ihre Anwendung bereitzustellen, können Sie den Inhalt des Ordners dist/my-project-name 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 hosten, indem Sie das Paket http-server verwenden und nach dem Ausführen eines Builds folgenden Befehl ausführen:
npx http-server ./dist/todo/browser/ -o
Dieser Befehl dient dem dist/todo/browser-Verzeichnis auf Port 8080, sodass Sie http://127.0.0.1:8080 in Ihrem Browser öffnen können, um die App in Betrieb zu sehen.
Der HTTP-Server ermöglicht es Ihnen auch, von jedem anderen Gerät in Ihrem lokalen Netzwerk aus auf die App zuzugreifen, indem die IP-Adresse Ihres Computers verwendet wird. Diese Adresse wird unter der Adresse 127.0.0.1 in der Konsole aufgeführt.
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 die Funktionen von Angular hervorhebt, wie z.B. die Verwendung von Services, Navigation und das Abrufen von Daten von einem Server.
- Die Angular Components Leitfäden: Eine Reihe von Artikeln, die Themen wie Lebenszyklus, Komponenteninteraktion und View-Kapselung behandeln.
- Die Forms Leitfäden: Artikel, die Sie durch die Erstellung reaktiver Formulare, die Validierung von Eingaben und den Aufbau dynamischer Formulare in Angular führen.