Building Angular applications and further resources
Dieser abschließende Angular-Artikel behandelt, wie Sie eine für die Produktion bereite App erstellen und bietet Ihnen zusätzliche Ressourcen, um Ihre Lernreise fortzusetzen.
| Voraussetzungen: | Vertrautheit mit den grundlegenden HTML, CSS und JavaScript Sprachen, Kenntnisse des Terminals/Befehlszeile. |
|---|---|
| Ziel: | Erlernen, wie Sie Ihre Angular-App erstellen. |
Erstellen Ihrer fertigen Anwendung
Nachdem Sie die Entwicklung Ihrer Anwendung abgeschlossen haben, können Sie den Angular CLI-Befehl build ausführen.
Wenn Sie den Befehl build in Ihrem todo-Verzeichnis ausführen, wird Ihre Anwendung in ein Ausgabeverzeichnis namens dist/ kompiliert.
Im todo-Verzeichnis führen Sie den folgenden Befehl in der Befehlszeile aus:
ng build -c production
Die CLI kompiliert die Anwendung und legt die Ausgabe in ein neues dist Verzeichnis.
Das --configuration production/-c production Flag mit ng build entfernt Elemente, die Sie für die Produktion nicht benötigen.
Bereitstellung 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 Computer mit dem http-server Paket hosten, indem Sie den folgenden Befehl nach einem Build ausführen:
npx http-server ./dist/todo/browser/ -o
Dieser Befehl stellt das dist/todo/browser Verzeichnis auf Port 8080 bereit, 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, von jedem anderen Gerät in Ihrem lokalen Netzwerk auf die App zuzugreifen, und diese Adresse wird im Konsolenfenster 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:
- Tour of Heroes: Ein umfassendes 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 Reihe von Artikeln, die Themen wie Lebenszyklus, Komponenteninteraktion und Ansichtskapselung behandeln.
- Die Formulare Leitfäden: Artikel, die Sie durch den Aufbau reaktiver Formulare in Angular führen, Eingaben validieren und dynamische Formulare erstellen.