ANGULARJS 2.0 JUMPSTART

About me

Filipe FalcãoComputer Science, JavaScript, Python

+FilipeFalcaoBatista@FilipeFalcaoS

Topics

1. Motivation2. Old vs new concepts

Motivation

1. Performance“Today, Angular 2 is 5 times faster than Angular 1”

–Misko Hevery

Motivation

2. Web standardsShadow DOM replaces transclusionES6 Modules replaces Angular ones

Old vs new concepts

1. Components2. AtScript and ES6

3. Bootstraping4. Syntax changes and uniformity

5. Change detection

Before we get started…

AngularJS 2.0 is currently in Alpha Preview, so things might/can/

definitely will change

Components@Component ({

selector: 'my-component'})@View ({

inline: '<div>Hi from Angular 2</div>'})

export class MyComponent {constructor () {

this.name = 'Filipe'}sayMyName () {

console.log(‘'My name is ‘ + this.name)}

}

AtScriptSyntax sugar on top of ES6 for meta-data annotations

@Component ({selector: 'my-component'

})@View ({

inline: '<div>Hi from Angular 2</div>'})

ES6Represents the “controller"

export class MyComponent {constructor () {

this.name = 'Filipe'}sayMyName () {

console.log(‘'My name is ‘ + this.name)}

}

Bootstraping in 1.x

1. Create module2. Declare ng-app

3. Create controller4. Manage $scope

5. Declare ng-controller6. Create template

Bootstraping in 2.0

1. Create component2. Create template

3. Bootstrap4. Transpilation

import bootstrap from 'angular2'bootstrap(MyComponent)

Syntax changes

1. Local variables<input #name type=“text”>{{ name.value }}

Syntax changes

2. Event handlers<input #name type=“text”><button (click)=“addName($event, name.value)”>Add</button><button (dbclick)=“editName($event, name.value)”>Edit</button>

Syntax changes

3. Property bindings<input #name type=“text”><span [textContent]=“name.value”></span>

Syntax uniformity

1. (event) - for HTML DOM events2. [property] - for HTML properties

Change detection1. Tree of components

2. Reactive system3. Directed tree

4. Detection system walks the whole tree5. Immutable/Observable objects - O(n) to

O(log n)6. Zone.js

More resources

2. ng-conf and ng-vegas1. angular.io

3. learnangular2.com4. 2do app by David East

THANKS!

Any questions?

You can find me at:+FilipeFalcaoBatista

@FilipeFalcaoS