READY FOR ANGULAR 2 ?
@cbalit @douglasduteil
Angular 2 est encore en Alpha, ainsi la syntaxe présentée ici est sujet à être changée et | ou simplifiée
Disclaimer
Il était une fois un framework...
Angular
Créé par Miško Hevery et Adam Abronsw
Première version le 30 juin 2011 (2009)
Version actuelle 1.4.6 (17 septembre...
Des milliers d’applications en production:
https://www.madewithangular.com/
https://github.com/angular/angular.js/wiki/Pro...
Frameworks MVC mais
Architecture
Les ressources
■ angular-ui (composants boostrap , router…)
■ restangular
■ angular-strap
■ angular translate
■ ng-table
■...
OK
■ Productivité
■ Orienté Tests (l’injection de dépendances et les modules)
■ Orienté service (découplage)
■ Les templat...
KO
■ Dirty checking (boite noire)
■ Performance
■ Pas de rendering coté serveur : SEO :(
■ Syntaxe parfois éxotique (Servi...
La communication
Ng-Europe le 23 octobre 2014
L’incertitude
“On va pas le coder en Angular c’est mort votre truc”
- M. X -
Ok on recommence...
● Maintenance de la 1.X (2018)
● Ng-conf le 5 mars 2015
● Migration progressive (new Router, ng-upgrad...
Perspectives
■ Reboot complet
■ Supprime
■ les scopes
■ les controlleurs
■ DDO
■ Modules
Les objectifs
■ mobile first
■ Performance
■ TypeScript
■ Simplicité
■ Standards: ES6, Web components
■ ...
ref: https://a...
Les performances
“Today,
Angular2 is 5x
faster than
Angular 1”
Misko, 02/10/15
Deep Tree Benchmark 2015-02-09
Go...
Librairies tiers
■ System.js
■ universel (ES6
module, AMD,
Common..)
■ importe notre
application
■ es6-shim.js
■ transpile...
Le langage
■ Typescript
■ ES6
■ types
■ annotations
■ Javascript
■ ES6
■ ES5
@Component({
selector: 'my-app'
})
@View({
te...
Démarrage de notre application
■ Import
■ Définition d’un composant
■ boostrap
import {Component, View, bootstrap} from 'a...
Les composants
Simplification
Plus de controller, de scope… mais 2 types de composants:
■ Qui ajoutent un comportement au DOM: les direct...
Un composant
■ Une classe
■ utilise la syntaxe de
classe ES6
■ implémentation du
composant
■ Ce que verra la vue
class App...
Un composant
■ les annotations
■ component pour
associer une
composant à un
sélecteur
■ view pour indiquer
comment le
comp...
Un composant
■ importer les dépendances
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'my-app'...
Simplification : les directives
Plus de scope isolé, de restriction, de transclusion, de
compile/link….
Une directive
■ Annotation dédiée
import {Directive} from 'angular2/angular2';
@Directive({
})
export class MyDirective {
}
Une directive : plus de restrict
■ invocations possibles : un
selecteur
■ element-name: pour restreindre à
un élément
■ [a...
Une directive : plus de scope isolé
■ Properties
■ Paires de key-value
■ directiveProperty/bindi
ngProperty
import {Direct...
Une directive
■ Event
■ Propager des
évènements custom
■ écoute des
événements sur l’host
import {Directive} from 'angular...
Une directive
■ Pour l’utiliser
■ l’importer: plus de
collision de noms
■ déclarer la directive
dans l’annotation View
■ L...
Un service
■ Une simple classe
■ On récupère le service par
injection de dépendance
import {MyService} from 'path/to/MySer...
Le template
Simplification : templating
Properties, events et références
3 types de binding
Event et properties:
■ Lisibilité
■ Event et propriété sont l’API public d’un
composant
■ parent -> enfant : property bind...
Templating avancé
■ Importer les diectives
■ Les déclarer
■ Dans le template
import {CORE_DIRECTIVES} from 'angular2/angul...
Pipes: Transformer de la donnée
■ Pipes natifs
■ currency
■ date
■ lowercase, uppercase
■ limitTo
■ asynch
■ json
■ decima...
Routes
Boostrap
Récupérer les dépendances du
Router et les intégrer dans
notre injecteur
import {ROUTER_PROVIDERS, bootstrap} fro...
Configuration
■ RouterConfig
■ path: l’url associée
■ as: alias pour la route
utilisé pour référencer
les routes dans le
H...
Paramètres
■ Dans le path après ‘:’
■ accessibles via RouteParams injecté dans le composant
@RouteConfig([
{ path: '/secon...
Directives
■ router-link
■ router-outlet
<a [router-link]="['/firstComponent']">FirstComponent</a>
<a [router-link]="['/Se...
L’injection de dépendances
Angular 1
■ Identifié par un nom
■ Que des singletons
■ Toujours synchrones
■ Collision de noms
■ Intrinsèque au framework...
Le principe
■ L’injector expose l’API pour créer des instances de dépendances
■ Le Provider indique à l’injector comment c...
Récupérer une dépendance
■ Singleton
■ Pour avoir des instances
■ Utiliser une factory
■ Créer un injector fils
import { I...
Le provider
■ Fait le lien entre un TOKEN
et une FACTORY
■ Permet de découpler
dépendance et
implémentation
■ API pour:
■ ...
Injector fils
■ crée avec Injector.
createAndResolveChild()
■ Au niveau de chaque
composant
■ Ces instances seront alors
d...
Alors ?
■ Orientation composant
■ Simplification
■ Typescript, ES6
■ Stabilisation API/concepts (universalité)
■ Préparer la trans...
Pour en savoir plus
Sfeir School Angular 2
sfeirschool@sfeir.com
Ressources
● Site Officiel : https://angular.io/
● API : https://angular.io/docs/js/latest/api/
● Thoughtram Blog : http:/...
Merci ! @cbalit
@douglasduteil
Prochain SlideShare
Chargement dans…5
×

Angular 2 par Cyril Balit & Douglas Duteil

1 787 vues

Publié le

Retrouvez les slides de la présentation des nouveautés d'Angular 2 lors du meetup ngParis du mercredi 14 Octobre.

Publié dans : Logiciels
0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 787
Sur SlideShare
0
Issues des intégrations
0
Intégrations
25
Actions
Partages
0
Téléchargements
88
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Angular 2 par Cyril Balit & Douglas Duteil

  1. 1. READY FOR ANGULAR 2 ? @cbalit @douglasduteil
  2. 2. Angular 2 est encore en Alpha, ainsi la syntaxe présentée ici est sujet à être changée et | ou simplifiée Disclaimer
  3. 3. Il était une fois un framework...
  4. 4. Angular Créé par Miško Hevery et Adam Abronsw Première version le 30 juin 2011 (2009) Version actuelle 1.4.6 (17 septembre 2015)
  5. 5. Des milliers d’applications en production: https://www.madewithangular.com/ https://github.com/angular/angular.js/wiki/Projects-using-AngularJS
  6. 6. Frameworks MVC mais
  7. 7. Architecture
  8. 8. Les ressources ■ angular-ui (composants boostrap , router…) ■ restangular ■ angular-strap ■ angular translate ■ ng-table ■ angular-file-upload
  9. 9. OK ■ Productivité ■ Orienté Tests (l’injection de dépendances et les modules) ■ Orienté service (découplage) ■ Les templates en HTML ■ Communauté
  10. 10. KO ■ Dirty checking (boite noire) ■ Performance ■ Pas de rendering coté serveur : SEO :( ■ Syntaxe parfois éxotique (Services, directives…) ■ L’annonce de la version 2.0
  11. 11. La communication
  12. 12. Ng-Europe le 23 octobre 2014
  13. 13. L’incertitude “On va pas le coder en Angular c’est mort votre truc” - M. X -
  14. 14. Ok on recommence... ● Maintenance de la 1.X (2018) ● Ng-conf le 5 mars 2015 ● Migration progressive (new Router, ng-upgrade) ● Adoption de TypeScript et partenariat avec Microsoft source : http://angularjs.blogspot.fr/2015/08/angular-1-and-angular-2-coexistence.html
  15. 15. Perspectives ■ Reboot complet ■ Supprime ■ les scopes ■ les controlleurs ■ DDO ■ Modules
  16. 16. Les objectifs ■ mobile first ■ Performance ■ TypeScript ■ Simplicité ■ Standards: ES6, Web components ■ ... ref: https://angular.io/features.html
  17. 17. Les performances “Today, Angular2 is 5x faster than Angular 1” Misko, 02/10/15 Deep Tree Benchmark 2015-02-09
  18. 18. Go...
  19. 19. Librairies tiers ■ System.js ■ universel (ES6 module, AMD, Common..) ■ importe notre application ■ es6-shim.js ■ transpile to ES5 <!DOCTYPE html> <html> <head> <script src="es6-shim.js"></script> <script src="system.js"></script> <script src="angular2.dev.js"></script> </head> <body> <my-app></my-app> <script> System.import('app'); </script> </body> </html>
  20. 20. Le langage ■ Typescript ■ ES6 ■ types ■ annotations ■ Javascript ■ ES6 ■ ES5 @Component({ selector: 'my-app' }) @View({ template: '<h1 id="output">My First Angular 2 App</h1>' }) class AppComponent { } var AppComponent = ng.Component({ selector: 'my-app' }) .View({ template: '<h1 id="output">My First Angular 2 App</h1>' }) .Class({ constructor: function () { } });
  21. 21. Démarrage de notre application ■ Import ■ Définition d’un composant ■ boostrap import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'my-app' }) @View({ template: '<h1 id="output">My First Angular 2 App</h1>' }) class AppComponent { } bootstrap(AppComponent);
  22. 22. Les composants
  23. 23. Simplification Plus de controller, de scope… mais 2 types de composants: ■ Qui ajoutent un comportement au DOM: les directives ■ Qui encapsulent une vue: les components ■ Les service seront de simples classes
  24. 24. Un composant ■ Une classe ■ utilise la syntaxe de classe ES6 ■ implémentation du composant ■ Ce que verra la vue class AppComponent { name:string; constructor(){ this.name='Cyril'; } }
  25. 25. Un composant ■ les annotations ■ component pour associer une composant à un sélecteur ■ view pour indiquer comment le composant s’affiche @Component({ selector: 'my-app' }) @View({ template: '<h1 id="output">My First Angular 2 App</h1>' }) class AppComponent { name:string; constructor(){ this.name='Cyril'; } }
  26. 26. Un composant ■ importer les dépendances import {Component, View} from 'angular2/angular2'; @Component({ selector: 'my-app' }) @View({ template: '<h1 id="output">My First Angular 2 App</h1>' }) class AppComponent { name:string; constructor(){ this.name='Cyril'; } }
  27. 27. Simplification : les directives Plus de scope isolé, de restriction, de transclusion, de compile/link….
  28. 28. Une directive ■ Annotation dédiée import {Directive} from 'angular2/angular2'; @Directive({ }) export class MyDirective { }
  29. 29. Une directive : plus de restrict ■ invocations possibles : un selecteur ■ element-name: pour restreindre à un élément ■ [attribute]: pour restreindre à un attribut ■ .class: pour restreindre à une classe ■ [attribute=value]: restreint à un attribut avec une certaine valeur ■ :not(sub_selector): si l’élément ne match pas le sous-sélecteur import {Directive} from 'angular2/angular2'; @Directive({ selector: '[my-directive]' }) export class MyDirective { }
  30. 30. Une directive : plus de scope isolé ■ Properties ■ Paires de key-value ■ directiveProperty/bindi ngProperty import {Directive} from 'angular2/angular2'; @Directive({ selector: '[my-directive]', properties: [directiveProperty: bindingProp], }) export class MyDirective { }
  31. 31. Une directive ■ Event ■ Propager des évènements custom ■ écoute des événements sur l’host import {Directive} from 'angular2/angular2'; @Directive({ selector: '[my-directive]', properties: [directiveProperty: bindingProp], hostListeners: {'click':'onClick($event)'} }) export class MyDirective { somethingChange: EventEmitter; constructor(){ this.somethingChange = new EventEmitter(); } onClick($event) { this.somethingChange.next({$event, data}); } }
  32. 32. Une directive ■ Pour l’utiliser ■ l’importer: plus de collision de noms ■ déclarer la directive dans l’annotation View ■ L’utiliser dans le template import {Component, View} from 'angular2/angular2'; import {MyDirective} from 'path/to/MyDirective'; @Component({ ... }) @View({ directives: [MyDirective], template: '<h1 my-directive></h1>' }) class AppComponent { ... }
  33. 33. Un service ■ Une simple classe ■ On récupère le service par injection de dépendance import {MyService} from 'path/to/MyService'; @Component({ ... }) @View({ ... }) class AppComponent { constructor(@Inject(MyService) myService) { myService.myMethod(); } } export class MyService { myMethod() {} }
  34. 34. Le template
  35. 35. Simplification : templating Properties, events et références
  36. 36. 3 types de binding
  37. 37. Event et properties: ■ Lisibilité ■ Event et propriété sont l’API public d’un composant ■ parent -> enfant : property binding ■ enfant -> parent : event binding ■ Mixe des 2 pour du two-way bindings: [(ng-model)] [Property] (Event) CHILD PARENT
  38. 38. Templating avancé ■ Importer les diectives ■ Les déclarer ■ Dans le template import {CORE_DIRECTIVES} from 'angular2/angular2'; @View({ directives: [CORE_DIRECTIVES], }) class AppComponent { fruits:[{name:’apple’},{name:’banana’}]; } <ul> <li *ng-for="#fruit of fruits; #i=index"> {{ i }} : {{ fruit.name }} </li> </ul> <div *ng-if="isAdmin">Edit</div>
  39. 39. Pipes: Transformer de la donnée ■ Pipes natifs ■ currency ■ date ■ lowercase, uppercase ■ limitTo ■ asynch ■ json ■ decimal ■ percent ■ Pipe custom import {Pipe} from 'angular2/angular2'; @Pipe({ name: ‘mypipe’, }) class MyPipe { transform(value,args){ … return newValue; } } <div>{{data | mypipe:arg1:arg2}}</div>
  40. 40. Routes
  41. 41. Boostrap Récupérer les dépendances du Router et les intégrer dans notre injecteur import {ROUTER_PROVIDERS, bootstrap} from 'angular2/angular2'; import {App} from 'ts/app/app'; bootstrap(App,[ROUTER_PROVIDERS]);
  42. 42. Configuration ■ RouterConfig ■ path: l’url associée ■ as: alias pour la route utilisé pour référencer les routes dans le HTML ■ component: nom du composant à associer à la route import {RouteConfig, Router} from 'angular2/router' @View({ directives:[ROUTER_DIRECTIVES] }) @RouteConfig([ { path: '/first, as: 'FirstComponent', component: FirstComponent}, ]) export class App { ... }
  43. 43. Paramètres ■ Dans le path après ‘:’ ■ accessibles via RouteParams injecté dans le composant @RouteConfig([ { path: '/second/edit/:id', as: 'SecondComponent', component: SecondComponent} ]) class App { constructor(@Inject(RouteParams) routeParams) { this.id = routeParams.get('id'); }
  44. 44. Directives ■ router-link ■ router-outlet <a [router-link]="['/firstComponent']">FirstComponent</a> <a [router-link]="['/SecondComponent',{id:obj.id}]">SecondComponent</a> <section class="container"> <router-outlet></router-outlet> </section>
  45. 45. L’injection de dépendances
  46. 46. Angular 1 ■ Identifié par un nom ■ Que des singletons ■ Toujours synchrones ■ Collision de noms ■ Intrinsèque au framework myModuleApp.factory("CountService", function (dep1, dep2, ...) { return { increment : function(){ } }; }); function myController($scope, CountService){ CountService.increment(); };
  47. 47. Le principe ■ L’injector expose l’API pour créer des instances de dépendances ■ Le Provider indique à l’injector comment créer la dépendance ■ La dépendance est le type d’objet à créer
  48. 48. Récupérer une dépendance ■ Singleton ■ Pour avoir des instances ■ Utiliser une factory ■ Créer un injector fils import { Injector } from 'angular2/di'; var injector = Injector.resolveAndCreate([ Car, Engine, Tires, Doors ]); var car = injector.get(Car);
  49. 49. Le provider ■ Fait le lien entre un TOKEN et une FACTORY ■ Permet de découpler dépendance et implémentation ■ API pour: ■ binder à une simple valeur: ■ faire des alias de token ■ créer des factory provide(String, {useValue: 'Hello World'}) provide(Engine, {useClass: Engine}) provide(V8, {useExisting: Engine}) provide(Engine, {useFactory: () => { return function () { if (IS_V8) { return new V8Engine(); } else { return new V6Engine(); } } }})
  50. 50. Injector fils ■ crée avec Injector. createAndResolveChild() ■ Au niveau de chaque composant ■ Ces instances seront alors différentes ■ Remontent la chaîne pour résoudre les dépendances
  51. 51. Alors ?
  52. 52. ■ Orientation composant ■ Simplification ■ Typescript, ES6 ■ Stabilisation API/concepts (universalité) ■ Préparer la transition http://angularjs.blogspot.fr/2015/08/angular-1-and-angular-2-coexistence.html http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using- ngupgrade.html ■ Application complexes ?
  53. 53. Pour en savoir plus Sfeir School Angular 2 sfeirschool@sfeir.com
  54. 54. Ressources ● Site Officiel : https://angular.io/ ● API : https://angular.io/docs/js/latest/api/ ● Thoughtram Blog : http://blog.thoughtram.io/categories/angular-2/ ● Overview: http://angular-tips.com/blog/2015/06/why-will-angular-2-rock/
  55. 55. Merci ! @cbalit @douglasduteil

×