Angular 2.0

Angular 1.x

Angular 1.x

Angular 1.x

Angular 1.x

Angular 1.x

Angular 1.x

Web Components

Angular 1.x

Web Components

Web Components

Angular 1.x

Angular 1.x

Web Components

Web Components

Angular 2.0

DAVID EAST

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

a

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

a b

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

a b

c

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

a b

cd

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

a

b

c

d

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

a

b

c

d

timer.start();

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

timer.stop();

a

b

c

d

timer.start();

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

timer.stop();

a

b

c

d

start

stop

timer.start();

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

timer.stop();

a

b

c

d

start

stop

apply

timer.start();

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

timer.stop();

a

b

c

d

timer.start();

a();

setTimeout( b, 0 );

setTimeout( c, 0 );

d();

timer.stop();

a

b

c

d

apply

$scope.$apply(function () {

$scope.message = "Timeout called!";

});

module.directive('autocomplete', ['autocompleter',

function(autocompleter) {

return {

restrict: 'A',

link: function (scope, element, attrs) {

//...

}

}

}]);

@Decorator({selector: '[autocomplete]'})

class Autocomplete {

constructor(autocompleter:Autocompleter,

el:NgElement, attrs:NgAttributes){

//...

}

}

@

Type annotations and compile-time type checkingType inference

ClassesInterfaces

Enumerated typeMixin

GenericModules

Abbreviated "arrow" syntax for anonymous functionsOptional parameters and default parameters

Tuple

template proto view DOM node

<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>Rob Eisenberg

[property]

(event)

${interpolate}

ng-click

ng-src

ng-click event listener

ng-src property

[property]

(event)

${interpolate}

main router

child router

/A

/B /C

/A /1 /A /2 /A /3

@

{ }

1.3 1.4 2.01.2 1.5

ECMA 6Typescript

Avoid $scope

Combine controller

with directive

ECMA 6Modules

AvoidjQuery