Blog

Ohne die Angular CLI geht nichts mehr, bzw. es macht keinen Sinn ohne die CLI zu arbeiten. Die Angular CLI benötigt min. 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 oder Windows ist egal) führst du folgenden Befehl aus:

npm install -g @angular/cli
Dieser Befehl wird Angular herunterladen und installieren. -g sthet für global. Installiere Angular also global für alle auf Deinem System verfügbar. Die CLI selber wird über den Befehl ng gesteuert. Hier ein paar Befehle in Kurz und Standard Schreibweise:
ng v == ng version
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 Befehl

ng new mein-app-name
ein neues Angular Projekt erstellen. Nun mit cd in den Projektordner wechseln und mit
ng serve
wird die Angular-App gestartet. Aber als Profi empfehle ich die Verwendung von
npm start
Warum ? Wird npm start anstatt ng serve verwendet, wird sich Angular alle lokalen Abhänigkeiten suchen und nicht die globalen. Das ist im Team besonders sinnvoll. So kann einfach eine Kopie des Projektes an ein Teammitglied gesendet werden und es ist sichergestellt, das das Projekt bei dem Team Member auch funktioniert. Auf der Konsole steht nun:
** NG Live Development Server is running on http://localhost:4200. **
Ein weiteres spannendes Projekt ist das Angular-Starter-Paket von PatrickJS. Du kannst es hier finden: https://github.com/PatrickJS/angular-starter

Das Herzstück deiner neuen App. Grundsätzlich ist Angular 2+ in Komponenten aufgeteilt. Das macht es sehr Modular. Das Herzstück der App ist die Datei app.module.ts, wobei es sich dabei nur um eine Namensempfehlung handelt. Dort laufen alle Funktionalitäten auf unterschiedliche Weise zusammen. Alle weiteren Dateien werden über Imports eingebunden.
// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
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 Import-Zeilen geben an, welche Module aus dem Angular-Code verwendet werden. Das BrowserModule dient dazu, die App 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 zu laden. Außerdem wird die Eltern-Komponente namens „AppComponent" geladen, welche alle weiteren App-Komponenten als Kind-Komponente enthält.