Angular 2.0: Brighter future?
2 likes727 views
This document discusses Angular 2.0 and some of its key features. It notes that Angular 1.3 support will continue for around 2 years after Angular 2.0's release. It describes some of the main concepts in Angular 2.0 like directives, dependency injection, routing and child routers. Code samples are provided to illustrate how components, decorators and template directives work in Angular 2.0 using annotations.
![Annotations
MyComponent.parameters = [{is:Server}];](https://image.slidesharecdn.com/angular2-141206022900-conversion-gate01/85/Angular-2-0-Brighter-future-13-320.jpg)
![@ComponentDirective({
selector:'tab-container',
directives:[NgRepeat]
})
export class TabContainer {
constructor(panes:QueryPane) {
this.panes = panes;
}
select(selectedPane:Pane) { ... }
}
CSS selector
Dependencies
such wow
no $scope
direct access in the template](https://image.slidesharecdn.com/angular2-141206022900-conversion-gate01/85/Angular-2-0-Brighter-future-17-320.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 attributes
callback
during property
change](https://image.slidesharecdn.com/angular2-141206022900-conversion-gate01/85/Angular-2-0-Brighter-future-18-320.jpg)
![@TemplateDirective({
selector: '[ng-if]',
bind: {'ngIf': 'ngIf'},
observe: {'ngIf': 'ngIfChanged'}
})
export class NgIf {
html attributes
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);
callback
during property
change
CSS selector
represents the location in the DOM
instantiates the template itself](https://image.slidesharecdn.com/angular2-141206022900-conversion-gate01/85/Angular-2-0-Brighter-future-19-320.jpg)
![@ComponentDirective({
selector:'tab-container',
directives:[NgRepeat]
})
export class TabContainer {
constructor(panes:QueryPane) {
this.panes = panes;
}
select(selectedPane:Pane) { ... }
}](https://image.slidesharecdn.com/angular2-141206022900-conversion-gate01/85/Angular-2-0-Brighter-future-20-320.jpg)
![pane - variable name
(^click) - event handler
[] - attribute binding ${} - content as a string](https://image.slidesharecdn.com/angular2-141206022900-conversion-gate01/85/Angular-2-0-Brighter-future-21-320.jpg)
Angular 2.0: Brighter future?
- 1. Angular 2.0 Brighter future? *Angular momentum image Eugene Zharkov
- 3. 2.0 source code 0Q
- 4. Angular 1.3 support ~2 years after 2.0 release
- 5. Why I hate Angular? • Routing • Directives • Binding • Scope • Scope • RootScope • Continue…
- 6. AtScript
- 7. AtScript • Superset of ES6 • TypeScript is my friend • Type, Field, Metadata Annotations
- 9. Generics
- 11. You can skip AtScript and use CoffeeScript, TypeScript, ES6, ES5
- 12. DI
- 13. Annotations MyComponent.parameters = [{is:Server}];
- 14. Instance Scope @TransientScope export class MyClass { ... } DI will always create a new instance of a class, every time you ask for one
- 15. 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.
- 16. Directives • Component Directive • Decorator Directive (ng-show) • Template Directive (ng-if || ng-repeat)
- 17. @ComponentDirective({ selector:'tab-container', directives:[NgRepeat] }) export class TabContainer { constructor(panes:QueryPane) { this.panes = panes; } select(selectedPane:Pane) { ... } } CSS selector Dependencies such wow no $scope direct access in the template
- 18. @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 attributes callback during property change
- 19. @TemplateDirective({ selector: '[ng-if]', bind: {'ngIf': 'ngIf'}, observe: {'ngIf': 'ngIfChanged'} }) export class NgIf { html attributes 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); callback during property change CSS selector represents the location in the DOM instantiates the template itself
- 20. @ComponentDirective({ selector:'tab-container', directives:[NgRepeat] }) export class TabContainer { constructor(panes:QueryPane) { this.panes = panes; } select(selectedPane:Pane) { ... } }
- 21. pane - variable name (^click) - event handler [] - attribute binding ${} - content as a string
- 22. Router • Shiny new toy • Child Routers • Screen Activation
- 23. Angular developers during 2.0 release