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

Rejoignez-nous !

recrutement@xebia.fr

blog.xebia.fr