xebiconfr 15 - brace yourselves angular 2 is coming
TRANSCRIPT
![Page 1: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/1.jpg)
Brace yourselves ANGULAR 2
is coming
Alexandre Hebert @dijxdream Dmytro Podyachiy @dimapod79
![Page 2: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/2.jpg)
#XebiConFr
PRÉSENTATEURS
Dmytro Podyachiy@dimapod79
Alexandre Hebert @dijxdream
![Page 3: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/3.jpg)
#XebiConFr
TOUR D’HORIZON
![Page 4: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/4.jpg)
#XebiConFr
● Natif : ↗ performances● Expressif : ↘ boilerplate ↗ productivité● Orienté mobile : ↗ expérience utilisateur● Orienté composant : ↗ modularité
MOTIVATIONS
“The Changing Web”, V. Georgiev
![Page 5: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/5.jpg)
#XebiConFr
APPROCHE WEB COMPONENT
Respect des nouveaux standards du Web
![Page 6: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/6.jpg)
#XebiConFr
● AtScript ?● TypeScript ?● EcmaScript 5, 6 ?● CoffeeScript ?
ANGULAR 2, ENKOIKÇÉKODÉ ?
![Page 7: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/7.jpg)
#XebiConFr
TYPESCRIPT
![Page 8: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/8.jpg)
#XebiConFr
● TypeScript avec décorateurs● ES 6 avec annotations
ANGULAR 2, ENKOIKONKODE ?
NB : Traceur + SystemJs = Mandatory
● ES 5 avec beaucoup de courage
![Page 9: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/9.jpg)
#XebiConFr
✓ Navigateurs modernes≈ IE 9 supporté (avec Polyfills)
ANGULAR 2, OUÇÉKÇAMARCHE ?
![Page 10: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/10.jpg)
#XebiConFr
✗ BYE BYE
QUID D’IE 7 & 8 ?
![Page 11: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/11.jpg)
#XebiConFr
BREAKING CHANGES
![Page 12: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/12.jpg)
#XebiConFr
THE FIRST ANGULAR 2 EFFECT
![Page 13: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/13.jpg)
#XebiConFr
● Two-way data binding● Controllers● Scope, Root scope● $watch, $observe, $apply● Digest cycles● angular.module(...● ...
IL ÉTAIT UNE FOIS ANGULAR 1...
![Page 14: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/14.jpg)
#XebiConFr
● ng-repeat● ng-model● ng-class● ng-if● ...
ET LES DIRECTIVES ?
![Page 15: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/15.jpg)
#XebiConFr
ET LES DIRECTIVES ?
Enfin presq
ue...
![Page 16: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/16.jpg)
#XebiConFr
FINAL ANGULAR 2 EFFECT
![Page 17: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/17.jpg)
#XebiConFr
$ ./MIGRATION NG 1>&2 ?
![Page 18: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/18.jpg)
#XebiConFr
● ✗ Controllers / ✓ Directives (et attributs ‘&’)● Éviter l’usage de $scope : controllerAs● Privilégier les services● Utiliser ‘angular.component’ (NG 1.5)
et…Basculer en TypeScript
ANTICIPATION
![Page 19: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/19.jpg)
#XebiConFr
● Intégrer NG2 avec l’existant
● Adopter un approche opportuniste :○ Si modification directive => component○ Modifier les services associés
● Utiliser NG1.5 et le shortcut “.component()”
COHABITATION
![Page 20: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/20.jpg)
#XebiConFr
Pas de miracles...
MIGRATION
![Page 21: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/21.jpg)
#XebiConFr
PRODUCTION READY?
![Page 22: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/22.jpg)
#XebiConFr
● Nouvelle version / 15 jours● Maturité des navigateurs● Pas de Release Candidate
PAS ENCORE !
Version courante : alpha.37 Developer Preview
![Page 23: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/23.jpg)
#XebiConFr
GET /ANGULAR/2/RELEASEDATE
Très bientôt - Fin 2015
![Page 24: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/24.jpg)
#XebiConFr
COMPONENTSPierre angulaire de l’application Angular 2
![Page 25: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/25.jpg)
#XebiConFr
ARBORESCENCE DES COMPOSANTS
![Page 26: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/26.jpg)
#XebiConFr
@COMPONENT
@Component({ selector: 'my-component'})class MyComponent {
}
<div> <my-component></my-component></div>
Decorator
Utilisation
![Page 27: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/27.jpg)
#XebiConFr
@VIEW (1/3)
@Component({ selector: 'my-component'})@View({ template: "<span>Hello {{message}}!</span>"})class MyComponent {
message:string; constructor() { this.message = 'World'; }}
Inline
![Page 28: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/28.jpg)
#XebiConFr
@VIEW (2/3)
@Component({ selector: 'my-component'})@View({ template: ` <span> Hello {{message}} ! </span> `})class MyComponent {
message:string; constructor() { this.message = 'World'; }}
Inline multi-ligne
![Page 29: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/29.jpg)
#XebiConFr
@VIEW (3/3)
@Component({ selector: 'my-component'})@View({ templateUrl: 'cmp.html'})class MyComponent { message:string; constructor() { this.message = 'World'; }}
Avec template
<span>Hello {{message}} !</span>
cmp.html
![Page 30: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/30.jpg)
#XebiConFr
@VIEW
@Component({ selector: 'my-component', templateUrl: 'cmp.html', directives: []})class MyComponent { message:string; constructor() { this.message = 'World'; }}
dans @Component
![Page 31: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/31.jpg)
#XebiConFr
PROPERTIES: [...]Input API
![Page 32: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/32.jpg)
#XebiConFr
PROPERTIES
<input type="text" value="foo">
Html
input: ... type: "text" value: "foo" ...
Node
![Page 33: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/33.jpg)
#XebiConFr
PROPERTIES
<img src="{{myImage}}">
Angular 1
<img [src]="myImage">
Angular 2
<div ng-hide="isHidden">Hidden if isHidden is true </div><my-component model="{{something}}"></my-component>
<div [hidden]="isHidden">Hidden if isHidden is true </div><my-component [model]="something"></my-component>
![Page 34: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/34.jpg)
#XebiConFr
PROPERTIESDéclaration
Utilisation<my-component [model]="data"></my-component>
@Component({ selector: 'my-component'})class MyComponent { @Input() model:any; // <-- declaration des properties
show() { console.log(this.model); }}
![Page 35: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/35.jpg)
#XebiConFr
EVENTS: (...)Output API
![Page 36: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/36.jpg)
#XebiConFr
EVENTS
<my-component select="myFunction()"></my-component>
Angular 1
<my-component (select)="myFunction()"></my-component>
Angular 2
<div ng-click="doSomething()"></div>
<div (click)="doSomething()"></div>
![Page 37: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/37.jpg)
#XebiConFr
EVENTS
@Component({ selector: 'my-component' })class MyComponent { @Output() event:EventEmitter = new EventEmitter(); // declaration
fireMyEvent(data:string) { this.event.next({value: data}); }}
Déclaration
Utilisation<my-component (event)=”myFunction($event.value)”></my-component>
![Page 38: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/38.jpg)
#XebiConFr
ONE WAY DATA BINDING
Two-Way data-binding
![Page 39: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/39.jpg)
#XebiConFr
FLUX DE DONNÉES
● Entrées via "bindings" des proprietés● Sorties via "bindings" des événements
![Page 40: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/40.jpg)
#XebiConFr
LOCAL VARIABLES: #
<input type="text" #user (keyup)>
{{user.value}}
<button (click)="user.focus()">Grab focus</button>
![Page 41: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/41.jpg)
#XebiConFr
Les composants sont auto-descriptifs
Component = Application
![Page 42: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/42.jpg)
#XebiConFr
MODULESLa fin d’angular.module(...)
![Page 43: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/43.jpg)
#XebiConFr
ES 6 EVERYWHERE !
![Page 44: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/44.jpg)
#XebiConFr
PARTAGE DE MODULE
export default i => i + MY_CONST;export class MyDirective {};export const MY_CONST = 1;
my-module.js
![Page 45: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/45.jpg)
#XebiConFr
UTILISATION D’UN MODULE
import myThing, {MyDirective, MY_CONST} from 'my-module';
depends-on-my-module.js
![Page 46: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/46.jpg)
#XebiConFr
SERVICESLa fin d’ angular.factory(...) et angular.provider(...)
![Page 47: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/47.jpg)
#XebiConFr
SERVICEmy-service.js
export class SlotService { getSlots() { return fetch('http://localhost:8000/xke-slots.json' ) .then((response) => response.json()); }}
import {SlotService} from 'slots-service';...class MyComponent { // injection des service}
Utilisation
![Page 48: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/48.jpg)
#XebiConFr
INJECTIONDE DÉPENDANCES
![Page 49: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/49.jpg)
#XebiConFr
Défauts :● Cache interne● Seulement synchrones● Collision d’espace de noms● Indivisible du framework
Injection de dépendances en Angular 1
![Page 50: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/50.jpg)
#XebiConFr
Angular 1 vs Angular 2
Angular 1 Angular 2
Visibilité : Chaîne de prototypes
![Page 51: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/51.jpg)
#XebiConFr
@Component({ selector: 'app' })@View({ template: '<h1>Hello {{ name }} !</h1>' })class App { constructor() { this.name = 'World'; }}
bootstrap(App);
Utilisation (Root injector)@Component({ selector: 'app' })@View({ template: '<h1>Hello {{ name }} !</h1>' })class App { constructor() { this.name = 'World'; }}
bootstrap(App, [NameService]);
class NameService { getName() { ... }}
@Component({ selector: 'app' })@View({ template: '<h1>Hello {{ name }} !</h1>' })class App { constructor(@Inject(NameService) nameService) { this.name = nameService.getName(); }}
bootstrap(App, [NameService]);
@Component({ selector: 'app' })@View({ template: '<h1>Hello {{ name }} !</h1>' })class App { constructor(nameService: NameService) { this.name = nameService.getName(); }}
bootstrap(App, [NameService]);
![Page 52: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/52.jpg)
#XebiConFr
Utilisation (Providers)
![Page 53: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/53.jpg)
#XebiConFr
Utilisation (Providers)@Component({ selector: 'app'})@View({ template: '<h1>Hello <name-comp></name-comp>!</h1>'})class App { ... }
import {NameService} from 'name-service';
@Component({ selector: 'name-comp', providers: [NameService]})@View({ template: '...'})class NameComponent { constructor(nameService: NameService) { ... }}
![Page 54: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/54.jpg)
#XebiConFr
Injecter “à la main”import { Injector } from 'angular2/angular2';
var injector = Injector.resolveAndCreate([Car, Engine, Tires, Doors]);var car = injector.get(Car);
class Car { constructor(engine: Engine, tires: Tires, doors: Doors) { ... }}
import { bind } from 'angular2/angular2';
var injector = Injector.resolveAndCreate([ bind(Car).toClass(Car), bind(Tires).toClass(Tires), bind(Doors).toClass(Doors), bind(Engine).toClass(OtherEngine)]);
![Page 55: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/55.jpg)
#XebiConFr
DIRECTIVES
![Page 56: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/56.jpg)
#XebiConFr
● directive : décorateur sans vue● component : directive avec une vue
DIRECTIVES
![Page 57: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/57.jpg)
#XebiConFr
NG-IF, NG-FOR...import {NgFor, NgIf} from 'angular2/angular2' ;...
@Component...@View({ template: `Hello <span * ng-if="fl">World</span> ! <div *ng-for="#item of items">{{item}}</div>`, directives: [NgFor, NgIf]})export class MyComponent { fl:Boolean = false; items:Array<string> = ['First item', 'Second item', 'Third item']; constructor() { setTimeout(() => this.fl = true, 2000); }}
![Page 58: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/58.jpg)
#XebiConFr
NEW ROUTERInspiré par Ember.Js / RouteReconizer
![Page 59: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/59.jpg)
#XebiConFr
1 ROUTE → 1 COMPOSANT
@View({
template: "Contenu page 1"
})
export class Route1 {}
@View({
template: "Contenu page 2"
})
export class Route2 {}
my-routes.js
![Page 60: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/60.jpg)
#XebiConFr
1 DÉCORATEUR → N ROUTES
import {Route1, Route2} from 'my-routes';
@RouteConfig([ {path: '/', component: Route1}, {path: '/route1', component: Route1, as: 'Route1'}, {path: '/route2', component: Route2, as: 'Route2'}])@Component(...)export class App {}
my-app.js
![Page 61: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/61.jpg)
#XebiConFr
1 VUE → 1 “OUTLET”
<a [router-link]="['./Route1']">Page 1</a>
<a [router-link]="['./Route2']">Page 2</a>
<router-outlet></router-outlet>
my-app.html
![Page 62: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/62.jpg)
#XebiConFr
Questions
?
![Page 63: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/63.jpg)
#XebiConFr
WORKSHOPhttp://github.com/xebia-france/slot-angular2
![Page 64: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/64.jpg)
#XebiConFr
TESTSTester, ce n’est sûrement pas douter !
![Page 65: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/65.jpg)
#XebiConFr
✓ Tests de services : avec Jasmine + Angular✗ Tests de composants (avec / sans DOM)✗ Tests bout-en-bout
MATURITÉ PAR NIVEAU DE TEST
https://angular.io/docs/ts/latest/testing/
![Page 66: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/66.jpg)
#XebiConFr
ZONE.JSLe dirty-checking version 2.0
![Page 67: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/67.jpg)
#XebiConFr
C’est quoi ? un contexte d'exécution partagé
Oui mais… pour faire quoi ?● éviter les $apply explicites● un seul $digest cycle● debugging : des erreurs console intelligibles
ZONE.JS D’APPLICATION
![Page 68: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/68.jpg)
#XebiConFr
PERFORMANCESDu mieux, en mieux
![Page 69: XebiConFr 15 - Brace yourselves Angular 2 is coming](https://reader031.vdocuments.site/reader031/viewer/2022030300/58819d131a28ab1a398b4735/html5/thumbnails/69.jpg)
#XebiConFr
time (ms) / # of items
source : http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor
COMPARATIF