Angular 2 Allen Holub http://holub.com allen@holub.com @allenholub http://holub.com/slides 1 Useful links 2-1 2
https://angular.io/docs/ts/latest/guide/ Useful links 2 2-2 https://angular.io/docs/ts/latest/guide/ Useful links https://angular.io/docs/ts/latest/guide/cheatsheet.html 2 2-3
Useful links https://angular.io/docs/ts/latest/guide/ https://angular.io/docs/ts/latest/guide/cheatsheet.html https://www.typescriptlang.org/ 2 2-4 https://angular.io/docs/ts/latest/guide/ Useful links https://angular.io/docs/ts/latest/guide/cheatsheet.html https://www.typescriptlang.org/ https://github.com/aholub/angular 2 2-5
Useful links https://angular.io/docs/ts/latest/guide/ https://angular.io/docs/ts/latest/guide/cheatsheet.html https://www.typescriptlang.org/ https://github.com/aholub/angular Quickstart Seed git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start 2 2-6 Module Architecture 3 3-1
Module Architecture Template (html) { data/methods (typescript) metadata (in module) 3 3-2 Module Architecture Service Service Service { Template (html) data/methods (typescript) metadata (in module) 3-3 3
{{value}} Bindings DOM [property] = "value" (event) = "handler" [(ng-model)] = "property" <li>{{hero.name}}</li> <hero-detail [hero]="selectedhero"></hero-detail> <li (click)="selecthero(hero)"></li> 4 4 Directives *ngfor=" " *ngif <li *ngfor="let hero of heroes"></li> <hero-detail *ngif="selectedhero"></hero-detail> 5 5
Dependency Injection Services (are essentially just classes) Form support Lifecycle hooks Router Testing (Angular Testing Platform) Other Stuff 6 6 The good 7 7-1
Bindings are way cool The fact that everything updates automatically saves a lot of dev time. The good 7 7-2 Bindings are way cool The fact that everything updates automatically saves a lot of dev time. Easier than Javascript/JQuery Might be a plus if you're dealing with undisciplined programmers The good 7 7-3
Bindings are way cool The fact that everything updates automatically saves a lot of dev time. Easier than Javascript/JQuery Might be a plus if you're dealing with undisciplined programmers Architecture is well understood Can't use normal html-development tools Bugs are hard to find The good 7 7-4 Bindings are way cool The fact that everything updates automatically saves a lot of dev time. Easier than Javascript/JQuery Might be a plus if you're dealing with undisciplined programmers Architecture is well understood Can't use normal html-development tools Bugs are hard to find s are uniform Well defined structure and lifecycle The good 7 7-5
The bad and the ugly 8 8-1 It's an Angular app Angular owns your entire page Forces a data-object architecture on you No design flexibility, polyglot implementation, etc. Not great for μservices Write only Apps get complex and hard to read very quickly Definitions are spread all over the place The bad and the ugly 8-2 8
It's an Angular app Angular owns your entire page Forces a data-object architecture on you No design flexibility, polyglot implementation, etc. Not great for μservices Write only Apps get complex and hard to read very quickly Presentation Definitions are spread all over the place (javascript/html) The bad and the ugly Agent Abstraction (Microservice) Presentation Abstraction Control 8 8-3 It's an Angular app Angular owns your entire page Forces a data-object architecture on you No design flexibility, polyglot implementation, etc. Not great for μservices Write only Apps get complex and hard to read very quickly Definitions are spread all over the place The bad and the ugly 8-4 8
It's an Angular app Angular owns your entire page Forces a data-object architecture on you No design flexibility, polyglot implementation, etc. Not great for μservices Write only Apps get complex and hard to read very quickly Definitions are spread all over the place Uses strings for html Can't use normal html-development tools The bad and the ugly html bugs are hard to find Directives are too limiting Debugging is Painful (mysterious runtime errors) 8 8-5 code() 9
Allen Holub http://holub.com allen@holub.com @allenholub? www.holub.com 10