ng-poznań 20.11.2014, Kamil Augustynowicz, @AugKamil

WHEN IT WILLARRIVE?

WE'RE NOT ALONE

IT'S EVOLUTION BABY

Better performancePrepare AngularJS for changes in the webFocus on mobileMake it easier to use for developers

WEB COMPONENTSCustom elementsHTML importsTemplatesShadow DOM

WHAT THEY REMOVE?ControllersDDO (Directive Definition Object)$scopeangular.modulejqLite

kangax.github.io/compat-table/es6

ATSCRIPTAngularJS 2.0 will be build in itIt's backward compatible with ES5Types, fields, metadata annotationsIt's implemented on top of Traceur (it compiles to JavaScriptand Dart)

ATSCRIPT ­ ES6import {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()];

DIRECTIVESComponent Directive - custom HTML elementDecorator Directive (eg. ng-show)Template Directive (eg. ng-if, ng-repeat)

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

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

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>

ROUTERChild Routers for each componentScreen Activation (canActivate, activate, canDeactivate,deactivate)

IT'S NOT THE END FOR THIS

JUMP IN AND GETINVOLVED

AngularJS meeting notes

Syntax disscusion (issue #133)

Design docs AngularJS 2.0

Github repo

Bradly Green, Igor Minar, Brian Ford, Jeffb Cross

THANK YOUKamil Augustynowicz / @AugKamil

briisk.co

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