Angular 2 - Komponentenbasierte HTML5-Anwendungen

Christian Weyer | Thinktecture AG Angular 2 Komponentenbasierte HTML5-Anwendungen

Christian Weyer • Co-founder, co-owner and principal consultant at Thinktecture
AG • Focus on – Mobile & web-based application architectures – Interoperability, cross-device – Pragmatic end-to-end solutions • Microsoft MVP for ASP.NET (Architecture) ASP.NET Web API / vNext Advisory Board Member ASPInsider, AzureInsider • Google GDE for Web Technologies • [email protected] • @christianweyer 2

2016 • We want applications – real applications! • For
any device • For any platform • Easy, eh? 3

But… how? • .NET? • Web Stack – HTML5 –
CSS3 & Flexbox – JavaScript / TypeScript – Angular – Tooling

TypeScript • Typed superset of JavaScript that compiles to plain
JavaScript – Compiles to ES5 or ES2015 • Preferred approach by the Angular team – Is not needed to build applications with Angular 2 • Types are optional – Pick and choose wisely – Metadata makes tooling strong 5

Components, Components, Comp… 6

“File… New... Project... Angular 2” DONE J NOT L

Angular 2 Artifacts • Modules • Components • Directives •
Services • Router

Components in TypeScript 9 @Component({ selector: 'my-app', template: '<h1>My Angular
2 App</h1>' }) export class AppComponent { }

Components in plain JavaScript 10 var AppComponent = ng.core .Component({
selector: 'my-app', template: '<h1>My Angular 2 App</h1>' }) .Class({ constructor: function () { } });

Component ‚Controller‘ 11 export class AppComponent { constructor() { }
}

Component vs. Directive • Directives add behavior to a DOM
element – Component can consist of directives • A component is a directive with a view 12 @Directive({ selector: '[x-large]' }) export class XLargeDirective { constructor(public el: ElementRef) { this.el.nativeElement.style.fontSize = 'x-large'; } } <span x-large>Extra Large Text</span>

Services 13 export class MyService { constructor() { } public
GetMyData() {…} }

Dependency Injection 14 @Injectable() export class MyService { constructor(private _otherService:
OtherService) { } public GetMyData() { this._otherService.doSomething(); } }

Modules • Modularity system • Every Angular app has at
least one module – Root module, conventionally named AppModule • Most apps have many more feature modules @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Bootstrapping an Application – ng 2 16 @Component({ selector: 'my-app',
viewTemplate: '<div>This app is called {{ title }}</div>' }) // needs to be in AppModule class AppComponent { this.title = 'My super app'; } import ... from 'angular'; import {AppModule} from 'appModule'; platformBrowserDynamic().bootstrapModule(AppModule); <html> <body> <my-app></my-app> </body> import ... from 'angular'; import {AppModuleNgFactory} from 'appModuleNgFactory'; platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); AOT

Routing • Routing configuration 17 export const APP_ROUTING: ModuleWithProviders =
RouterModule.forRoot(appRootRoutes); export const GAMES_ROUTING: ModuleWithProviders = RouterModule.forChild(gameRoutes); const appRootRoutes: Routes = [ { path: 'login', component: LoginComponent, name: 'Login' }, { path: 'list', component: DataList, name: 'List' } ]; const gameRoutes: Routes = [ { path: 'games', component: GamesRootComponent, children: [{ path: 'all', component: GameListComponent }] } ];

Routing • Module imports @NgModule({ imports: [ BrowserModule, APP_ROUTING ],
providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Routing • Routing placeholder in view <div class="content-wrapper" style="min-height: 100%;">
<section class="content scrolling-module"> <router-outlet></router-outlet> </section> </div>

Data Flow & Component Public API • Data flows into
a component via inputs • Data flows out of a component via outputs 20

Change Detection with Zones • In Angular 2 no need
to call $scope.$apply • Magic resides inside special library named zone.js – Overrides all standard browser APIs that are considered asynchronous – Injects its own implementation & uses it to monitor start and completion of any asynchronous activity • Async – Events: user events like click, change, input, submit – XMLHttpRequests: e.g. fetching data from REST API – Timers: setTimeout(), setInterval() 21

Observables & HTTP • Angular heavily builds on observables –
Observable object represents a push-based collection – Leverages RxJS • Angular 2 has a native HTTP service – Can use any HTTP functionality like the Fetch API in modern browsers – Returns observable streams 22

Template Syntax • Event bindings • Property bindings • Local
variables 23

Template Syntax 24 @Component({ selector: 'name-change', templateUrl: 'name-change.html' }) export
class NameChange { constructor() { this.name = ''; } changeName(newName) { this.name = newName; } } <div> My name is {{ name }} </div> <div> <input #newname type="text"> <button (click)="changeName(newname.value)" [disabled]="newname.value == 'CW'"> Change Name </button> </div>

Two-Way Bindings • One-time bindings by default – Simplification and
performance • Two-way binding is syntactic sugar – ng-model uses combination of property and event binding 25

Two-Way Binding Explained 26 <input [value]="name"> <p>Hello {{name}}</p> <input [value]="name"
(input)="name = $event.target.value"> <p>Hello {{name}}</p> <input [ng-model]="name" (ng-model)="name = $event"> <p>Hello {{name}}</p> <input [(ng-model)]="name"> <p>Hello {{name}}</p>

Build Process • In real projects we have a build
process • Tools like gulp.js make life easier – Transpilation – Concatenation – Minification – and so on… • Angular 2 is agnostic to actual underlying build process • Angular CLI tool: https://cli.angular.io/ 27

More Topics • View encapsulation • Forms in depth •
Animations • AOT • Universal Angular • … and more ... 28

Summary • Angular 2 builds heavily on the idea of
Components – Well-known concepts for Windows developers • TypeScript feels familiar to C# developers • Tooling can strongly support development • Build process is a major asset • Start building today J 29

Resources • Angular 2 – https://angular.io – https://github.com/angular/angular • The
Core Concepts of Angular 2 – http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2 • Two Phases of Angular 2 Applications – http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications • Change detection in Angular 2 – http://victorsavkin.com/post/110170125256/change-detection-in-angular-2 • Angular 2 Template Syntax – http://victorsavkin.com/post/119943127151/angular-2-template-syntax • Augury – Chrome DevTools Plugin – https://augury.angular.io/ 30

Resources • [email protected] • http://www.thinktecture.com • BoardZ Sample Application –
https://github.com/thinktecture/boardz-cross-platform-sample • Thinktecture’s GitHub Repositories – https://github.com/thinktecture 31

Angular 2 - Komponentenbasierte HTML5-Anwendungen

Angular 2 - Komponentenbasierte HTML5-Anwendungen

Christian Weyer
PRO

More Decks by Christian Weyer

Other Decks in Programming

Featured

Transcript

Christian Weyer | Thinktecture AG Angular 2 Komponentenbasierte HTML5-Anwendungen

Christian Weyer • Co-founder, co-owner and principal consultant at Thinktecture

2016 • We want applications – real applications! • For

But… how? • .NET? • Web Stack – HTML5 –

TypeScript • Typed superset of JavaScript that compiles to plain

Components, Components, Comp… 6

“File… New... Project... Angular 2” DONE J NOT L

Angular 2 Artifacts • Modules • Components • Directives •

Components in TypeScript 9 @Component({ selector: 'my-app', template: '<h1>My Angular

Components in plain JavaScript 10 var AppComponent = ng.core .Component({

Component ‚Controller‘ 11 export class AppComponent { constructor() { }

Component vs. Directive • Directives add behavior to a DOM

Services 13 export class MyService { constructor() { } public

Dependency Injection 14 @Injectable() export class MyService { constructor(private _otherService:

Modules • Modularity system • Every Angular app has at

Bootstrapping an Application – ng 2 16 @Component({ selector: 'my-app',

Routing • Routing configuration 17 export const APP_ROUTING: ModuleWithProviders =

Routing • Module imports @NgModule({ imports: [ BrowserModule, APP_ROUTING ],

Routing • Routing placeholder in view <div class="content-wrapper" style="min-height: 100%;">

Data Flow & Component Public API • Data flows into

Change Detection with Zones • In Angular 2 no need

Observables & HTTP • Angular heavily builds on observables –

Template Syntax • Event bindings • Property bindings • Local

Template Syntax 24 @Component({ selector: 'name-change', templateUrl: 'name-change.html' }) export

Two-Way Bindings • One-time bindings by default – Simplification and

Two-Way Binding Explained 26 <input [value]="name"> <p>Hello {{name}}</p> <input [value]="name"

Build Process • In real projects we have a build

More Topics • View encapsulation • Forms in depth •

Summary • Angular 2 builds heavily on the idea of

Resources • Angular 2 – https://angular.io – https://github.com/angular/angular • The

Resources • [email protected] • http://www.thinktecture.com • BoardZ Sample Application –