SlideShare ist ein Scribd-Unternehmen logo
1 von 95
Downloaden Sie, um offline zu lesen
Angular2
@basti_springer
Agenda
• Komponenten
• Module
• Datenfluß
• Direktiven
• Services
• Pipes
• Routing
Wo soll ich denn
Anfangen?
Angular2
Angular CLI
Angular CLI
Angular CLI
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.
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
Module
klaas hartz / pixelio.de
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 { }
Module
declarations: Komponenten und Direktiven
imports: Weitere Module importieren
providers: Global im Modul verfügbare Services
bootstrap: Die Bootstrapping Komponente angeben
Komponenten
designritter / pixelio.de
Komponenten
Grundbaustein einer Applikation.
Sind für die Anzeige von Informationen und die Behandlung
von Benutzereingaben zuständig.
Komponenten
Komponenten
Komponenten
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-add-list',
templateUrl: './add-list.component.html',
styleUrls: ['./add-list.component.css']
})
export class AddListComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Komponenten
Eine Komponente pro Datei.
Pro Komponente ein Verzeichnis.
Dateiname: <Bezeichnung>.component.ts
add-list.component.ts
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.
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.
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
Styles
ul {
list-style: none;
}
Interpolation
Darstellen der Informationen aus der Komponenten-Klasse.
Ändert sich der Wert in der Komponente, wird er in das
Template synchronisiert.
Darstellung von
Informationen
export class AddListComponent implements OnInit {
private headline = 'Addresslist';
private addresses: Address[];
constructor() {
this.addresses = [
{name: 'Peter', street: 'Kirchplatz 2', place: '20095 Hamburg'},
{name: 'Paul', street: 'Sonnenstraße 14', place: '80331 München'}
];
}
ngOnInit() {
}
}
Lifecycle Hooks
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) {}
}
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.
Darstellung von
Informationen
<ul>
<li *ngFor="let address of addresses">
{{address.name}} -
{{address.street}} -
{{address.place}}
</li>
</ul>
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>
Data-Binding
Typ Syntax
Interpolation {{value}}
Property-Binding [src]=“logo”
Event-Binding (click)=“hello()”
2 Way Data-Binding [(ng-model)]=“myValue”
Property Binding
<img [src]="logo" />
Eigenschaften von Elementen mit dynamischen Werten
setzen.
Event-Binding
<button
type="button"
name="button"
(click)="hello($event)">Click me</button>
Die Methode hello der Komponenten-Klasse wird beim Click-
Event ausgeführt.
Das $event-Objekt enthält alle Informationen über das
Event.
Komponentenhierarchie
Peter Bohot / pixelio.de
Komponentenhierarchie
Eine Angular-Applikation besteht in den meisten Fällen aus
einer Hierarchie von Komponenten.
Jede Komponente kann eine oder mehrere
Kindkomponenten beinhalten.
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.
Komponentenhierarchie
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-rating',
templateUrl: './rating.component.html',
styleUrls: ['./rating.component.css']
})
export class RatingComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Die Kindkomponente
Komponentenhierarchie
<h1>{{headline}}</h1>
<ul>
<li *ngFor="let address of addresses">
{{address.name}} -
{{address.street}} -
{{address.place}}
<app-rating></app-rating>
</li>
</ul>
Im Template der Elternkomponente:
Datenfluß
Andreas Hermsdorf / pixelio.de
👫 → 👶
Eltern → Kind
Wie kommen die Informationen der Elternkomponente in die
Kindkomponente?
Eltern → Kind
<app-rating [item]="address"></app-rating>
@Component({
selector: 'app-rating',
templateUrl: './app-rating.component.html',
styleUrls: ['./app-rating.component.css']
})
export class AppRatingComponent implements OnInit {
@Input() item: RatingItem;
constructor() { }
ngOnInit() {
}
}
👶 ! 👫
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.
Kind → Eltern
export class AppRatingComponent {
@Input() item: RatingItem;
constructor() { }
rate(value) {
this.item.rating = value;
}
}
Kind → Eltern
Die bessere Lösung: Eventbinding nach außen.
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
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);
}
}
Kind → Eltern
<ul>
<li *ngFor="let address of addresses">
{{address.name}} -
{{address.street}} -
{{address.place}}
<app-rating
[item]="address"
(rating)="rating($event)"></app-rating>
</li>
</ul>
Kind → Elternimport { Component, OnInit } from '@angular/core';
import { Address } from '../shared/address';
@Component({…})
export class AddListComponent implements OnInit {
private addresses: Address[];
constructor() {
this.addresses = […];
}
rating(address: Address) {
// save to server
console.log('saving');
let index = this.addresses.findIndex((el) => {
if (el.name === address.name && el.street === address.street &&
el.place === address.place) {
return true;
}
return false;
});
this.addresses[index] = address;
}
}
Services
Anja Müller / pixelio.de
Service
Services werden zur Auslagerung von Logik verwendet.
Sie können Informationen zur Verfügung stellen oder zur
Kommunikation verwendet werden.
Service
1. Service erzeugen

