Embed Size (px)
Citation preview
Angular 2
Allen Holub http://holub.com [email protected]
@allenholub
©2017 Allen I. Holub. All rights reserved. http://holub.com
http://holub.com/slides
1
Useful links
2 ©2017 Allen I. Holub. All rights reserved. http://holub.com
2-1
Useful linkshttps://angular.io/docs/ts/latest/guide/
2 ©2017 Allen I. Holub. All rights reserved. http://holub.com
2-2
Useful linkshttps://angular.io/docs/ts/latest/guide/https://angular.io/docs/ts/latest/guide/cheatsheet.html
2 ©2017 Allen I. Holub. All rights reserved. http://holub.com
2-3
Useful linkshttps://angular.io/docs/ts/latest/guide/https://angular.io/docs/ts/latest/guide/cheatsheet.htmlhttps://www.typescriptlang.org/
2 ©2017 Allen I. Holub. All rights reserved. http://holub.com
2-4
Useful linkshttps://angular.io/docs/ts/latest/guide/https://angular.io/docs/ts/latest/guide/cheatsheet.htmlhttps://www.typescriptlang.org/https://github.com/aholub/angular
2 ©2017 Allen I. Holub. All rights reserved. http://holub.com
2-5
Useful linkshttps://angular.io/docs/ts/latest/guide/https://angular.io/docs/ts/latest/guide/cheatsheet.htmlhttps://www.typescriptlang.org/https://github.com/aholub/angular
2 ©2017 Allen I. Holub. All rights reserved. http://holub.com
git clone https://github.com/angular/quickstart.git quickstartcd quickstartnpm installnpm start
“Quickstart Seed”
2-6
Architecture
3 ©2017 Allen I. Holub. All rights reserved. http://holub.com
Component
Component Component
Component Component
Module
3-1
Architecture
3 ©2017 Allen I. Holub. All rights reserved. http://holub.com
Component
Component Component
Component Component
Template (html)
data/methods(typescript)
metadata(in module)
{
Module
3-2
Architecture
3 ©2017 Allen I. Holub. All rights reserved. http://holub.com
Component
Component Component
Component Component
Template (html)
data/methods(typescript)
metadata(in module)
{
Module
Service
Service
Service
3-3
Bindings
4 ©2017 Allen I. Holub. All rights reserved. http://holub.com
{{value}}
[property] = "value"
(event) = "handler"
[(ng-model)] = "property"
<li>{{hero.name}}</li><hero-detail [hero]="selectedHero"></hero-detail><li (click)="selectHero(hero)"></li>
DOM Component
4
Directives
5 ©2017 Allen I. Holub. All rights reserved. http://holub.com
*ngFor="…"
*ngIf
<li *ngFor="let hero of heroes"></li><hero-detail *ngIf="selectedHero"></hero-detail>
5
Other StuffDependency Injection Services (are essentially just classes) Form support Lifecycle hooks Router Testing (Angular Testing Platform)
6 ©2017 Allen I. Holub. All rights reserved. http://holub.com
6
The good…
7 ©2017 Allen I. Holub. All rights reserved. http://holub.com
7-1
Bindings are way cool The fact that everything updates automatically saves a lot of dev time.
The good…
7 ©2017 Allen I. Holub. All rights reserved. http://holub.com
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 ©2017 Allen I. Holub. All rights reserved. http://holub.com
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 ©2017 Allen I. Holub. All rights reserved. http://holub.com
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
Components are uniform Well defined structure and lifecycle
The good…
7 ©2017 Allen I. Holub. All rights reserved. http://holub.com
7-5
The bad and the ugly
8 ©2017 Allen I. Holub. All rights reserved. http://holub.com
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 ©2017 Allen I. Holub. All rights reserved. http://holub.com
8-2
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 ©2017 Allen I. Holub. All rights reserved. http://holub.com
Presentation(javascript/html)
Abstraction(Microservice)
Agent
Presentation Abstraction Control
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 ©2017 Allen I. Holub. All rights reserved. http://holub.com
8-4
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 html bugs are hard to find
Directives are too limitingDebugging is Painful (mysterious runtime errors)
The bad and the ugly
8 ©2017 Allen I. Holub. All rights reserved. http://holub.com
8-5
code()
©2017 Allen I. Holub. All rights reserved. http://holub.com
9
?www.holub.com
Allen Holub http://holub.com [email protected]
@allenholub
©2017 Allen I. Holub. All rights reserved. http://holub.com
10
