Prezentacja z meetupu grupy "Uszanowanko Programowanko", tematyka AngularJS: http://www.uszanowanko.pl/angular Autor: Andrzej Herok. Krótki przegląd najważniejszych zmian zapowiadanych w nowej wersji Angulara. Poszukamy zarówno lepszych i gorszych cech.

1. AngularJS 2.0
Kochaj albo rzuć
Andrzej Herok

2. Dlaczego 2.0 ?

3. Postęp standardów WEB
- Shadow DOM
- Object.observe()
- Modułowość ES6
Dlaczego 2.0?

4. Wydajność
- 1-way binding
- component caching
Dlaczego 2.0?

5. Uproszczenie konceptów
Angular 1.x
- Module
- Controller
- Service
- Factory
- Directive
- ...
Angular 2
- Component
- Directive
- ?
Dlaczego 2.0?

6. Angular ”JS” ?

7. ECMAScript 5
var x;
Date.now()
['a','b','c'].indexOf('b')
Angular “JS”?

8. ECMAScript 6
class Bike extends Vehicle {
constructor(name) {
this.name = name
}
}
“Hello, my name is ${name}.”
export var pi = 3.141593;
Angular “JS”?

9. TypeScript
function addClass(selectors:Array<string>) { ... }
class Vehicle {
model : string;
}
Angular “JS”?

10. ATScript
@Directive({
selector: '[blink]'
})
class Blink { constructor(element:Element){
}
}
Angular “JS”?

11. ATScript
Angular “JS”?

12. Wsparcie przeglądarek?
traceur
https://github.com/google/traceur-compiler

13. Wsparcie przeglądarek?
//ATScript
@Directive({
selector: '[blink]'
})
class Blink {
constructor(element:Element){
}
}

14. Wsparcie przeglądarek?
//ES5
function Blink(element){
}
Blink.annotations = [
new Directive({selector: '[blink]'})
];
Blink.parameters = [Element];

15. Komponent

16. Komponent
@Component({
selector: 'todo-app',
template: new TemplateConfig({
url: '/todos.html'
})
})
class TodoApp {
todos;
construct () {
this.todos = ['Item1', 'Item2'];
}
}

17. Śledzenie zmian
http://victorsavkin.com/post/86909839576/angulardart-1-0-for-angularjs-developers

18. Router

19. Router
- budowa komponentowa (child apps)

20. Router
- budowa komponentowa (child apps)
- convention over configuration

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

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

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

24. Router
angular.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.html
components/detail/detail.js

25. szablony

26. local vars
<input #newname type="text">
<button (click)="changeName($event, newname.value)"
[disabled]= "newname.value == 'David'" >Change name</button>

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

28. properties
<img [src]="item.image"><span>{{ item.name }}</span>
<div [class.hidden]=”item == ‘Dawid’”>{{ item }}</div>

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

30. zone.js

31. zone.js
function(){
// start
a();
setTimeout(b, 0);
setTimeout(c, 0);
d();
// end
}
// start
a
d
// end
b ?
c ?

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

33. Jak wykorzystać Zone w Angular?
$scope.$digest()
Firebase?

34. podsumowanie

35. podsumowanie
- mało konkretów

36. podsumowanie
- mało konkretów
- drastyczne zmiany

37. podsumowanie
- mało konkretów
- drastyczne zmiany
- brak kompatybilności wstecz

38. podsumowanie
- mało konkretów
- drastyczne zmiany
- brak kompatybilności wstecz
- “udziwniona” składnia HTML

39. podsumowanie
- mało konkretów
- drastyczne zmiany
- brak kompatybilności wstecz
- “udziwniona” składnia HTML
- Niestandardowy język

40. Dziękuję!