9. Angular CLI
Installiert alle benötigten Abhängigkeiten.
Legt eine Projektstruktur an.
Stellt eine Entwicklungsumgebung zur Verfügung.
Kommandos zum Scaffolding.
Kommandos zum Bauen der Applikation.
10. Angular CLI
ng serve: liefert die Applikation auf localhost:4200 aus
Proxykonfiguration für Backend möglich.
ng build: baut die Applikation für den Produktivbetrieb
12. 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';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
13. Module
declarations: Komponenten und Direktiven
imports: Weitere Module importieren
providers: Global im Modul verfügbare Services
bootstrap: Die Bootstrapping Komponente angeben
19. Komponenten
Eine Komponente pro Datei.
Pro Komponente ein Verzeichnis.
Dateiname: <Bezeichnung>.component.ts
add-list.component.ts
20. Komponenten
Selektoren prefixen - z.B. mit Applikations-Shortcut.
Komponenten an Elemente binden. Attribute, Klassen und IDs
sind zwar möglich, sollte man aber nicht nutzen.
21. Templates
import { Component } from '@angular/core';
@Component({
selector: 'add-list',
template: ‘<div>Hello World</div>‘,
})
export class AddListComponent {
}
Bei sehr kleinen Komponenten können die Templates inline
erzeugt werden. Im Normalfall liegen sie aber in einer eigenen
Datei.
22. Styles
Angular erlaubt es Styles pro Komponente zu erzeugen.
Diese gelten dann nur für die Komponente.
Styles können auch inline oder in einer separaten Datei
geschrieben werden
27. Darstellung von
Informationen
Wir arbeiten mit Typescript, also können wir auch Klassen für
unsere Datenstrukturen erstellen.
export class Address {
constructor(
public name: string,
public street: string,
public place: string,
public rating: number) {}
}
28. Direktiven
Struktur Direktiven
verändern die Struktur
der View.
ngIf, ngFor
Attribut Direktiven
beeinflussen das Verhalten
von Elementen
ngStyle
Die Angular-eigenen Direktiven werden über das
BrowserModule zur Verfügung gestellt.
30. Direktiven
Der * bei Strukturdirektiven ist eine Shortcut-Form für die
Template-Schreibweise.
Strukturdirektiven nutzen intern HTML5 Template-Tags.
<p *ngIf="condition">
Hello World
</p>
<template [ngIf]="condition">
<p>
Hello World
</p>
</template>
36. Komponentenhierarchie
Eine Kindkomponente wird erstellt, sobald die
Elternkomponente zu umfangreich wird,
zu viele Dinge parallel tut
oder wenn Elemente an anderen Stellen wiederverwendet
werden sollen.
44. Kind → Eltern
Da die Informationen per Referenz an die Kinder übergeben
werden, können diese die Informationen verändern und die
Elternkomponente erhält die Änderungen ebenfalls.
47. Kind → Eltern
1. Eventemitter in der Kindkomponente implementieren
2. Eventemitter mit dem @Output Decorator kennzeichnen
3. Eventbinding in der Elternkomponente umsetzen
4. Methode zur Behandlung in der Elternkomponente
implementieren
48. Kind → Eltern
import { Component, OnInit, Input, Output, EventEmitter }
from '@angular/core';
import { RatingItem } from '../shared/rating-item';
@Component({…})
export class AppRatingComponent {
@Input() item: RatingItem;
@Output() rating = new EventEmitter();
rate(value) {
var copy = Object.assign({}, this.item)
copy.rating = value;
this.rating.emit(copy);
}
}
52. Service
Services werden zur Auslagerung von Logik verwendet.
Sie können Informationen zur Verfügung stellen oder zur
Kommunikation verwendet werden.
65. Pipes
Pipes werden verwendet, um eine Eingabe in eine Ausgabe
zu transformieren.
Pipes werden hauptsächlich in Templates eingesetzt.
Pipes können parametrisiert werden: value | pipe : ‘a’: ‘b’
Mehrere Pipes können hintereinander geschaltet werden.
66. Pipes
1. Pipe erzeugen
2. Pipe im Module, im Abschnitt declarations registrieren
3. Pipe im Template nutzen
67. Pipes
$ ng g pipe converter
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'converter'
})
export class ConverterPipe implements PipeTransform {
transform(value: any, what: string): any {
let multiplier = 1;
…
return value * multiplier;
}
}
70. Pipes
Aus Performancegründen gibt es keine OrderBy- und Filter-
Pipes in Angular mehr. Diese müssen entweder über externe
Module eingebunden werden oder selbst implementiert
werden.
80. Routing
Routing wird zur Navigation in Single Page-Applikationen
verwendet.
Der Angular Router kann verschiedene Komponenten an
bestimmten stellen der Applikation einbinden, je nachdem
welche Applikationsstatus aktiviert wird.
Der Applikationsstatus kann über die URL geändert werden.
88. 3rd Party Module
Module von Drittanbietern stellen Komponenten, Direktiven,
Pipes und Services zur Verfügung.
Sie können in die Applikation eingebunden und verwendet
werden.