le futur de angularjs (2.0)
TRANSCRIPT
![Page 1: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/1.jpg)
1
C’est moi !
Consultant chez Octo Technology depuis 2013
Développeur Web AngularJS
Mais aussi Ruby On Rails et Symfony 2
Clément Dubois
@Clement_D
![Page 2: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/2.jpg)
2
ng-europe
![Page 3: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/3.jpg)
3
AngularJS 2.0
Quoi de neuf Angular ?
![Page 4: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/4.jpg)
4
L’environnement
Javascript
Les nouveautés
d’AngularJS 2.0
![Page 5: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/5.jpg)
5
EcmaScript
AngularJS1.x
Javascript EcmaScript 5
Standard
AngularJS 2 Javascript EcmaScript 6
![Page 6: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/6.jpg)
6
EcmaScript 6
EcmaScript 5 EcmaScript 6
![Page 7: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/7.jpg)
7
TypeScript
![Page 8: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/8.jpg)
8
TypeScript
EcmaScript 5
TypeScript
![Page 9: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/9.jpg)
9
AtScript
![Page 10: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/10.jpg)
10
AtScript
AtScript
EcmaScript 6
![Page 11: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/11.jpg)
11
Le tout
![Page 12: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/12.jpg)
12
Traceur
5
6
![Page 13: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/13.jpg)
13
AngularJS 2.0
![Page 14: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/14.jpg)
14
Objectifs
Pourquoi ???
Framework conçu pour le futur du web
Meilleure Developer Experience
Meilleure performance
![Page 15: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/15.jpg)
15
Syntaxe
<div ng-controller="SantaTodoController">
<input type="text" ng-model="newTodoTitle">
<button ng-click="addTodo()">+</button>
<tab-container>
<tab-pane title="Tobias">
<div ng-repeat="todo in todosOf('tobias')">
<input type="checkbox"
ng-model="todo.done">
{{todo.title}}
<button ng-click="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...
AngularJS 1.3
ng-controller="SantaTodoController"
ng-model="newTodoTitle"
ng-click="addTodo()"
ng-repeat="todo in todosOf('tobias')"
ng-click="deleteTodo(todo)"
ng-model="todo.done"
{{todo.title}}
![Page 16: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/16.jpg)
16
Syntaxe
AngularJS 2.0
<div>
<input type="text" [value]="newTodoTitle">
<button (click)="addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div [ng-repeat|todo]="todosOf('good')">
<input type="checkbox"
[checked]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...
[value]="newTodoTitle"
(click)="addTodo()"
[ng-repeat|todo]="todosOf('good')"
[checked]="todo.done"
{{todo.title}}
(click)="deleteTodo(todo)"
![Page 17: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/17.jpg)
17
Directives
Directives are dead, long live directives !
“
”Saying
![Page 18: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/18.jpg)
18
Utilisation de AtScript
Directives
La fin du DDO
Decorator DirectiveAjout de comportement au HTML
Ex : ng-show
Template DirectiveHTML as template
Ex : ng-if, ng-repeat
Component DirectiveController + View
![Page 19: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/19.jpg)
19
Directives
@ComponentDirective({
selector:'tab-container',
directives:[NgRepeat]
})
class TabContainer {
constructor(panes:Query<Pane>) {
this.panes = panes;
}
select(selectedPane:Pane) { ... }
}
Component Directive
![Page 20: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/20.jpg)
20
Hécatombe
Controller
Directive
ES6 Module
$scope
JqLite
angular.module
Raw DOM
AngularJS 1.x AngularJS 2
![Page 21: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/21.jpg)
21
Les standards du web évoluent
AngularJS 2.0 évolus avec le web
Des changements majeurs
Pas de rétrocompatibilité
Ça va encore beaucoup bouger
En bref
![Page 22: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/22.jpg)
22
Au vu des changements majeurs : OUI
On fait quoi ?
On va devoir tout réécrire en 2.0 ?!
J’ai combien de temps pour le voir arriver ?
Sortie au mieux fin 2015 Maintenance 1.x : 3 ans
Pas de Angular sur mon nouveau projet ?
Répond au besoin ? Durée de vie ?
Keep Going !
![Page 23: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/23.jpg)
23
Merci
![Page 24: Le futur de AngularJS (2.0)](https://reader034.vdocuments.mx/reader034/viewer/2022052318/55a141801a28abf8278b481d/html5/thumbnails/24.jpg)
24
Hello World Angular 2.0 : http://bit.ly/15FR75R
All About Angular 2.0 : http://bit.ly/1Ay4dQ5
Typing in AtScript, TypeScript and Flow : http://bit.ly/1zZQ1LY
Quelques nouveautés ECMASCRIPT 6 : http://bit.ly/1tosIa4
AtScript Primer : http://bit.ly/1xPnh5s
AngularJS Pour aujourd’hui et pour demain : http://bit.ly/1Go7P7L
Ngeurope AtScript : http://bit.ly/115fgAa
Ngeurope AngularJs2.0 : http://bit.ly/1wwXqP3
Quelques liens