@romaintaz#DvxFrAngular2

Se  préparer  à  l'arrivée  d'Angular 2

@romaintaz#DvxFrAngular2

Romain  Linsolas

@romaintaz

Société GénéraleDéveloppeur Java & Web

@romaintaz#DvxFrAngular2

Bref  historique

20092010

20112012

20132014

20152016

1e release

1.0 – 1.11.2

1.31.4 – 1.5

2.0

∝ 𝛽

@romaintaz#DvxFrAngular2

Angular,  un  succès  !

@romaintaz#DvxFrAngular2

Adieu,  concepts  de  la  v1  !• angular.module• $scope• Controllers• Directive Definition Objects• jqLite

@romaintaz#DvxFrAngular2

La  v2,  une  refonte  complète

• Dependency injection• Templating• Routing• Logging• Persistence• Annotations• Benchmarking / monitoring• Etc.

@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2

Comprendre Angular 21

@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2

DEMO !

@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2

Apprendre TypeScript2

@romaintaz#DvxFrAngular2

Qu’est-­‐ce  que ?• Supporte la spécification ECMAScript 6 (surtout TS 1.5)• Introduction des decorators dans 1.5

@romaintaz#DvxFrAngular2

TypeScript – Quelques  bases

// Typage statiquevar myFlag: boolean = true;var myString: string = "Hello Devoxx France!";var theAnswer: number = 42;

function whatIsTheAnswer(): number {return 42;

}

// Enumeration (avec ou sans valeur)enum Conference { Devoxx, DevoxxFrance, MixIT };enum Color { Blue = 0, White = 1, Red = 2 };

@romaintaz#DvxFrAngular2

TypeScript – Classes  &  interfaces// interfacesinterface Conference {

name: string;welcome(): string;

}

class DevoxxFrance implements Conference {name: string;constructor(name: string) {

this.name = name;}

welcome(): string {return "Welcome to " + this.name;

}}

@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2

Maitriser les directives3

@romaintaz#DvxFrAngular2

Directives  Driven Development

<!-- page.html --><div ng-controller=”HomeCtrl”>Hello {{ username }}

</div>

// ControllermyApp.controller(“HomeCtrl”, function($scope) {$scope.username = “World !”;

});

<!-- page.html -->

<hello-message></hello-message>

<!-- hello-template.html -->

</span>Hello {{ username }}</span>

// Directive

myApp.directive(“helloMessage”, fu

nction() {

return {restrict: ‘E’,

templateUrl: ‘hello-template.html’

,

link: function(scope, element, att

rs) {

scope.username = ‘World !’;

}}

});

@romaintaz#DvxFrAngular2

Directives  Driven Development<!-- page.html -->

<hello-message></hello-message>

<!-- hello-template.html -->

</span>Hello {{ username }}</span>

// Directive

myApp.directive(“helloMessage”, fu

nction() {

return {restrict: ‘E’,

templateUrl: ‘hello-template.html’

,

link: function(scope, element, att

rs) {

scope.username = ‘World !’;

}}

});

<!-- page.html --><div ng-controller=”HomeCtrl”>Hello {{ username }}

</div>

// ControllermyApp.controller(“HomeCtrl”, function($scope) {$scope.username = “World !”;

});

@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2

Suivre l’actualité d’Angular4

@romaintaz#DvxFrAngular2

Actualités  d’Angular• Suivre l’évolution d’Angular 2• Sites (https://angular.io), blogs…• Conférences : Devoxx (France), ng-london (mi-octobre)

• …mais aussi de la v1 : v1.5 prévue pour faciliter la migration

@romaintaz#DvxFrAngular2

D’autres  idées  ?• Rester sur la v1 :§ Encore 3 ans de support§ Grande communauté§ Pas de grosses évolutions (ES6, Web Components…)

• Quitter Angular :§ Ember.js§ Backbone.js§ Aurélia…

@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2

Résumons…

@romaintaz#DvxFrAngular2

Pour  bien  se  préparer• Apprenez le TypeScript

• Maîtrisez les directives

• Suivez de près l’évolution d’Angular 2 (et de la v1)

@YourTwitterHandle@YourTwitterHandle@romaintaz#DvxFrAngular2

Q & A

http://bit.ly/dvxfr15-ng2