Angular-CLI, das mächtige Tool, für Angular -Anwendungen

Angular 2 erschien im Herbst 2016, es wurde komplett neu geschrieben, versprach mehr Performance und bessere Kompatibilität zu Webstandards. Mit der neuen Version Angular 4, die am 23. März 2017 erschien, hielt das Team Ihr Versprechen, die Angular-Anwendungen kleiner und noch schneller zu machen. Wer jedoch zu beginn einmal eine Angular-App manuell konfiguriert und eingerichtet hat, weis wie trickreich die ganze Geschichte es sein kann. Deswegen stelle ich hier Angular-CLI vor.

Ein Angular-CLI-Projekt ist das Fundament für schnelle Tests, Experimente und Enterprise-Lösungen.

Gute Tools beschleunigen nicht nur die Entwicklung, sondern vereinfachen auch die Pflege.
Angular CLI ist ein Befehlszeilen-Interface-Tool, dass ein Angular-Projekt erstellen, Dateien generieren
und eine Vielzahl von laufenden Entwicklungsaufgaben erledigen kann.

Eine neu Initialisierte Anwendung über Angular-CLI befolgt bereits die „Best Practices“ und hält sich an die Style Guide-Empfehlungen.

Installation

Vorinstallationsanforderungen für Angular-CLI sind lediglich Node.js®6.9.x und npm 3.x.x.

Vergewissert euch indem ihr  node –v && npm –v  ausführt.
$  npm -v && node –v                                       
Ausgabe:
  3.10.9                                
  v6.9.2
                                                                 

Angular-CLI kann dann einfach über über die Kommandozeile installiert werden.
npm install @angular/cliglobal          

Schnell und einfach lässt sich nun, über ng mit den new Befehl, ein neues Angular-Projekt erstellen.
Vorher noch in ein geeignetes Verzeichnis Navigieren.
cd c:\Angular-CLI-Test              
ng new mein-angular-cli-projekt     

$  cd mein-angular-cli-projekt                       

Beim neu erzeugen ist etwas Geduld gefragt.
Die meiste Zeit braucht hier die Installation der npm-Pakete.

Projektaufbau

Der Projektaufbau ist befolgt „Best Practices“ und hält sich an die Style Guide-Empfehlungen.

So lebt die Anwendung im src-Ordner.
Alle Angular -Komponenten, -Vorlagen, -Stile, -Bilder und alles andere was die App sonst noch so braucht kommt hier rein.

Alle Dateien außerhalb des src-Ordners sollen den Aufbau unterstützen (build, test, deploy, etc.).

Generieren von Angular -Komponenten

Genauso simpel ist es mit Angular-CLI Komponenten usw. sich erzeugen zu lassen.
Dazu muss man sich in einem CLI-Projekt befinden und mit den ng generate Befehl

$  ng generate component weitereKomponente                                   
Ausgabe:
 create src\app\weitere-komponente\weitere-komponente.component.css           
 
create src\app\weitere-komponente\weitere-komponente.component.html          
 create src\app\weitere-komponente\weitere-komponente.component.spec.ts       
 create src\app\weitere-komponente\weitere-komponente.component.ts            
 update src\app\app.module.ts
                                                 

Wenn mittels generate eine neue Komponente erzeugen wird, wird Angular-CLI in der app.module.ts, automatisch auf Komponenten, Direktiven und Pipes verweisen, die über generate erzeugt wurden.                                

Starten der Anwendung

Aus dem CLI–Projekt Verzeichnis heraus, wird die Anwendung gestartet.

Der Befehl ng serve baut die Anwendung auf und startet einen Webserver. Die Dateien werden überwacht, sobald Änderungen an einer Datei vornehmen werden, wird die App neu Aufgebaut.
$   ng serve --port 4200 --open                              

Mit der Option --open (oder nur -o) öffnet automatisch den Browser auf http://localhost:4200/
Mit der Option --port ( oder nur –p) kann ein bestimmter Port ausgewählt werden


Eine komplette Dokumentation von Angular-CLI findet Ihr unter https://cli.angular.io/

Viel Spaß beim testen und ausprobieren.

Kommentare sind geschlossen