2. Im Modul registrieren

3. Per Dependency Injection einbinden
Service
$ ng g service converter
import { Injectable } from '@angular/core';
@Injectable()
export class ConverterService {
private dolEur = 0.919337342;
private eurDol = 1.08774;
dollarToEuro(dollar) {
return dollar * this.dolEur;
}
euroToDollar(euro) {
return euro * this.eurDol;
}
}
Service
…
import { ConverterService } from './converter.service';
@NgModule({
declarations: […],
imports: […],
providers: [
ConverterService
],
bootstrap: […]
})
export class AppModule { }
Service
…
import { ConverterService } from '../converter.service';
@Component({…})
export class AddListComponent implements OnInit {
…
private value: number;
constructor(private converterService: ConverterService) {
this.value = this.converterService.dollarToEuro(15);
…
}
}
Serverkommunikation
Rainer Sturm / pixelio.de
Serverkommunikation
import { Injectable } from '@angular/core';
import { Address } from './shared/address';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class AddressService {
constructor(public http: Http) { }
get(id: number): Promise<Address> {
return this.http.get('/address/' + id)
.toPromise()
.then(res => {
return res.json() as Address;
});
}
}
Direktiven
Direktiven
1. Direktive erzeugen
2. Als Declaration im Module registrieren

3. Als Attribut einbinden
Direktiven
$ ng g directive unless
import { Directive, Input, TemplateRef, ViewContainerRef } from
'@angular/core';
@Directive({ selector: '[unless]' })
export class UnlessDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) { }
@Input() set unless(condition: boolean) {
if (!condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
Direktiven
…
import { UnlessDirective } from './unless.directive';
@NgModule({
declarations: [
…
UnlessDirective
],
imports: […],
providers: […],
bootstrap: […]
})
export class AppModule { }
Direktiven
<div *unless="true">
UNLESS TRUE
</div>
<div *unless="false">
UNLESS FALSE
</div>
Den Stern nicht vergessen, sonst: Error: No provider for
TemplateRef!
Pipes
Kurt Michel / pixelio.de
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.
Pipes
1. Pipe erzeugen

2. Pipe im Module, im Abschnitt declarations registrieren

3. Pipe im Template nutzen
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;
}
}
Pipes
…
import { ConverterPipe } from './converter.pipe';
@NgModule({
declarations: [
…
ConverterPipe
],
imports: […],
providers: […],
bootstrap: […]
})
export class AppModule { }
Pipes
Pipe: {{ 15 | converter : 'dollarToEuro' }}
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.
Pipes
import { Pipe, PipeTransform } from '@angular/core';
import {Todo} from "./todo";
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(todos: Todo[], args?: any): Todo[] {
if (args === 'all') {
return todos;
}
return todos.filter((todo) => {
return todo.status == args
});
}
}
Forms
Timo Klostermeier / pixelio.de
Forms
Angular bietet zahlreiche Hilfestellungen für die
Formularbehandlung.
Forms
1. Forms Modul einbinden

2. Formular erstellen
Forms
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: […],
imports: […
FormsModule
],
providers: […],
bootstrap: [AppComponent]
})
export class AppModule { }
Forms
State
Klassen, wenn
zutreffend
Klasse, wenn nicht
zutreffend
Element wurde
besucht
ng-touched ng-untouched
Wert wurde verändert ng-dirty ng-pristine
Wert ist gültig ng-valid ng-invalid
Forms
<input type="text"
name="name"
[(ngModel)]="value"
#name="ngModel">
{{name.pristine}}
Validatoren
Bestehende Validatoren: required, minlength, maxlength,
pattern
Eigene Validatoren können über Direktiven implementiert
werden.
Routing
Andreas Hermsdorf / pixelio.de
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.
Routing
1. base href=“/“ setzen

2. Routermodul einbinden

