Arbeiten mit Angular-CLI

angular-cli

Angular-CLI ist ein Werkzeug das euch bei dem erstellen von Angular 2 Projekt per Kommandozeile unterstützt. Neben der Projektinitialisierung gibt es auch einige Kommandos zur Erstellung von Projektdateien, den Entwicklungsmodus der dir viel Zeit erspart und einiges mehr.

Entwicklungsmodus? Der Development Server

Ein großer Vorteil der CLI ist Hot Module Reload (HMR) was uns erlaubt Änderungen sofort angezeigt zu bekommen, ohne die Seite komplett neu zu laden.

Das spart jede Menge Zeit während der Entwicklung! Vielleicht kennen einige von euch das übliche vorgehen: „Code ändern, Browser öffnen, F5 drücken, Fehler bekommen ;-)“. Mit HMR seht ihr sofort was abgeht. So startet ihr den Development Server:

ng serve

Dieser ist unter http://localhost:4200/ zu erreichen.




Dateistruktur erstellen lassen

Ein weiterer Vorteil ist Erstellung von Projektdateien z.b. Komponenten, Services, etc. Die Angular-CLI sorgt für eine einheitliche Bezeichnung der Dateien und Klassen was für mehr Konsistenz und Übersicht sorgt. Hier eine kleine Liste von den üblichen Dateien.

ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp

Bereit für die echte Welt.

Natürlich lässt man auf einem Produktionssystem nicht den Entwicklungsmodus laufen. Hierfür gibt es den build Modus der das transpiling der Typescript Dateien übernimmt und mit Hilfe von Webpack alle source Daten zu Paketen zusammensetzt. Du kannst die Anwendung dann auf jedem beliebigen Webserver übertragen.

ng build

Ich hoffe ich konnte dir ein kleinen Überblick verschaffen und wünsche dir viel Spaß mit Angular CLI.

Woher komm’s

Angular CLI

1 Trackback / Pingback

  1. Single Page Application mit Angular erstellen - workwithtech.de

Kommentare sind geschlossen.