30.06.2016 .Net User Group Karlsruheblog.bridging-it.de/.../2016.06.30-angular-2.0.pdf · Tobias...

Angular 2.0: Big Picture30.06.2016 – .Net User Group Karlsruhe

[email protected] Lead Softwarearchitekt Microsoft

@bitTobiasMeier Blog: http://blog.bridging-it.de/author/Tobias.Meier

Tobias Meier

Lead Softwarearchitekt Microsoft

Standort Karlsruhe

Rüppurrer Straße 4

76137 Karlsruhe

Standort Zug/Schweiz

Baarerstraße 14

CH-6300 Zug

Standort Nürnberg

Königtorgraben 11

90402 Nürnberg

Standort Stuttgart

Marienstraße 17

70178 Stuttgart

Standort Mannheim

N7, 5-6

68161 Mannheim

Standort Frankfurt

Solmsstraße 4

60486 Frankfurt

Standort München

Riesstraße 12

80992 München

Standort Köln

Waidmarkt 11

50676 Köln

Wir bringen Dinge zusammen

Blog: http://blog.bridging-it.de/author/Tobias.MeierTwitter: @bitTobiasMeierEmail: [email protected]

„

1989 - 2016

Angular 1.x

• Framework für Client-Side Applications

• Basiert auf Html, CSS und JavaScript

• Mächtiges Data-Binding

• Template-System

• Über 1 Million Entwickler

Ziele

• Plattformunabhängig

• Hohe Performance

• Komfortable und einfach Verwendbar

We're excited to unveil the result of a months-long partnership with the Angular team. This partnership has been [a] very productive and rewarding experience for us, and as part of this collaboration, we're happy to announce that Angular 2 will now be built with TypeScript. We're looking forward to seeing what people will be able to do with these new tools and continuing to work with the Angular team to improve the experience for Angular developers. Jonathan Turner (MS)

Angular 2: Built on TypeScript

http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx

TypeScript Editoren

• Visual Studio

• Visual Studio Code

• WebStorm

• Eclipse

• u.s.w

Angular 2.0: Unterstützte Browser

• Google Chrome,

• iOS 7.1

• Android 4.1

• IE 9, 10,11 und Edge

• Firefox

Alte Browser

TypeScript ES 2015 Dart ES 5

Angular 2.0 Application

Component Component Component

Service Service Service

Angular 2.0 Application

Component Component Component

Service Service Service

Component

Klasse Template

Metadaten

Angular 2.0

Vergleich

Angular 1.x

• Controller, Direktiven

• Angular-Module

• Factories, Services, Providers, Constants, Values

• Filters

Angular 2.0

• Component (, Direktiven)

• ES2015-Module

• Class

• Pipes

Direktive + Controller => Component

Angular 1.x

<h2 ng-controller="BooksControler">{{vm.book.title}}

</h2>

(function() {

angular.module('app‚).controller('BooksController',

BooksController);

function BooksController() {

var vm =this;

vm.book = { title='TypeScript' }

}

})();

Angular 2.0

import {Component} from 'angular2/core';

@Component({

selector: 'my-books',

template: '<h2>{{book.title}}</h2>

})

export class BooksComponent {

book = {title: 'TypeScript'}

}

<my-books> </my-books>

Applikationsstart

Angular 1.x

<html ng-app="app" ng-controller="AppController">

angular.module('app')

.controller('AppController', function() {…

});

Applikationsstart: Angular 2

index.html

System.import('app/main');

<body>

<my-app>

Bitte warten …

</my-app>

</body>

main.ts

import {bootstrap} from

'angular2/platform/browser'

;

import {AppComponent} from

'./app.component';

bootstrap {AppComponent};

app.component.ts

@Component({

selector: 'my-app',

template:

'<div>Anwendung</div>'

})

export class AppComponent

{}

DataBinding: Interpolation

Angular 1.x

{{vm.book.title}}

Angular 2.0

{{book.title}}

Property-Binding: OneWay

Angular 1.x

<div ng-bind="vm.book.title">

</div>

<a ng-href="{{vm.book.link}}">

{{vm.book.title}}

</a>

Angular 2.0

<div [innerText]="book.title"> </div>

<a [href]="book.link">{{book.title}}

</a>

DataBinding: 2 Way

Angular 1.x

<input ng-model="vm.book.title">

</div>

Angular 2.0

<input [(ngModel)]="book.title"> </div>

DataBinding: Event-Binding

Angular 1.x

<button ng-click="vm.order()">

Bestellen </button>

Angular 2.0

<button (click)="order()"> Bestellen

</button>

Style und Class - Binding

<div [ngStyle]="{color:failureColor}"> Status </div>

<div [style.color]="failureColor"> Status </div>

<div [ngClass]="{strike: book.isSoldOut}">{{book.title}}</div>

ngStyle und ngClass sind Attribut-Direktiven

Bedingungen und Schleifen

<div *ngIf="books.IsAvailable">

