Angular 2: Komponentenbasierte HTML5-Anwendungen

Christian)Weyer)|)Thinktecture AG Angular)2 Komponenten;basierte 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 http://blogs.thinktecture.com/cweyer 2

2009 • Over,6,years ago:,Angular,was,invented • A,lot has happend • A,lot
has changed • A,lot is going to change 3

2016 • Web,browsers &,standards have evolved • Mobile,is ubiquitous •
Web,Components – No need for Angular‘s custom directive approach? • Shadow,DOM – No need for Angular‘s transclusion? • ES2015,modules – No need for Angular‘s modules 4

Goal:)Overall)Simplification • Angular,1.x,has a,steep learning curve • Many different,concepts to
grok – Controller – Factory – Service – Provider – Directive – Transclusion – Module – Scope 5

Angular)2: Components,)Components,)Comp… 6

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 7

Transpilers &)Loaders • Transpiler – JavaScript/TypeScript$to$JavaScript$of$today, compiler,that,allows,to,use,features,from,the, future,today – E.g.,Traceur,,Babel,,tsc
• Module,loader – Load,ES2015,modules,,AMD,,CommonJS and, global,scripts,in,the,browser,(and,NodeJS) – E.g.,SystemJS 8

Angular)2)Components)in)TypeScript 9 @Component({ selector:0'my3app', template:0'<h1>My Angular020App</h1>' }) class AppComponent {
}

Components)in)plain JavaScript 10 var AppComponent =0 ng.core .Component({0000 selector:0'my3app',0000 template:0'<h1>My
Angular020App</h1>' })00 .Class({0000 constructor:0function ()0{00000 }00 });

Component Annotations 11 @Component({ selector:0'my3app', ... }) … <my3app></my3app>

Component Controller 12 class AppComponent { constructor()0{ } }

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

Dependency Injection • Pattern,vs.,Framework • Entirely new DI,mechanism in,Angular,2 –
Explicitly register types with DI • globally • on,component level – Inject via,ctor 14

Dependency Injection 15 class MyService { constructor(private0_otherService:0OtherService)0{ } public GetMyData()0{
this._otherService.doSomething(); } }

HTTP)&)Observables) • Angular,2,has a,native,HTTP,service – Can,use any HTTP,functionality like,the Fetch
API, in,modern,browsers • Angular,heavily builds on,observables – Observable,object represents a,push$based collection – Built on,top,of RxJS • HTTP,service returns observable,streams 16

Bootstrapping)an)Application – ng 1 17 var app =0angular.module('myApp',0[]); <body ng3app="myApp">0</body>

Bootstrapping)an)Application – ng 1 18 app.controller('AppController',0function($scope)0{ $scope.title =0'My Super0App';0 });
<body0ng3app="myApp"> <div0ng3controller="AppController"> This0app0is0called0{{0title }} </div> </body>

Bootstrapping)an)Application – ng 2 19 @Component({ selector:0'my3app', viewTemplate:0'<div>This0app0is0 called0{{0title }}</div>'
}) class AppComponent { this.title =0'My super0app'; } import {bootstrap}0from 'angular'; import {AppComponent}0from 'app';0 bootstrap(AppComponent); <html> <body> <my3app></my3app> </body>

Routing • New,Component, Router 20 @Component({ … }) @RouteConfig([ {0path:0'/login',0component:0LoginForm,0
name:0'Login',0data:0{0displayName:0'Login')}0}, {0path:0'/list/...',0component:0DataList,0 name:0'List',0data:0{0displayName:0'List')},0 useAsDefault:0true)} ]) export)class)MyApp { }

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

Change)Detection with Zones • In,Angular,2,no,need,to,call $scope.$apply • Magic,resides,inside,Angular,2,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() 22

Hierarchical)Change)Detection 23

Hierarchical)Change)Detection 24 @Component({ ..., changeDetection: ChangeDetectionStrategy.OnPush }) class TodoComponent {
todo:0Todo; }

Template)Syntax • Event,bindings • Property,bindings • Local variables 25

Template)Syntax 26 @Component({ selector:0'name3change',00 templateUrl:0'name3change.html'0}) class NameChange { constructor()0{ this.name
=0''; } changeName(newName)0{ this.name =0newName; } } <div>0My name is {{0name }}0</div> <div> <input #newname type="text"> <button (click)="changeName(newname.value)" [disabled]="newname.value ==0'CW'"> Change0Name </button> </div> <div>0My name is {{0name }}0</div> <div> <input #newname type="text"> <button on3click="changeName(newname.value)" bind3disabled="newname.value ==0'CW'"> Change0Name </button> </div>

Two;Way)Bindings • One$time,bindings by default – Simplification and performance •
Two$way binding is syntactic sugar – ng3model uses,combination,of,property, and,event,binding 27

Two;Way)Binding)Explained 28 <input [value]="name"> <p>Hello {{name}}</p> <input [value]="name" (input)="name =0$event.target.value">0
<p>Hello {{name}}</p> <input [ng3model]="name" (ng3model)="name =0$event">0 <p>Hello {{name}}</p> <input [(ng3model)]="name">0 <p>Hello {{name}}</p>

Component vs.)Directive • A,component is a,directive with a,view • Directives
add behavior to a,DOM,element – Component can consist of directives 29 @Directive({ selector:0'[x3large]' }) export class XLargeDirective { constructor(public el:0ElementRef)0{ this.el.nativeElement.style.fontSize =0'x3large'; } } <span0x3large>Extra0Large0Text</span>

Build Process • In,real,projects we have a,build process • Tools,like,gulp.js
make life easier – Transpilation – Concatenation – Minification – Release,folder – and so,on… • Angular,2,is agnostic to actual underlying build process 30

Angular)1)&)Angular)2 31

„What about my Angular)1.x)Code?“ • „What about my JavaScript,code?“ –
Don‘t marry to frameworks • „What about my .NET,code?“ – Don‘t marry to frameworks • Adopt frameworks by using their features,,not, tying blindly into the framework 32

Interop)and)Migration • Nearly complete interoperability between Angular,1,&,2 • Team,is working
on ng,upgrade – Library,that enables calling Angular,1,code from Angular,2 and vice,versa • Using Component Router from Angular,1.5,can further easen the path 33

Open)Topics • View,encapsulation • Forms,in,depth • Universal,Angular 34

Summary • Angular,2,builds heavily on,the idea of Components • Start,building
today ! 35

Resources • Angular,2 – 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 • Angular,1,and,Angular,2,integration:,the,path,to,seamless,upgrade – http://angularjs.blogspot.com.es/2015/08/angular$1$and$angular$2$ coexistence.html?m=1 37

Resources • [email protected] • http://www.thinktecture.com • Thinktecture’s GitHub,Repositories – https://github.com/thinktecture
38

Angular 2: Komponentenbasierte HTML5-Anwendungen

Angular 2: Komponentenbasierte HTML5-Anwendungen

More Decks by Christian Weyer

Other Decks in Programming

Featured

Transcript