angular 2.0: brighter future?
TRANSCRIPT
![Page 1: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/1.jpg)
Angular 2.0Brighter future?
*Angular momentum imageEugene Zharkov
![Page 2: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/2.jpg)
![Page 3: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/3.jpg)
2.0 source code
![Page 4: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/4.jpg)
Angular 1.3 support ~2 years after 2.0 release
![Page 5: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/5.jpg)
Why I hate Angular?• Routing
• Directives
• Binding
• Scope
• Scope
• RootScope
• Continue…
![Page 6: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/6.jpg)
AtScript
![Page 7: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/7.jpg)
AtScript
• Superset of ES6
• TypeScript is my friend
• Type, Field, Metadata Annotations
![Page 8: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/8.jpg)
Type Annotations
![Page 9: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/9.jpg)
Generics
![Page 10: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/10.jpg)
Type Introspection
![Page 11: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/11.jpg)
You can skip AtScript and use CoffeeScript,
TypeScript, ES6, ES5
![Page 12: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/12.jpg)
DI
![Page 13: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/13.jpg)
Annotations
MyComponent.parameters = [{is:Server}];
![Page 14: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/14.jpg)
Instance Scope
@TransientScope export class MyClass { ... }
DI will always create a new instance of a class, every time you ask for one
![Page 15: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/15.jpg)
Child Injectors
A child injector inherits from its parent all of its parent's services, but it has the ability to override them at the child
level.
![Page 16: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/16.jpg)
Directives
• Component Directive
• Decorator Directive (ng-show)
• Template Directive (ng-if || ng-repeat)
![Page 17: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/17.jpg)
@ComponentDirective({ selector:'tab-container', directives:[NgRepeat] }) export class TabContainer { constructor(panes:Query<Pane>) { this.panes = panes; }
select(selectedPane:Pane) { ... } }
CSS selector
Dependencies
no $scope
such wow
direct access in the template
![Page 18: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/18.jpg)
@DecoratorDirective({ selector:'[ng-show]', bind: { 'ngShow': 'ngShow' }, observe: {'ngShow': 'ngShowChanged'} }) export class NgShow { constructor(element:Element) { this.element = element; }
ngShowChanged(newValue){ if(newValue){ this.element.style.display = 'block'; }else{ this.element.style.display = 'none'; } } }
html attributescallback
during property change
![Page 19: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/19.jpg)
@TemplateDirective({ selector: '[ng-if]', bind: {'ngIf': 'ngIf'}, observe: {'ngIf': 'ngIfChanged'} }) export class NgIf { constructor(viewFactory:BoundViewFactory, viewPort:ViewPort) { this.viewFactory = viewFactory; this.viewPort = viewPort; this.view = null; }
ngIfChanged(value) { if (!value && this.view) { this.view.remove(); this.view = null; }
if (value) { this.view = this.viewFactory.createView(); this.view.appendTo(this.viewPort);
html attributescallback
during property change
CSS selector
represents the location in the DOM
instantiates the template itself
![Page 20: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/20.jpg)
@ComponentDirective({ selector:'tab-container', directives:[NgRepeat] }) export class TabContainer { constructor(panes:Query<Pane>) { this.panes = panes; }
select(selectedPane:Pane) { ... } }
![Page 21: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/21.jpg)
[] - attribute binding ${} - content as a string
pane - variable name (^click) - event handler
![Page 22: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/22.jpg)
Router
• Shiny new toy
• Child Routers
• Screen Activation
![Page 23: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/23.jpg)
Angular developers during 2.0 release
![Page 24: Angular 2.0: Brighter future?](https://reader034.vdocument.in/reader034/viewer/2022052400/55994ffc1a28abf66e8b4692/html5/thumbnails/24.jpg)