<button>Order</button>

</div>

<div *ngFor="let book in books">

{{book.title}}

</div>

ngIf und ngFor sind strukturelle Template-Direktiven

Pipes

{{book.title | pipename }}

{{book.title | uppercase}} TYPESCRIPT

{{book.title | lowercase}} typescript

{{book.PublicDt | date:'short'}} 17.02.2016 für(de-DE)

{{book.PublicDt | date:'M.y'}} 02.2016

Demo

Data Binding

Events

Pipes

Schleifen

Router Beta

Routing: app.component.ts

import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

@Component({selector: 'my-app',templateUrl: 'app/app.component.html',directives: [ROUTER_DIRECTIVES],providers: [ ROUTER_PROVIDERS]

})@RouteConfig([

{ path: '/books', component: BooksListComponent},{ path: '/demo1', component: Demo1Component}

])export class AppComponent {

//…

}

Routing: app.component.html

<h2>Navigation</h2><nav>

<ul><li><a [routerLink]="['books']" href="">Books</a></li>

</ul></nav>

<section><router-outlet></router-outlet>

</section>

Der König ist tot, es lebe der KönigDer König ist tot, es lebe der König

RC 2 => DeprecatedRC 2 => Deprecated

Servicebooks.service.ts books.list.component.ts

import { Injectable } from 'angular2/core';import {Book} from './book';

@Injectable()export class BooksService {getBooks() {return [new Book(1, 'TypeScript'),new Book(2, 'Angular 2.0'),new Book(3, 'Java-Web-Security'),new Book(4, 'Photoshop CC')

];}

}

import { Component } from 'angular2/core';import { Book} from './book';import { BookComponent} from './book.component';

import {BooksService} from './books.service';

@Component({selector: 'demo-books',

templateUrl: './app/books/books.component.html' ,providers: [BooksService]

})export class BooksListComponent {

private _books : Book[];constructor(private _booksSvc: BooksService){this._books =this._booksSvc.getBooks();

}public get books (){

return this._books;}

}

Komponenten-Lifecycle

ngOnChanges

ngOnInit

ngDoCheck

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

ngOnDestroy

Requirements Suche

1. Google Like: Während der Eingabe in das Suchfeld soll die Suche gestartet werden

2. Aber nur, wenn es 300ms keine Eingabe gab

3. Die Abfrage soll nur dann stattfinden, wenn es eine Änderung zur letzten Suche gab

4. Falls mehrere Suchabfragen parallel stattfinden, soll nur das letzte Ergebnis verarbeitet werden

Observable Objects oder Promises

Promise

Antwort auf die CallBack-Hölle

Gibt einen Wert zurück

Observable

Observer-Pattern

Perfektes Zusammenspiel mit Angular 2

Mehrfach verwendbar

Operation kann abgebrochen werden

Ein Wert / Mehrere Werte

Vorgeschlagen als Standard für ES 2016

@Injectable()

export class BooksService {

constructor (private _http: Http){ }

getBooks() : Observable<Book[]> {

returnthis._http.get("/api/getBooks") .map(this.extractData) .catch(this.handleError);

}

private extractData(res: Response) {

let body = res.json();

return body.data || { };

}

private handleError (error: any) {

let errMsg = (error.message) ?

error.message : error.status ?

`${error.status} -{error.statusText}`

: 'Server error';

console.error(errMsg);

return Observable.throw(errMsg);

}

export class BooksListComponent {

private _books : Book[] = [];

private _errorMessage : string;

constructor(private _booksSvc: BooksService){

this._booksSvc.getBooks().subscribe (

books => this._books = books,

error => this._errorMessage = <any>error

);

}

public get books (){

return this._books;

}

}

Angular 1 -StyleGuide

TypeScript

ES2015 - Module

Components

Upgrade Adapter

Hybrider Bootstrapper

https://angular.io/docs/js/latest/quickstart.html

https://angular.io/docs/js/latest/tutorial/

https://cli.angular.io/

https://angular.io/docs/ts/latest/guide/style-guide.html

Angular 2.0

Hoch performant

Höhere Produktivität durch verbessertes Tooling

Leicht zu lernen

Nicht abwärtskompatibel

Router und Forms sind im Fluss

Bibliotheken fehlen noch

Informationen

Email: [email protected] Twitter: @bITTobiasMeier

http://blog.bridging-it.de/author/Tobias.Meier

http://angular.io

http://angularjs.blogspot.de/

http://www.typescript-lang.org

http://blog.bridging-it.de/author/Tobias.Meier

http://angular.io/

http://angularjs.blogspot.de/

http://www.typescript-lang.org/

30.06.2016 .Net User Group Karlsruheblog.bridging-it.de/.../2016.06.30-angular-2.0.pdf · Tobias...

Documents

Transcript of 30.06.2016 .Net User Group Karlsruheblog.bridging-it.de/.../2016.06.30-angular-2.0.pdf · Tobias...