0.2 AngularJS2Setup
Sie kennen die Sprachkonstrukte von ECMAScript 6 und TypeScript.
Am Ende des Kapitels läuft Ihre Entwicklungsumgebung WebStorm und transpiliert TypeScript
nach ECMAScript, so dass es im mittels Webserver ausgeliefert werden kann.
Eine erste AngularJS Komponente Hello World läuft.
Installieren Sie NodeJS und anschließend
WebStorm (Version 2016).
nodeund npmsind nun als neue Kommandos in Ihrem Terminal verfügbar.
Wenn nicht, stellen Sie sicher, dass node in Ihrer $PATH Umgebungsvariable ist (Windows), also
im Terminal gefunden wird, wenn Sie node -v eingeben.
Legen Sie ein neues Projekt an vom Typ empty project .
Legen Sie nun im Hauptverzeichnis Ihres neuen Projektes nacheinander drei neue Dateien an: package.json, tsconfig.json und typings.json. Diese sind für Folgendes:
Die Datei enthält die wesentlichen Projektinformationen für node.js.
Der Paketmanager npm ließt daraus aus, welche Abhängigkeiten (dependencies) Ihr Projekt hat.
Kopieren Sie den folgenden Dateiinhalt in die package.json.
Tag 0_Setup_files
{
"name": "ng2-tutorial-de",
"version": "0.1.0",
"description": "A base config for kickstarting ng2 tutorial code",
"private": true,
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"test": "echo 'unimplemented'",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"keywords": [],
"author": "[your name here]",
"license": "MIT",
"repository": {
"type" : "git",
"url" : "https://github.com/jkonert/ng2-tutorial-de.git"
},
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"bootstrap": "^3.3.7",
"systemjs": "0.19.39",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"lodash": "^4.16.2",
"rimraf": "^2.5.4"
}
}Was steckt darin?
Die Datei enthält im JSON Format zunächst Metadaten (name, description..).
Weiter unten die Abhängigkeiten (dependencies). Diese werden später (nicht jetzt!)
auf der Konsole mit npm installdurch npm aus der Datei ausgelesen und entsprechend
heruntergeladen und als Module für Ihr Projekt installiert.
Unter scripts geben Sie in start die Kommandos an, welche bei einem npm start
ausgeführt werden sollen. Das sind hier einige.
Mit tscwird der TypeScript Kompiler gestartet, um aus .ts Dateien .js Dateien zu machen.
Außerdem sollen parallel (concurrently) in extra Threads über
npm run tsc:w und npm run lite die beiden Skripte für den TypeScript-Kompiler
im Bobachtungsmodus und der Webserver lite gestartet werden.
Damit wird bei jeder Änderung einer .ts Datei automatisch die passende .js Datei aktualisiert.
Der Webserver lite-server ist praktisch für AngularJS,
da er auch mit dem Routing richtig umgehen kann (dazu später mehr).
Die devDependencies geben Module an, die nur während der Entwicklung nötig sind, nicht aber im Produktivbetrieb. TypeScript wird nicht benötigt für den Betrieb, da dann schon alle Dateien als .js vorliegen. Ebenso der Test-Webserver lite-server.
Vermutlich sind Ihnen die Abhängigkeiten mit "@types" aufgefallen.
Typings sind Module, welches für npm-JavaScript-Module die Information nachläd,
welche Datentypen Parameter und Rückgaben von JavaScript-Modulen haben.
Das ist eine wichtige Information für Ihre Entwicklungsumgebung WebStorm,
um in TypeScript Warnungen anzuzeigen, wenn Sie bspw. ausversehen einen String
statt einer Number übergeben.
Für sehr viele .js-Frameworks gibt es fertige @types Module mit Typings zum Download.
Aktuell braucht das Projekt (nur) die Informationen über Methoden und Objekte
von node.js und den nativen JavaScript Elementen (Array, Object, Function, ...).
Mit dieser Datei steuern Sie das Verhalten Ihres TypeScript Transpilers. Liegt keine solche Datei vor, werden die Standardeinstellungen benutzt. Folgenden Inhalt geben Sie für unser AngularJS Tutorial an: Tag 0_Setup_files
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true
}
}Was steckt dahinter?
Es werden Kompiler-Optionen angebenen.
Interessant ist target, womit Sie angeben ob sie ECMAScript5 (es5)
oder ESCMAScript6 (es6) als Ausgabe-JavaScript in den .js Dateien haben wollen.
Mit module wählen Sie das System mit welchem Sie die Modularisierung umsetzen möchten.
Nur ECMAScript6 bringt nativ Modularisierungs-Unterstützung über import/export mit,
für ECMAScript5 nutzen wir hier SystemJS,
daher steht hier "system".
Führen Sie nun auf der Konsole im Projektordner npm install aus.
Es werden alle dependencies-Module und devDependencies-Module installiert. Fertig.
Ihr Ordner-Inhalt sollte nun ca. so aussehen (bis auf die .gitignore Dtei):
Das Setup ist nun fertig. Legen Sie jetzt einen Ordner appan
und darin eine Datei app.component.ts.
An der Endung sehen Sie: Es wird die erste TypeScript-Datei, die Sie schreiben.
Namenskonventionen Um Probleme mit Groß/Kleinschreibung in GIT zu vermeiden, schreiben Sie alle Dateinamen klein. Nutzen Sie eine Datei pro Komponente (od. Klasse). Die Klassennamen sind CamelCase. Benennen Sie die passende Datei dazu in lower-dash-case. Beispiele: AppComponent, HeroDetailComponent, HeroInterface werden zu app.component.ts, hero-detail.component.ts, hero-interface.ts. Ein ".component" schreiben Sie im Namen dazu, um zu signalisieren, dass es eine ng2-Komponente ist.
Kopieren sie folgenden Code für Ihre erste Hello World Komponente in die app.component.ts: Tag 0_Setup_files
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
export class AppComponent {
}Was steckt dahinter?
AngularJS liefert schon diverse Komponenten mit.
So auch die Annotation (Decorator) @Component, welcher über import aus dem Angular-Core geladen wird.
Angular-Komponenten sind nicht anderes als normale Klassen (hier class AppComponent).
Den Namen können Sie frei wählen; bspw. auch class HelloWorldComponent.
Die Besonderheiten von Angular kommen zum Tragen durch die Verwendung der Annotation.
Bei @Component geben Sie ein Konfigurations-Objekt an,
welches die Attribute selector und template enthält.
Mit selector geben Sie an, welcher Tag (Direktive) im HTML-Dokument später durch diese
Komponente ersetzt wird (hier im Beispiel <my-app></my-app>).
Das template gibt an, was an diese Stelle rerendert werden soll
(hier nur eine Überschrift).
Später sehen Sie, dass Sie leicht Daten zwischen ihrer Klassen-Instanz (einer AppComponent)
und dem gerenderten Template (ihr View zu dieser Component) hin/her geben können
und so Ausgaben im HTML an Attribute
Ihrer Komponenten-Instanzen gebunden werden.
WebStorm möchte den eigenen TypeScript-Kompiler aktivieren und fragt danach.
Das ist praktisch, da so alle .ts Änderungen auch gleich nach .js kompiliert werden.
Sie könnten nun aus unserer package.json die TypeScript-Kompiler wieder herausnehmen,
wenn Sie ausschließlich WebStorm verwenden würden, doch lassen Sie das zunächst unverändert,
auch wenn WebStorm nun bereits direkt .ts Datein nach .js kompiliert.
Ihre tsconfig.json wird von WebStorm berücksichtigt.
Achtung: WebStorm verwendet veralteten TypeScript-Transpiler: Daher anpassen WebStorm verwendet einen mitgeleiferten TypeScript Transpiler (v.1.8), es wird aber für AngularJSUm Probleme mit Groß/Kleinschreibung in GIT zu vermeiden, schreiben Sie alle Dateinamen klein. mindestens V2.0 gebraucht. Das können Sie leicht beheben, indem Sie in WebStorm die Einstellungen ändern. Rufen Sie im Menü
File->Settings->TypeScriptauf und setzen Sie beiTypeScript-VersionbeicustommittelsEdit...einen Pfad zum Verzeichnis im aktuellen Projekt namens.\node_modules\typescript\lib
In AngularJs werden die Komponenten, die Sie erstellen, in Modulen zusammengefasst. Module sind wie Container zu betrachten, die viele Komponenten zusammenfassen. Das macht große Projekte leider verwaltbar. Aktuell gibt es nur eine Komponente. Wir legen dennoch ein zusammenfassendes Modul an.
Legen sie neben der vorhandenen app.component.ts eine neue Datei app.module.ts an mit folgendem Inhalt:
Tag 0_Setup_files
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }Was steckt dahinter?
Die Annotation @NgModule erlaubt es, für die neue Klassen AppModule AngularJS-Eigenschaften zu definieren.
imports stellt allen Komponenten im Modul die BrowserModule zur Verfügung.
Diese erlauben u.a. Zugriff auf die DOM-API des Browsers.
declarations verwendet unsere gerade erstellte (und darüber importierte) AppComponent. Damit wird Angular
angewiesen diese Deklarationen (unsere my-app Direktive) verwendbar zu machen.
bootstrap eines NgModule gibt an, welche Komponente initial geladen werden soll beim Laden des Moduls.
Bootsrapping ist das Einbetten und Starten einer Anwendung in eine bestimmten Ausführungskontext. In unserem Falle ist es ein Web-Kontext für den Browser (ein anderes Beispiel wäre bspw. eine Laufzeitumgebung auf dem Smartphone, bspw. mittels Cordova). Um eine saubere Trennung zu haben, schreiben wir die wenigen Zeilen des Bootstrapping in eine neue Datei main.ts Tag 0_Setup_files
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);Der Bootstrapper für den Browser ist im AngularJS2-Core dabei
und braucht als Parameter nur unser Haupt-Komponente.
Angular liefert neben dem platformBrowserDynamic noch weiter Startmöglichkeiten für den Browser mit.
Unter anderem kann statt dynamischer interpretation der Angular-Dateien auch eine Version vorkompiliert
werden, die dann alle App-Dateien inkl. nur der erforderlichen AngularJS-Codeteile zusammenpackt.
Das läuft schneller im Produktivsystem. siehe (Ahead of Time Compilation)[https://angular.io/docs/ts/latest/cookbook/aot-compiler.html]
Damit die Angular-Anwendung nun auch im Browser startet,
wird der Aufruf der main.ts in eine index.html eingebettet
(Datei im Tag 0_Setup_files):
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/ng2-tutorial-de/">
<meta charset="UTF-8">
<title>ng2 Tutorial DE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<!-- and load the main.js entry file for the app (see systemjs.config) -->
<script>
System.import('app')
.then(null, console.error.bind(console))
.catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>Bei den Bibliotheken (Libraries) werden im wesentlichen SystemJS und einige
JavaScript Erweiterungen geladen, die AngularJS benutzt.
Wie wir in der tsconfig.jsonweiter oben gesehen haben,
werden alle TypeScript (.ts)-Dateien in SystemJS-kompatible Module in JavaScript kompiliert (.js).
SystemJS kann diese dann Laden.
Vor dem eigentlichen Aufruf wird für SystemJS noch eine Konfiguration (2. Configure)
aus der Datei systemjs.config.jsgeladen.
(Die Datei finden Sie im Dateiset zum
Tag 0_Setup_files.)
Darin steht für die AngularJS Komponenten und unsere app,
unter welchen Pfaden diese geladen werden können durch SystemJS.
Anschließend wird SystemJS mit der Zeile System.import('app') angewiesen
unser Anwendung (die Datei app/main.js) zu laden.
Schritt 3. (3.Display) hat im Body den Tag unserer neuen Direktive <my-app>angegeben,
welchen wir uns in unserer app.component.ts im Decorator @Componentals selector ausgesucht haben. Die komplette index.html läd noch einige weitere JavaScript-Dateien für Rückwärtskompatibilität älterer Browser und kann im Commit 4c300294 heruntergeladen werden.
Zusammenfassung
- index.html läd die Bibliothek SytemJS
- SystemJs läd dann die main.js
- main.js läd via Bootstrapping die app.module.js und diese die app.component.js
- AngularJS setzt die app.component mittels Ihres Templates an der Stelle der index.html ein, wo der selektor () bisher steht.
Die Tour-of-Heroes kommt mit ein wenig Standard-CSS daher, damit die Seite hübscher aussieht
Die passende styles.css liegt im Hauptverzeichnis des Projektes neben der index.html
und ist in dieser eingebunden (siehe oben).
- Entweder auf der Konsole via
npm startim Projektordner. Dies führt die in der package.json angegebenen Kommandos aus (tsc Kompilierung, starten des Webservers und öffnen eines Browserfensters), oder - aus WebStorm heraus: Die index.html Datei öffnen und aus dem Overlay-Menü einen der Browser auswählen.
Fehlermeldungen? Dann fügen Sie einen
<base href="/">Tag in den Kopfteil Ihrer index.html ein, ggf. muss der Pfad auch / lauten (Ersetzen Sie durch Ihren Projektnamen in Webstorm)
🐒 Ihre erste Anwendung läuft!
Ein Linter gibt Hinweise zur Code-Qualität und markiert Inhalte für Sie, bei denen Ihr Code von der Konvention (Vorgabe) abweicht. Welche Vorgaben Sie einhalten wollen, können Sie konfigurieren. Für das AngularJS2-Projekt bietet sich folgende Konfigurationsdatei tslint.json im Ihrem Projektordner an (Commit 2f399ece):
{
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces"
],
"no-duplicate-variable": true,
"no-eval": true,
"no-internal-module": true,
"no-trailing-whitespace": false,
"no-var-keyword": true,
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"quotemark": [
false,
"double"
],
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [
true,
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}Genaue Hinweise zu den möglichen Optionen und EInstellungen des TSLinters finden Sie unter https://github.com/palantir/tslint .
In WebStorm muss die Verwendung des TSLint noch aktiviert werden. File-Settings->TypeScript->TSLint->Search for tslint.json
Anschließend sehen Sie durch WebStorm Hinweise des TSLinters in Ihrem Editor, wie im folgenden Beispiel:
WebStorm bietet integriert einen Debugger für TypeScript an. Die Herausforderung ist dabei, dass Sie Haltepunkte (Breakpoints) in Ihrem TypeScript-Code setzen, jedoch im Browser JavaScrript ausgeführt wird. Damit das funktioniert, unterstützt WebStorm die nutzung sog. .map Dateien, die beim ts-js-Kompilieren mit erstellt werden.
- Legen Sie eine Neue Run-Konfiguration an (siehe Bild)
- Starten Sie dann die Ansicht im Browser über Run-Debug. Achtung: In Chrome muss noch die IntelliJ-Erweiterung für Debugging installiert werden.
- Chrome wartet dann darauf, dass Sie anhand Ihrer Haltepunkte in WebStorm debuggen bzw. den Code weiterlaufen lassen.
Das Setup von AngularJS erfordert einige Schritte, um mittels TypeScript moderne Frontend-Anwendungen zu erstellen.
Im vorliegenden Kapitel wurde beschrieben, wie Sie eine erste AngularJS Komponente mittels Verwendung von @Component
erstellen und diese in ein Modul mittels @NgModule einbetten.
Über eine Startdatei main.ts wurde das erstellte AppModule via Bootstrapping für den Browser geladen.
Damit das stattfindet, ist eine index.html-Datei erforderlich, welche mittels SystemJS die main.js der Anwendung läd.,
AngularJS sucht dann die passenden Direktiven im HTML (in diesem Falle den Tag <my-app>) und fügt dort
das gerenderte Template der AppComponent ein.
Damit aus den TypeScript .ts-Dateien auch JavaScript .js-Dateien erstellt werden, wird ein TypeScript-Transpiler
konfiguriert, der entweder durch die npm start- Skripte oder durch WebStorm angestoßen wird.
Abschließend ist dieses Kapitel noch vertiefend auf den TSLint und das Debugging von TypeScript eingegangen.
Diese ersten Schritte mit AngularJS2 basieren auf dem Quickstart Tutorial und gehen darüber hinaus.