AngularJS 2.0Kochaj albo rzuć

Andrzej Herok

Dlaczego 2.0 ?

Postęp standardów WEB

- Shadow DOM- Object.observe()- Modułowość ES6

Dlaczego 2.0?

Wydajność

- 1-way binding- component caching

Dlaczego 2.0?

Uproszczenie konceptów

Angular 1.x- Module

- Controller- Service- Factory

- Directive- ...

Angular 2- Component

- Directive- ?

Dlaczego 2.0?

Angular ”JS” ?

ECMAScript 5

var x;

Date.now()

['a','b','c'].indexOf('b')

Angular “JS”?

ECMAScript 6class Bike extends Vehicle {

constructor(name) {

this.name = name

}

}

“Hello, my name is ${name}.”

export var pi = 3.141593;

Angular “JS”?

TypeScript

function addClass(selectors:Array<string>) { ... }

class Vehicle {

model : string;

}

Angular “JS”?

ATScript

@Directive({ selector: '[blink]'})class Blink { constructor(element:Element){

}

}

Angular “JS”?

ATScriptAngular “JS”?

Wsparcie przeglądarek?

traceur

https://github.com/google/traceur-compiler

Wsparcie przeglądarek?//ATScript

@Directive({ selector: '[blink]'})class Blink {

constructor(element:Element){

}

}

Wsparcie przeglądarek?//ES5

function Blink(element){

}

Blink.annotations = [

new Directive({selector: '[blink]'})

];

Blink.parameters = [Element];

Komponent

Komponent@Component({

selector: 'todo-app',

template: new TemplateConfig({

url: '/todos.html'

})

})

class TodoApp {

todos;

construct () {

this.todos = ['Item1', 'Item2'];

}

}

Śledzenie zmian

http://victorsavkin.com/post/86909839576/angulardart-1-0-for-angularjs-developers

Router

Router

- budowa komponentowa (child apps)

Router

- budowa komponentowa (child apps)- convention over configuration

Router

- budowa komponentowa (child apps)- convention over configuration- Screen Activation (canActivate, commands)

Router

- budowa komponentowa (child apps)- convention over configuration- Screen Activation (canActivate, commands)- History

Router

- budowa komponentowa (child apps)- convention over configuration- Screen Activation (canActivate, commands)- History- 1.4 port!

Routerangular.module('app', ['ngNewRouter']) .controller('AppController', [ '$router', AppController]);

function AppController ($router) { $router.config([ {path: '/', component: 'home', title: 'welcome'} {path: '/detail/:id', component: 'detail' } ]);}

components/detail/detail.htmlcomponents/detail/detail.js

szablony

local vars

<input #newname type="text">

<button (click)="changeName($event, newname.value)"

[disabled]="newname.value == 'David'" >Change name</button>

events

<button (click)="changeName(newname)">Change name</button>

properties

<img [src]="item.image"><span>{{ item.name }}</span>

<div [class.hidden]=”item == ‘Dawid’”>{{ item }}</div>

directives

<div [ng-repeat|item]="items">

zone.js

zone.jsfunction(){

// start

a(); setTimeout(b, 0); setTimeout(c, 0); d(); // end

}

// start

ad// end

b ?c ?

zone.jszone.run(function(){ // start a(); setTimeout(b, 0); setTimeout(c, 0); d(); // end

})

// start

adbc// end

Jak wykorzystać Zone w Angular?

$scope.$digest()

Firebase?

podsumowanie

podsumowanie

- mało konkretów

podsumowanie

- mało konkretów- drastyczne zmiany

podsumowanie

- mało konkretów- drastyczne zmiany

- brak kompatybilności wstecz

podsumowanie

- mało konkretów- drastyczne zmiany

- brak kompatybilności wstecz- “udziwniona” składnia HTML

podsumowanie

- mało konkretów- drastyczne zmiany

- brak kompatybilności wstecz- “udziwniona” składnia HTML

- Niestandardowy język

Dziękuję!