Le futur de AngularJS (2.0)
Télécharger en tant que PPTX, PDF3 j'aime3,005 vues
Le document présente les nouveautés d'AngularJS 2.0, y compris l'évolution vers ECMAScript 6 et l'utilisation de TypeScript. Il souligne également les changements majeurs tels que l'abandon des directives et l'introduction de nouvelles syntaxes pour améliorer l'expérience développeur. Le passage à AngularJS 2.0 implique une réécriture significative des projets existants, avec une sortie prévue au mieux fin 2015.
![16
Syntaxe
AngularJS 2.0
<div>
<input type="text" newTodoTitle">
<button addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div good')">
<input type="checkbox"
done">
<button todo)">
X
</button>
</div>
</tab-pane>
...
[value]="newTodoTitle"
(click)="addTodo()"
[ng-repeat|todo]="todosOf('good')"
[checked]="todo.done"
{{todo.title}}
(click)="deleteTodo(todo)"](https://image.slidesharecdn.com/prezangularjs-141128024416-conversion-gate02/85/Le-futur-de-AngularJS-2-0-16-320.jpg)
![19
Directives
Component Directive
@ComponentDirective({
selector:'tab-container',
directives:[NgRepeat]
})
class TabContainer {
constructor(panes:Query<Pane>) {
this.panes = panes;
}
select(selectedPane:Pane) { ... }
}](https://image.slidesharecdn.com/prezangularjs-141128024416-conversion-gate02/85/Le-futur-de-AngularJS-2-0-19-320.jpg)
Le futur de AngularJS (2.0)
- 1. 1 C’est moi ! Clément Dubois @Clement_D Consultant chez Octo Technology depuis 2013 Développeur Web AngularJS Mais aussi Ruby On Rails et Symfony 2
- 2. 2 ng-europe
- 3. 3 AngularJS 2.0 Quoi de neuf Angular ?
- 4. 4 L’environnement Javascript Les nouveautés d’AngularJS 2.0
- 5. 5 EcmaScript AngularJS 1.x Javascript EcmaScript 5 Standard AngularJS 2 Javascript EcmaScript 6
- 6. 6 EcmaScript 6 EcmaScript 5 EcmaScript 6
- 7. 7 TypeScript
- 8. 8 TypeScript TypeScript EcmaScript 5
- 9. 9 AtScript
- 10. 10 AtScript AtScript EcmaScript 6
- 11. 11 Le tout
- 12. 12 Traceur 5 6
- 13. 13 AngularJS 2.0
- 14. 14 Objectifs Pourquoi ??? Framework conçu pour le futur du web Meilleure Developer Experience Meilleure performance
- 15. 15 Syntaxe AngularJS 1.3 ng-controller="SantaTodoController" <div SantaTodoController"> <input type="text" newTodoTitle"> <button ng-click="addTodo()">+</button> <tab-container> <tab-pane title="Tobias"> <div tobias')"> <input type="checkbox" ng-model="todo.done"> done" {{todo.title}} <button todo)"> X </button> </div> </tab-pane> ... ng-model="newTodoTitle" addTodo()" ng-repeat="todo in todosOf('tobias')" ng-click="deleteTodo(todo)"
- 16. 16 Syntaxe AngularJS 2.0 <div> <input type="text" newTodoTitle"> <button addTodo()">+</buton> <tab-container> <tab-pane title="Good kids"> <div good')"> <input type="checkbox" done"> <button todo)"> X </button> </div> </tab-pane> ... [value]="newTodoTitle" (click)="addTodo()" [ng-repeat|todo]="todosOf('good')" [checked]="todo.done" {{todo.title}} (click)="deleteTodo(todo)"
- 17. 17 Directives Directives are dead, long live directives ! “ ” Saying
- 18. 18 Utilisation de AtScript Directives La fin du DDO Decorator Directive Ajout de comportement au HTML Ex : ng-show Component Directive Template Directive HTML as template Ex : ng-if, ng-repeat Controller + View
- 19. 19 Directives Component Directive @ComponentDirective({ selector:'tab-container', directives:[NgRepeat] }) class TabContainer { constructor(panes:Query<Pane>) { this.panes = panes; } select(selectedPane:Pane) { ... } }
- 20. 20 Hécatombe AngularJS 1.x AngularJS 2 Controller Directive ES6 Module $scope JqLite angular.module Raw DOM
- 21. 21 En bref Les standards du web évoluent AngularJS 2.0 évolus avec le web Des changements majeurs Pas de rétrocompatibilité Ça va encore beaucoup bouger
- 22. 22 On fait quoi ? On va devoir tout réécrire en 2.0 ?! Au vu des changements majeurs : OUI 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 !
- 23. 23 Merci
- 24. 24 Quelques liens 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
Notes de l'éditeur
- #3: Brad Green Igor Minar
- #6: ES6 : Juin 2015
- #7: Exemple Class et Module ES6 et ES5
- #8: Surcouche microsoft Typage statique Compilé en ES5 ou ES6
- #10: Google Introspection de type Annotation METADONNEES Typage dynamique
- #12: Angular est écrit en AtScript AtScript optionnel !
- #13: Transpiler Une seule base de code ! Optionnel
- #17: (event) [attribut] Web Component (Futur) Générique
- #19: Directive Definition Object DX
- #20: Annotation AtScript Type typeScript Class ES6 Injection de dépendance
- #21: Controller $scope Angular.module
- #22: ES6 + WebComponent