Presentation on some of AngularJS 2.0 features that are going to change the framework and how to get involved in the discussion about it.

1. ng-poznań 20.11.2014, Kamil Augustynowicz, @AugKamil

2. WHEN IT WILL
ARRIVE?

3. WE'RE NOT ALONE

4. IT'S EVOLUTION BABY
Better performance
Prepare AngularJS for changes in the web
Focus on mobile
Make it easier to use for developers

5. WEB COMPONENTS
Custom elements
HTML imports
Templates
Shadow DOM

6. WHAT THEY REMOVE?
Controllers
DDO (Directive Definition Object)
$scope
angular.module
jqLite

8. kangax.github.io/compat-table/es6

9. ATSCRIPT
AngularJS 2.0 will be build in it
It's backward compatible with ES5
Types, fields, metadata annotations
It's implemented on top of Traceur (it compiles to JavaScript
and Dart)

10. ATSCRIPT ­ES6
import {Server} from './server';
class Inject {}
class Component {
selector:string;
constructor({selector:string}) {
this.selector = selector;
}
}
@Component({selector: 'foo'})
class MyComponent {
@Inject()
constructor(server:Server) {}
}
import * as rtts from 'rtts';
import {Server} from './server';
class Inject {}
class Component {
selector:string;
constructor({selector}) {
this.selector = selector;
}
}
class MyComponent {
constructor(server:Server) {}
}
MyComponent.parameters = [{is:Server}];
MyComponent.annotate = [
new Component({selector: 'foo'}),
new Inject()
];

11. DIRECTIVES
Component Directive - custom HTML element
Decorator Directive (eg. ng-show)
Template Directive (eg. ng-if, ng-repeat)

12. A COMPONENT DIRECTIVE
@ComponentDirective({
selector:'my-selector',
directives:[MyDependency]
})
export class MySelector {
constructor(elements:Query<Element>) {
this.elements = elements;
}
select(selectedElement:Element) { ... }
}

13. CONTROLLERS
@ComponentDirective
export class MyController {
constructor(server:Server) {
this.server = server;
this.element = null;
}
action(id) {
return this.server.findSomething(id)
.then(response => this.element = response.element);
}
}

14. TEMPLATES
[bind] - binding expression
${string} - string interpolation
(^event) - event handler
<template>
<div class="border">
<div class="tabs">
<div [ng-repeat|pane]="panes" class="tab" (^click)="select(pane)">
<img [src]="pane.icon"><span>${pane.name}</span>
</div>
</div>
<content></content>
</div>
</template>

15. ROUTER
Child Routers for each component
Screen Activation (canActivate, activate, canDeactivate,
deactivate)

16. IT'S NOT THE END FOR THIS

17. JUMP IN AND GET
INVOLVED
AngularJS meeting notes
Syntax disscusion (issue #133)
Design docs AngularJS 2.0
Github repo
Bradly Green, Igor Minar, Brian Ford, Jeffb Cross

18. THANK YOU
Kamil Augustynowicz / @AugKamil
briisk.co

19. CREDITS:
Podcast with AngularJS core team
Traceur
ES6
WebComponents
ng-europe talks
All about AngularJS 2.0
PICTURES:
Slide 2 picture by Maria Schaefer
Slide 3 picture by patriziasoliani
Slide 6 picture by Matt Katzenberger
Slide 16 picture by badjonni