3. Router-Outlet anlegen

4. Routingkonfiguration erstellen
Routingimport { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{
path: '',
redirectTo: 'list',
pathMatch: 'full'
}, {
path: 'list',
component: ListComponent
}, {
path: 'form',
component: FormComponent
}, {
path: 'form/:id',
component: FormComponent
}
];
export const routing: ModuleWithProviders =
RouterModule.forRoot(appRoutes);
Routing
…
import { routing } from './app.routing';
@NgModule({
declarations: […],
imports: […
routing
],
providers: […],
bootstrap: [AppComponent]
})
export class AppModule { }
Routing
<a routerLink="/form">Neuer Datensatz</a>
Im Template kann mit der routerLink-Direktive navigiert
werden.
Routing
import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras } from '@angular/router';
@Component({…})
export class TodoListComponent implements OnInit {
constructor(private router: Router) {
}
private create() {
this.router.navigate(['/form'])
}
}
Im Controller wird über die router.navigate-Methode navigiert.
Routing
Zugriff auf Variablen.
{
path: 'form/:id',
component: FormComponent
}
ngOnInit() {
this.route.params.forEach((params: Params) => {
let id = +params['id'];
…
});
}
3rd Party Module
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.
3rd Party Module
Angular Material
1. Installation

2. Einbindung

3. Verwendung
3rd Party Module
npm install --save @angular/material
3rd Party Module
import { MaterialModule } from '@angular/material';
@NgModule({
imports: [MaterialModule.forRoot()],
…
})
export class AppModule { }
3rd Party Module
<md-card>
<label>
Indeterminate progress-bar
<md-progress-bar
class="app-progress"
mode="indeterminate"
aria-label="Indeterminate progress-bar example"></md-progress-bar>
</label>
<label>
Determinate progress bar - {{progress}}%
<md-progress-bar
class="app-progress"
color="accent"
mode="determinate"
[value]="progress"
aria-label="Determinate progress-bar example"></md-progress-bar>
</label>
</md-card>
3rd Party Module
progress: number = 0;
constructor() {
setInterval(() => {
this.progress = (this.progress +
Math.floor(Math.random() * 4) + 1) % 100;
}, 200);
}
3rd Party Module
Fragen?
Rainer Sturm / pixelio.de

Weitere ähnliche Inhalte

Andere mochten auch

Linked Data Experiences at Springer Nature
Linked Data Experiences at Springer NatureLinked Data Experiences at Springer Nature
Linked Data Experiences at Springer NatureMichele Pasin
 
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJSUtilizando diretivas com AngularJS
Utilizando diretivas com AngularJSRodrigo Branas
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJSRodrigo Branas
 
Identifying Springer's Author (with ORCID iD) on SpringerLink (H. Aziz)
Identifying Springer's Author (with ORCID iD) on SpringerLink (H. Aziz)Identifying Springer's Author (with ORCID iD) on SpringerLink (H. Aziz)
Identifying Springer's Author (with ORCID iD) on SpringerLink (H. Aziz)ORCID, Inc
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overviewJesse Warden
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Dawid Myslak
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Knoldus Inc.
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2FITC
 

Andere mochten auch (14)

Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
Acceso a Springer
Acceso a SpringerAcceso a Springer
Acceso a Springer
 
Linked Data Experiences at Springer Nature
Linked Data Experiences at Springer NatureLinked Data Experiences at Springer Nature
Linked Data Experiences at Springer Nature
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
Angular 2
Angular 2Angular 2
Angular 2
 
Utilizando diretivas com AngularJS
Utilizando diretivas com AngularJSUtilizando diretivas com AngularJS
Utilizando diretivas com AngularJS
 
Introdução ao AngularJS
Introdução ao AngularJSIntrodução ao AngularJS
Introdução ao AngularJS
 
Identifying Springer's Author (with ORCID iD) on SpringerLink (H. Aziz)
Identifying Springer's Author (with ORCID iD) on SpringerLink (H. Aziz)Identifying Springer's Author (with ORCID iD) on SpringerLink (H. Aziz)
Identifying Springer's Author (with ORCID iD) on SpringerLink (H. Aziz)
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
 

Ähnlich wie Angular2

Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJSSebastian Springer
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100Yvette Teiken
 
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Manfred Steyer
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2Manfred Steyer
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetManfred Steyer
 
Welches Webframework passt zu mir? (WJAX)
Welches Webframework passt zu mir? (WJAX)Welches Webframework passt zu mir? (WJAX)
Welches Webframework passt zu mir? (WJAX)Alexander Casall
 
Agiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific LanguagesAgiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific LanguagesDominik Hirt
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScriptManfred Steyer
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Manfred Steyer
 
APEX & MTdoxx
APEX & MTdoxxAPEX & MTdoxx
APEX & MTdoxxMT AG
 
2009 03 17 Spring101
2009 03 17 Spring1012009 03 17 Spring101
2009 03 17 Spring101gueste4be40
 
Mobile Anwendungen mit SenchaTouch
Mobile Anwendungen mit SenchaTouchMobile Anwendungen mit SenchaTouch
Mobile Anwendungen mit SenchaTouchMayflower GmbH
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Manfred Steyer
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservicesxxtesaxx
 
SharePoint UserGroup Session 2013
SharePoint UserGroup Session 2013SharePoint UserGroup Session 2013
SharePoint UserGroup Session 2013FLorian Laumer
 
Android Development ...and the daily challenges
Android Development ...and the daily challengesAndroid Development ...and the daily challenges
Android Development ...and the daily challengesDominik Helleberg
 

Ähnlich wie Angular2 (20)

Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
 
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
 
Welches Webframework passt zu mir? (WJAX)
Welches Webframework passt zu mir? (WJAX)Welches Webframework passt zu mir? (WJAX)
Welches Webframework passt zu mir? (WJAX)
 
Agiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific LanguagesAgiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific Languages
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
APEX & MTdoxx
APEX & MTdoxxAPEX & MTdoxx
APEX & MTdoxx
 
2009 03 17 Spring101
2009 03 17 Spring1012009 03 17 Spring101
2009 03 17 Spring101
 
Mobile Anwendungen mit SenchaTouch
Mobile Anwendungen mit SenchaTouchMobile Anwendungen mit SenchaTouch
Mobile Anwendungen mit SenchaTouch
 
Feature Flags mit Togglz
Feature Flags mit TogglzFeature Flags mit Togglz
Feature Flags mit Togglz
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
 
Android Development
Android DevelopmentAndroid Development
Android Development
 
SharePoint UserGroup Session 2013
SharePoint UserGroup Session 2013SharePoint UserGroup Session 2013
SharePoint UserGroup Session 2013
 
Android Development ...and the daily challenges
Android Development ...and the daily challengesAndroid Development ...and the daily challenges
Android Development ...and the daily challenges
 

Mehr von Sebastian Springer

Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsSebastian Springer
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsSebastian Springer
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceSebastian Springer
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebSebastian Springer
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptSebastian Springer
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der WebentwicklungSebastian Springer
 

Mehr von Sebastian Springer (20)

Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Typescript
TypescriptTypescript
Typescript
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Best Practices für TDD in JavaScript
Best Practices für TDD in JavaScriptBest Practices für TDD in JavaScript
Best Practices für TDD in JavaScript
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
 
Node.js
Node.jsNode.js
Node.js
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 
Angular translate
Angular translateAngular translate
Angular translate
 
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
10 Dinge die ich an dir hasse - Stolpersteine in der Webentwicklung
 
Error handling in JavaScript
Error handling in JavaScriptError handling in JavaScript
Error handling in JavaScript
 

