Uszanowanko Programowanko #2 - Angular 2.0 Kochaj albo rzuć!
-
Upload
the-software-house -
Category
Software
-
view
413 -
download
3
Transcript of Uszanowanko Programowanko #2 - Angular 2.0 Kochaj albo rzuć!
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ę!