Post on 03-Jun-2020
Angular 2.0: Big Picture30.06.2016 – .Net User Group Karlsruhe
Tobias.Meier@bridging-it.de 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: Tobias.Meier@bridging-it.de
„
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
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: Tobias.Meier@bridging-it.de Twitter: @bITTobiasMeier
http://blog.bridging-it.de/author/Tobias.Meier
http://angular.io
http://angularjs.blogspot.de/
http://www.typescript-lang.org