Angular2

  • 3. Agenda • Komponenten • Module • Datenfluß • Direktiven • Services • Pipes • Routing
  • 4. Wo soll ich denn Anfangen?
  • 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
  • 11. Module klaas hartz / pixelio.de
  • 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
  • 15. Komponenten Grundbaustein einer Applikation. Sind für die Anzeige von Informationen und die Behandlung von Benutzereingaben zuständig.
  • 18. Komponenten import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-add-list', templateUrl: './add-list.component.html', styleUrls: ['./add-list.component.css'] }) export class AddListComponent implements OnInit { constructor() { } ngOnInit() { } }
  • 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
  • 24. Interpolation Darstellen der Informationen aus der Komponenten-Klasse. Ändert sich der Wert in der Komponente, wird er in das Template synchronisiert.
  • 25. Darstellung von Informationen export class AddListComponent implements OnInit { private headline = 'Addresslist'; private addresses: Address[]; constructor() { this.addresses = [ {name: 'Peter', street: 'Kirchplatz 2', place: '20095 Hamburg'}, {name: 'Paul', street: 'Sonnenstraße 14', place: '80331 München'} ]; } ngOnInit() { } }
  • 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.
  • 29. Darstellung von Informationen <ul> <li *ngFor="let address of addresses"> {{address.name}} - {{address.street}} - {{address.place}} </li> </ul>
  • 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>
  • 31. Data-Binding Typ Syntax Interpolation {{value}} Property-Binding [src]=“logo” Event-Binding (click)=“hello()” 2 Way Data-Binding [(ng-model)]=“myValue”
  • 32. Property Binding <img [src]="logo" /> Eigenschaften von Elementen mit dynamischen Werten setzen.
  • 33. Event-Binding <button type="button" name="button" (click)="hello($event)">Click me</button> Die Methode hello der Komponenten-Klasse wird beim Click- Event ausgeführt. Das $event-Objekt enthält alle Informationen über das Event.
  • 35. Komponentenhierarchie Eine Angular-Applikation besteht in den meisten Fällen aus einer Hierarchie von Komponenten. Jede Komponente kann eine oder mehrere Kindkomponenten beinhalten.
  • 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.
  • 37. Komponentenhierarchie import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-rating', templateUrl: './rating.component.html', styleUrls: ['./rating.component.css'] }) export class RatingComponent implements OnInit { constructor() { } ngOnInit() { } } Die Kindkomponente
  • 38. Komponentenhierarchie <h1>{{headline}}</h1> <ul> <li *ngFor="let address of addresses"> {{address.name}} - {{address.street}} - {{address.place}} <app-rating></app-rating> </li> </ul> Im Template der Elternkomponente:
  • 41. Eltern → Kind Wie kommen die Informationen der Elternkomponente in die Kindkomponente?
  • 42. Eltern → Kind <app-rating [item]="address"></app-rating> @Component({ selector: 'app-rating', templateUrl: './app-rating.component.html', styleUrls: ['./app-rating.component.css'] }) export class AppRatingComponent implements OnInit { @Input() item: RatingItem; constructor() { } ngOnInit() { } }
  • 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.
  • 45. Kind → Eltern export class AppRatingComponent { @Input() item: RatingItem; constructor() { } rate(value) { this.item.rating = value; } }
  • 46. Kind → Eltern Die bessere Lösung: Eventbinding nach außen.
  • 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); } }
  • 49. Kind → Eltern <ul> <li *ngFor="let address of addresses"> {{address.name}} - {{address.street}} - {{address.place}} <app-rating [item]="address" (rating)="rating($event)"></app-rating> </li> </ul>
  • 50. Kind → Elternimport { Component, OnInit } from '@angular/core'; import { Address } from '../shared/address'; @Component({…}) export class AddListComponent implements OnInit { private addresses: Address[]; constructor() { this.addresses = […]; } rating(address: Address) { // save to server console.log('saving'); let index = this.addresses.findIndex((el) => { if (el.name === address.name && el.street === address.street && el.place === address.place) { return true; } return false; }); this.addresses[index] = address; } }
  • 52. Service Services werden zur Auslagerung von Logik verwendet. Sie können Informationen zur Verfügung stellen oder zur Kommunikation verwendet werden.
  • 53. Service 1. Service erzeugen
 2. Im Modul registrieren
 3. Per Dependency Injection einbinden
  • 54. Service $ ng g service converter import { Injectable } from '@angular/core'; @Injectable() export class ConverterService { private dolEur = 0.919337342; private eurDol = 1.08774; dollarToEuro(dollar) { return dollar * this.dolEur; } euroToDollar(euro) { return euro * this.eurDol; } }
  • 55. Service … import { ConverterService } from './converter.service'; @NgModule({ declarations: […], imports: […], providers: [ ConverterService ], bootstrap: […] }) export class AppModule { }
  • 56. Service … import { ConverterService } from '../converter.service'; @Component({…}) export class AddListComponent implements OnInit { … private value: number; constructor(private converterService: ConverterService) { this.value = this.converterService.dollarToEuro(15); … } }
  • 58. Serverkommunikation import { Injectable } from '@angular/core'; import { Address } from './shared/address'; import { Http } from '@angular/http'; import 'rxjs/add/operator/toPromise'; @Injectable() export class AddressService { constructor(public http: Http) { } get(id: number): Promise<Address> { return this.http.get('/address/' + id) .toPromise() .then(res => { return res.json() as Address; }); } }
  • 60. Direktiven 1. Direktive erzeugen 2. Als Declaration im Module registrieren
 3. Als Attribut einbinden
  • 61. Direktiven $ ng g directive unless import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[unless]' }) export class UnlessDirective { constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef ) { } @Input() set unless(condition: boolean) { if (!condition) { this.viewContainer.createEmbeddedView(this.templateRef); } else { this.viewContainer.clear(); } } }
  • 62. Direktiven … import { UnlessDirective } from './unless.directive'; @NgModule({ declarations: [ … UnlessDirective ], imports: […], providers: […], bootstrap: […] }) export class AppModule { }
  • 63. Direktiven <div *unless="true"> UNLESS TRUE </div> <div *unless="false"> UNLESS FALSE </div> Den Stern nicht vergessen, sonst: Error: No provider for TemplateRef!
  • 64. Pipes Kurt Michel / pixelio.de
  • 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; } }
  • 68. Pipes … import { ConverterPipe } from './converter.pipe'; @NgModule({ declarations: [ … ConverterPipe ], imports: […], providers: […], bootstrap: […] }) export class AppModule { }
  • 69. Pipes Pipe: {{ 15 | converter : 'dollarToEuro' }}
  • 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.
  • 71. Pipes import { Pipe, PipeTransform } from '@angular/core'; import {Todo} from "./todo"; @Pipe({ name: 'filter' }) export class FilterPipe implements PipeTransform { transform(todos: Todo[], args?: any): Todo[] { if (args === 'all') { return todos; } return todos.filter((todo) => { return todo.status == args }); } }
  • 73. Forms Angular bietet zahlreiche Hilfestellungen für die Formularbehandlung.
  • 74. Forms 1. Forms Modul einbinden
 2. Formular erstellen
  • 75. Forms import { FormsModule } from '@angular/forms'; @NgModule({ declarations: […], imports: [… FormsModule ], providers: […], bootstrap: [AppComponent] }) export class AppModule { }
  • 76. Forms State Klassen, wenn zutreffend Klasse, wenn nicht zutreffend Element wurde besucht ng-touched ng-untouched Wert wurde verändert ng-dirty ng-pristine Wert ist gültig ng-valid ng-invalid
  • 78. Validatoren Bestehende Validatoren: required, minlength, maxlength, pattern Eigene Validatoren können über Direktiven 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.
  • 81. Routing 1. base href=“/“ setzen
 2. Routermodul einbinden
 3. Router-Outlet anlegen
 4. Routingkonfiguration erstellen
  • 82. Routingimport { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const appRoutes: Routes = [ { path: '', redirectTo: 'list', pathMatch: 'full' }, { path: 'list', component: ListComponent }, { path: 'form', component: FormComponent }, { path: 'form/:id', component: FormComponent } ]; export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
  • 83. Routing … import { routing } from './app.routing'; @NgModule({ declarations: […], imports: [… routing ], providers: […], bootstrap: [AppComponent] }) export class AppModule { }
  • 84. Routing <a routerLink="/form">Neuer Datensatz</a> Im Template kann mit der routerLink-Direktive navigiert werden.
  • 85. Routing import { Component, OnInit } from '@angular/core'; import { Router, NavigationExtras } from '@angular/router'; @Component({…}) export class TodoListComponent implements OnInit { constructor(private router: Router) { } private create() { this.router.navigate(['/form']) } } Im Controller wird über die router.navigate-Methode navigiert.
  • 86. Routing Zugriff auf Variablen. { path: 'form/:id', component: FormComponent } ngOnInit() { this.route.params.forEach((params: Params) => { let id = +params['id']; … }); }
  • 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.
  • 89. 3rd Party Module Angular Material 1. Installation
 2. Einbindung
 3. Verwendung
  • 90. 3rd Party Module npm install --save @angular/material
  • 91. 3rd Party Module import { MaterialModule } from '@angular/material'; @NgModule({ imports: [MaterialModule.forRoot()], … }) export class AppModule { }
  • 92. 3rd Party Module <md-card> <label> Indeterminate progress-bar <md-progress-bar class="app-progress" mode="indeterminate" aria-label="Indeterminate progress-bar example"></md-progress-bar> </label> <label> Determinate progress bar - {{progress}}% <md-progress-bar class="app-progress" color="accent" mode="determinate" [value]="progress" aria-label="Determinate progress-bar example"></md-progress-bar> </label> </md-card>
  • 93. 3rd Party Module progress: number = 0; constructor() { setInterval(() => { this.progress = (this.progress + Math.floor(Math.random() * 4) + 1) % 100; }, 200); }