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.

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

8. Type Annotations

9. Generics

10. Type Introspection

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