In meinen aktuellen Projekt wird das UI als SinglePage WebApp implementiert. Da es sich um eine komplette Neuentwicklung handelt wird mit Blick auf die Zukunft Angular als UI-Framework verwendet. (Ich verwende hier den Begriff Angular für die Versionen 2 – 4+, da diese kompatibel miteinander sind.)

Ich will hier meine Erfahrungen mit Angular  weitergeben. Für diejenigen die bereits mit AngularJS(1) arbeiten, habe ich leider eine schlechte Nachricht: Angular  verwendet größtenteils neue Paradigmen und Konzepte wie komponentenbasierte Entwicklung, ein eventbasiertes Programmiermodell auf Basis von RxJS und als Entwicklungssprache Typescript. Dedizierte Controller und Scopes wurden über Bord geworfen. Aber keine Angst, so schlimm ist es nicht 😉

Getreu dem Motto

Der beste Code ist der den man nicht schreiben muss

verfolgt Angular einen komponentenbasierten Ansatz. Komponenten in Angular sind mit den Direktiven aus AngularJS zu vergleichen und sind in sich gekapselte Bestandteile des UI. Einmal geschriebene Komponenten lassen sich sehr einfach in verschiedene Bereiche der Anwendung wiederverwenden. Angular verfolgt dabei den Ansatz des kommenden W3C Standards der Web Components und ist zu diesen kompatibel. Damit könnte man bei Bedarf ohne grosse Schmerzen Angular durch ein anderes Komponentenframework wie z.B. polymer.js ersetzen.

Ich werde hier die grundlegenden Konzepte anhand eines kleinen Beispiels vorstellen, und dann in späteren Beiträgen etwas mehr in die Tiefe gehen.

Wie bei einem AngularJS-Projekt sind einige vorbereitende Schritte nötig um die entsprechenden Entwicklungstools zu installieren. Klar, auch hier braucht man wieder das obligatorische nodejs und npm. Wer es noch nicht nicht installiert hat sollte dies nun nachholen.

Hier wird beschrieben wie man node auf verschiedenen Plattformen installiert: https://nodejs.org/en/download/

Ein Angular-Projekt kann auf verschiedenen Wegen aufgesetzt werden: Manuell, unter Verwendung des Angular-Seed-Projekts oder per Angular-Cli

Manuelle Installation

Bei der manuellen Installation sind Folgende Schritte  auszuführen:

  • Projektverzeichnis anlegen 
    • mkdir angular2-start
  • tsconfig.json für den Typescriopt-Compiler anlegen
  • typings.json für fehlende Typescript Definition Files
  • package.json für Paket-Abhängigkeiten erstellen

Die Inhalte der Dateien können von der Angular2-Quickstart Seite kopiert werden.  https://angular.io/docs/ts/latest/quickstart.html

Wenn die Dateien erstellt sind können die Packages mit

npm install

installiert werden.

Angular2-Seed

Um sich diese manuellen Schritte zu sparen kann man auch das angular2-seed Projekt verwenden, welches ein komplettes Projektgerüst, inklusive Testumgebung für Karma und protractor, enthält.

Dazu das angular2-seed Projekt von Github clonen

git clone --depth 1 https://github.com/mgechev/angular2-seed.git 
\ angular2-start
 
cd angular2-start
 
# Paketabhängigkeiten installieren
npm install
 
# lokalen http-server mit live-reload starten und Seite im Browser öffnen
npm start

Angular-cli

angular-cli ist ein Kommandozeilentool mit dem man schnell ein Angular-Projekt aufsetzen kann, sowie per Scaffolding Komponenten, Routen, Klassen, Interfaces und Services erzeugen kann. Das Vorgehen ist ähnlich wie bei Rails, Grails oder anderen Scaffolding-Tools. Zu angular-cli werde ich noch einen eigenen Blog-Eintrag veröffentlichen. Weitere Informationen findet man auf der Projektseite https://cli.angular.io

Für das Projektsetup reichen erstmal folgende Befehle:

# angular-cli installieren
npm install -g angular-cli
 
# Projekt anlegen
ng new PROJECT_NAME
 
cd PROJECT_NAME
 
# HTTP-Server starten
ng serve

Der Server  sollte dann unter http://localhost:4200/ zu erreichen sein.

 

Welche der Methoden zum Projektsetup man wählt ist eher Geschmacksache. angular-cli bietet den Vorteil das per Scaffolding schnell Blueprints von Komponenten, Routen usw. erzeugt werden können.

Das wars erstmal zur Installation. Im nächsten Beitrag  gebe ich eine kleine Einführung in Typescript.