Der Einstieg für Angular ist nicht trivial und bedingt sehr gute Kenntnisse von HTML, CSS und Javascript.
Dieser Blog zeigt das Setup eine einfachen Hello World Angular Projektes.
Am besten installieren Sie die LTS Version. Verifizeren Sie nach der Installation die NodeJS Version wie folgt über die Command Line Konsole:
node --version
Die Anfrage sollte die installierte NodeJS Version anzeigen, z.B:v14.17.1
npm install -g @angular/cli
Wir verifzieren die Angular CLI Installation mit dem folgenden Befehl:ng --version
Die Ausgabe zeigt detailliert die Angular Packages an:Angular CLI: 12.1.0
Node: 14.17.1
Package Manager: npm 6.14.13
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1201.0 (cli-only)
@angular-devkit/core 12.1.0 (cli-only)
@angular-devkit/schematics 12.1.0 (cli-only)
@schematics/angular 12.1.0 (cli-only)
ng new helloworldapp
Wir beantworten alle Fragen mit der Die Angular Applikation wird erstellt und die Packages geladen. Am Schluss sollte die folgenden Dateistruktur enthalten sein:
Der Folder enthält zugleich auch die Daten für das Git Repository, mit dem Parameter --skip-git wird solches nicht erstellt.
Mehr Infos zum Befehl ng new finden Sie unter dem Link https://angular.io/cli/new.
ng serve
Öffnen Sie nach der Ausführung Ihren Browser und navigieren Sie zu localhost:4200. Wenn eine andere Anwendung auf dieser Adresse läuft, können Sie den Befehl einfach ausführen:
ng serve --port
Es wird einen Port generieren, zu dem Sie navigieren können. Normalerweise sieht der Browser etwa so aus:
Die Applikation wurde für die Distribution wie folgt gebuildet:
ng build
Der Build erstellt die Anwendung im dist Verzeichnis, solches kann auf dem Web Server installiert und ausgeführt werden.npm install
Das Script muss im Folder der helloworldapp ausgeführt werden. Danach können Sie die Anwendung wieder starten:ng serve