Einführung in die Angular 2+ CLI
Vorab: Ich behandle hier ausschliesslich Angular ab Version 2. Dieses Tutorial hat nichts mit AngularJS gemein.
Ohne die Angular CLI kan nein Projekt nicht vernünftig bearbeitet werden, bzw. es macht keinen Sinn ohne die CLI zu arbeiten. Die Angular CLI benötigt mindestens NodeJS mit NPM in seiner aktuellen Version. Das Konsolen-Tool erleichtert die Arbeit mit Angular ungemein, da man darüber automatisch eine funktionierende Instanz erstellen und diese sowohl testen, kompilieren, starten als auch deployen kann.
Die Installation verläuft wie folgt. Auf der Konsole (Ob Linux, Mac oder Windows ist dabei egal) führst du den folgenden Befehl aus:
Dieser Befehl wird Angular herunterladen und installieren. Dabei steht -g für global. -g installiert Angular also global und ist somit für jeden auf dem System verfügbar. Die CLI selber wird über den Befehl ng gesteuert.
Hier ein paar Befehle in Kurz und Standard Schreibweise. Damit kann man schon eine Menge erreichen.
ng g == ng generate
ng s == ng serve
ng t == ng test
ng b == ng build
Sobald die Angular-CLI installiert wurde, lässt sich mit dem folgenden Befehl ein neues Angular Projekt erstellen.
Anschliessend wechselst du mit dem Befehl cd in den Projektordner. Hier gibts du folgendes ein:
Mit "ng server" wird die Angular-App gestartet. Es öffnet sich ein Browser, mit dem aktuellen Projekt im Broserfenster.
Als Angular Profi empfehle ich allerdings die Verwendung von:
Warum? Wird "npm start" anstatt "ng serve" als Startbefehl verwendet, wird sich Angular alle lokalen Abhänigkeiten suchen und nicht die globalen. Das ist besonders sinnvoll wenn an einem Projekt im Team gearbeitet wird. So kann einfach eine Kopie des Projektes an ein Teammitglied gesendet werden und es ist sichergestellt, dass das Projekt bei dem Team Mitglied auch tatsächlich funktioniert.
Nach den "npm start" oder "ng serve" ausgeführt wurde, steht auf der Konsole:
Herzlichen Glückwunsch. Dein ersten Angular Projekt ist gestartet worden. Werden Änderungen am Code vorgenommen, wird sich dein Browser automatisch aktualisieren. Das ist eines der Vorteile von dem Framework.
Ein spannendes "StarterProjekt" aus der Szene ist das Angular-Starter-Paket von PatrickJS. Du kannst es hier laden:
https://github.com/PatrickJS/angular-starter
Dabei kann das Starterprojekt das Herzstück deiner neuen App sein.
Grundsätzlich ist Angular 2+ in Komponenten aufgeteilt. Das macht es sehr Modular. Das zentrale Herzstück der App ist die Datei "app.module.ts", wobei es sich dabei nur um eine Namensempfehlung handelt. Auch hier könntest du einen anderen Namen wählen. Wir bleiben aber hier bei den Standardnotierungen. In der "app.module.ts" laufen alle Funktionalitäten auf unterschiedliche Weise zusammen. Alle weiteren Dateien werden hier über Imports eingebunden.
Bsp. app.module.ts:
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
Die Importzeilen geben an, welche Module aus dem Angular-Code verwendet werden sollen. Das BrowserModule dient dazu, die App im Browser zu starten, während das NgModule das „Hauptmodul" der App ist. Der Basiscode stellt an dieser Stelle noch zwei häufig verwendete Module bereit: Forms für Formulare und Http für HTTP-Requests, um Daten laden zu können. Außerdem wird die Eltern-Komponente namens „AppComponent" geladen, welche alle weiteren App-Komponenten als Kind-Komponente enthält.