angular 2 le framework de 2016 - publicis sapient · angular 2 le framework de 2016 dmytro...
TRANSCRIPT
Angular 2 Le Framework de 2016
Dmytro Podyachiydéveloppeur full-stack
@XebiaFr
AngularJS
@XebiaFr
@XebiaFr
@XebiaFr
@XebiaFr
Migration...
@XebiaFr
@XebiaFr
Composants
@XebiaFr
Arborescence
@XebiaFr
class MyComponent { name:string = 'Angular.io';}
Decorator
<div> <my-component></my-component></div>
Utilisation
@Component({ selector: 'my-component' template: ` <div>Hello {{name}} !</div> `, styles: [`...`]})class MyComponent { name:string = 'Angular.io';}
@XebiaFr
API Entrée / Sortie
@XebiaFr
API d’entrée
<div> <my-component [name]="data"></my-component></div>
Properties: [...]
@Component({ selector: 'my-component' template: '<div>Hello {{name}}!</div>'})class MyComponent { @Input() name:string;}
@Input
@XebiaFr
API d’entrée
<img [src]="myImage">
<div [hidden]="isHidden">Hidden if isHidden is true </div>
HTML native
@XebiaFr
API Sortie
@Component({ selector: 'my-component' })class MyComponent { @Output() myEvent:EventEmitter = new EventEmitter(); // declaration
fireMyEvent(data: string) { this.myEvent.emit({value: data}); }}
@Output()
Evenements: ()<my-component (myEvent)="myFunction($event)"></my-component>
@XebiaFr
API d’entrée
Evénéments natives
<input (blur)="doSomething()" />
<div (click)="doSomething()"></div>
@XebiaFr
Flux des données: Angular 1 vs Angular 2
Angular 1 Angular 2
43 directives [] et ()
@XebiaFr
Flux de données
@XebiaFr
Services
@XebiaFr
Serviceexport class TalkService { getTalk() { return "Angular 2"; }}
import {TalkService} from './talk-service';
@Component({ selector: 'my-component' template: '<div>Talk {{name}} !</div>'})class MyComponent { name:string = ???;}
Utilisationimport {TalkService} from './talk-service';
@Component({ selector: 'my-component' template: '<div>Talk {{name}} !</div>'})class MyComponent { name:string = new TalkService().getTalk();}
@XebiaFr
Injection des dépendances
@XebiaFr
import {TalkService} from './talk-service';
@Component({ selector: 'my-component' template: '<div>Talk {{name}} !</div>', providers: [TalkService], ...})class MyComponent { name:string;}
import {TalkService} from './talk-service';
@Component({ selector: 'my-component' template: '<div>Talk {{name}} !</div>', providers: [TalkService], ...})class MyComponent { name:string;
constructor(public talkService: TalkService) { }}
import {TalkService} from './talk-service';
@Component({ selector: 'my-component' template: '<div>Talk {{name}} !</div>', providers: [TalkService], ...})class MyComponent { name:string;
constructor(public talkService: TalkService) { }
ngOnInit() { this.name = this.talkService.getTalk(); }}
Injection de dépendances
@XebiaFr
DirectivesPipesRouter
Formulaires...
@XebiaFr
Angular 3
Evergreen
@XebiaFr
Communauté
1
0.5
0Angular 1Oct 2015
Angular 1May 2016
Angular 2May 2016
1.1M
1.3M
360K
@XebiaFr
Framework de 2016 / 2017
@XebiaFr
Merci
Questions ?
https://github.com/xebia-france/moisdujs-angular2
