This document provides an overview of Angular 2 architecture, components, dependency injection, bindings, pipes and the migration path from AngularJS. Some key points: - Angular 2 uses a component-based architecture where everything is a component. Components can be nested to form a component tree. - Components are defined using annotations like @Component and @View. Templates, styles and other metadata can be associated with a component. - Dependency injection allows injecting services into components via the constructor. Services are singletons available via the injector. - Data binding in Angular 2 allows binding component properties and events to the template using property, event and two-way bindings. - P

1. Angular 2
@EmmanuelDemey

2. Emmanuel
DEMEY
Consultant & Formateur Web
Zenika Nord
@EmmanuelDemey
Web / Domotique / Histoire / Biérologie

4. Les choses que nous n'aimons pas...

5. Architecture AngularJS
MV* MV* MV*

6. Architecture AngularJS
MV* MV* MV*

7. Architecture AngularJS
DI (provider, service, factory...)
MV* MV* MV*

8. Architecture AngularJS
DI (provider, service, factory...)
MV* MV* MV*
Filtres

9. Architecture AngularJS
DI (provider, service, factory...)
MV* MV* MV*
Filtres

10. API des Directives
app.directive('MyDirective', function(){
return {
restrict: 'AE',
require: '?^^ngModel',
scope: { variable: '@' },
compile: function(...) {
return {
pre: function(...) { ... },
post: function(...) { ... }
}
},
link: function(...) { ... }
}
});

11. app.directive('MyDirective', function(){
return {
restrict: 'AE',
require: '?^^ngModel',
scope: { variable: '@' },
compile: function(...) {
return {
pre: function(...) { ... },
post: function(...) { ... }
}
},
link: function(...) { ... }
}
});
API des Directives

12. app.directive('MyDirective', function(){
return {
restrict: 'AE',
require: '?^^ngModel',
scope: { variable: '@' },
compile: function(...) {
return {
pre: function(...) { ... },
post: function(...) { ... }
}
},
link: function(...) { ... }
}
});
API des Directives

13. app.directive('MyDirective', function(){
return {
restrict: 'AE',
require: '?^^ngModel',
scope: { variable: '@' },
compile: function(...) {
return {
pre: function(...) { ... },
post: function(...) { ... }
}
},
link: function(...) { ... }
}
});
API des Directives

14. <input ng-model="firstName">
<p>
{{firstName }}
</p>
2-way data-binding

15. <input ng-model="firstName"
ng-model-options="options">
<p>
{{firstName }}
</p>
2-way data-binding

16. <input ng-model="firstName">
<p>
{{::firstName }}
</p>
2-way data-binding

17. Et ce n'est pas fini...

18. Mais aussi...
Pas de Server-Side Rendering
Gestion des événements (ngClick, ...)
Gestion des attributs HTML (ngSrc, ...)

19. La solution... Angular 2

20. Attention !

21. Version Alpha
P(eu|as) de Doc

22. Architecture
Composants
Injection de Dépendance
Pipes

23. Architecture Angular 2
<app></app>

24. Architecture Angular 2
<app></app>
menu grid
gallery

25. Architecture Angular 2
<app></app>
menu grid
gallery
DI
(classes ES6 ou TypeScript)
Pipes
(classes ES6 ou TypeScript)

26. La Famille JavaScript

27. La Famille JavaScript
ES5

28. La Famille JavaScript
ES5
ES2015

29. La Famille JavaScript
ES5
ES2015

30. La Famille JavaScript
ES5
ES2015
TypeScript

31. Les Web Components
Custom Elements Templates Imports Shadow DOM

32. Les composants

33. Composants Angular 2
Ressources de base en Angular 2
Tout est composant
Application représentée par un arbre
de composants
Utilisation de métadonnées pour
configurer un composant

34. //<my-app></my-app>
function MyAppComponent() {
}
MyAppComponent.annotations = [
new angular.ComponentAnnotation({
selector: 'my-app'
}),
new angular.ViewAnnotation({
template: "<main>" +
"<h1> This is my first Angular2 app</h1>" +
"</main>"
})
];
Composant version ES5

35. import {Component, View} from 'angular2/angular2';
@Component({selector: 'my-app'})
@View({
template: `<main>
<h1> This is my first Angular2 app</h1>
</main>`
})
class MyAppComponent {
}
Composant version TypeScript

36. import {Component, View, bootstrap} from 'angular2/angular2';
@Component({selector: 'my-app'})
@View({
template: `<main>
<h1> This is my first Angular2 app</h1>
</main>`
})
class MyAppComponent {
}
bootstrap(MyAppComponent);
Bootstrap de l'Application

37. Binding
Root Cpt
Child1 Cpt Child2 Cpt
[property]="expression"
(event)="update()"

38. Property Binding
<input [attr]="expression" />
Accès à toutes les propriétés des éléments
HTML
Possibilité de définir de nouvelles propriétés
Compatibilité avec d'autres spécifications

39. Property Binding
<body>
<h1>My First Angular2 app</h1>
</body>

40. Property Binding
<body>
<h1 [textContent]="'My First Angular2 app'">
</h1>
</body>

41. Property Binding
<body>
<h1>{{'My First Angular2 app'}}
</h1>
</body>

42. Property Binding
//<beerItem [beer]="'Maredsous'"></beerItem>
@Component({
selector: 'beerItem',
properties: ['beer']
})
@View({
template: `<section>
<h2>{{beer}}</h2>
<button>Je veux celle-ci !</button>
</section>`
})
class BeerItem {
beer: String;
}

43. Event Binding
<input (event)="expression" />
Accès à tous les événements des éléments
HTML
Possibilité de définir de nouveaux événements

44. Event Bindings
//<beerItem [beer]="'Maredsous'" (selectBeer)="sendToBeerTap()"></beerItem>
@Component({
selector: 'beerItem',
properties: ['beer'],
events: ['selectBeer']
})
@View({
template: `<section>
<h2>{{beer<}}</h2>
<button (click)="selectItem()">Je veux celle-ci !</button>
</section>`
})
class BeerItem {
beer: String;
selectBeer: EventEmitter;
selectItem() {
this.selectBeer.next(this.beer);
}
}

45. Syntaxe valide ?

46. “Attribute names must consist of one or
more characters other than the space
characters, U+0000 NULL, """, "'", ">", "/",
"=", the control characters, and any
characters that are not defined by Unicode.
Syntaxe valide ?

47. Syntaxe valide ?

48. Component Dependency
Nécessité d'importer les composants
nécessaires à votre application
Propriété directives de @View
Erreur si composants non utilisés

49. Component Dependency
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {BeerItem} from 'BeerItem';
@Component({ selector: 'my-app'})
@View({
template: `<main class="mdl-layout__content">
<ul class="googleapp-card-list">
<li *ng-for="#beer of beers">
<beerItem [beer]="beer"></beerItem>
</li>
</ul>
</main>`,
directives: [NgFor, BeerItem]
})
class MyAppComponent {
public beers: String[] = [];
constructor() { ... }
}

51. Support des
WebComponents

52. WebComponents
@Component({ })
@View({
template: string,
templateUrl: string,
encapsulation?: ViewEncapsulation,
directives?: List<any>,
styles?: List<string>,
styleUrls?: List<string>,
})
class BeerItem { }

53. WebComponents
//From modules/angular2/src/core/render/api.ts
/**
* How the template and styles of a view should be encapsulated.
*/
export enum ViewEncapsulation {
/**
* Emulate scoping of styles by preprocessing the style rules
* and adding additional attributes to elements. This is the default.
*/
Emulated,
/**
* Uses the native mechanism of the renderer. For the DOM this means creating a
* ShadowRoot.
*/
Native,
/**
* Don't scope the template nor the styles.
*/
None
}

54. Injection de Dépendance

55. Injection de Dépendances
Code métier dans des services
Chaque Service est un singleton
Principe d'Hollywood
Multiples implémentations en NG1 !

56. Injection de Dépendances
app.service('TapService', function($http){
this.getBeer = function(beerId){
return $http.get('/api/i-am-thirsty/' + beerId);
};
});
app.controller('AppCtrl', function(TapService){
this.selectBeer = function(idBeer){
return TapService.getBeer(idBeer);
}
});

57. DI version Angular2
1 Injecteur principal + 1 Injecteur par composant
Hérite de l'injecteur parent
Possibilité de redéfinir le Service à injecter
Utilisation d'annotations en ES6 et des types en
TypeScript
Services disponibles via le constructeur du
composant

58. Injecteur Principal - toValue
@Component({selector: 'my-app'})
@View({
template: `<main>
<h1> Welcome to our {{breweryName}}</h1>
</main>`
})
class MyAppComponent {
constructeur(private breweryName:String) { ... }
}
bootstrap(MyAppComponent, [bind(String).toValue('Zenika Brewery')]);

59. Injecteur Principal - toClass
@Component({selector: 'my-app'})
@View({
template: `<main>
<h1> Welcome to our {{breweryName}}</h1>
</main>`
})
class MyAppComponent {
constructeur(private breweryService:BreweryService) {
this.breweryName = this.breweryService.getBreweryName();
}
}
bootstrap(MyAppComponent, [bind(BreweryService).toClass(BreweryService)]);

60. Injecteur Principal - toClass
@Component({selector: 'my-app'})
@View({
template: `<main>
<h1> Welcome to our {{breweryName}}</h1>
</main>`
})
class MyAppComponent {
constructeur(private breweryService:BreweryService) {
this.breweryName = this.breweryService.getBreweryName();
}
}
bootstrap(MyAppComponent, [BreweryService]);

61. Injecteur Principal -
toFactory@Component({selector: 'my-app'})
@View({
template: `<main>
<h1> Welcome to our {{breweryName}}</h1>
</main>`
})
class MyAppComponent {
constructeur(public breweryName:String) { ... }
}
bootstrap(MyAppComponent,
[bind(String)
.toFactory((BreweryService) => {
return BreweryService.getBreweryName();
}, [BreweryService])]);

62. Child Injector
@Component({selector: 'my-app'})
@View({
template: `<main>
<welcome-message></welcome-message>
</main>`,
directives: [WelcomeMessage]
})
class MyAppComponent {
constructeur(public breweryName:String) { ... }
}
bootstrap(MyAppComponent, [bind(String).toValue('Zenika Brewery')]);

63. Child Injector
@Component({
selector: 'welcome-message'
})
@View({
template: `<h1>Welcome to our {{breweryName}}</h1>`
})
class WelcomeMessage {
constructeur(public breweryName:String) { ... }
}

64. Child Injector
@Component({
selector: 'welcome-message'
})
@View({
template: `<h1>Welcome to our {{breweryName}}</h1>`,
bindings: [
bind(String).toValue('Awesome Zenika Brewery')
]
})
class WelcomeMessage {
constructeur(public breweryName:String){ ... }
}

65. Pipes

66. Petit Rappel
{{ collectionOfBeers | orderBy:'note' | limitTo:5 }}

67. Pipes
Identiques aux filtres d'AngularJS 1
Permet de manipuler une donnée
Utilisation d'une classe annotée @Pipe
Pipes disponibles dans le framework :
upperCase, lowerCase, Async,
Number, limitTo, json et date

68. Pipes
import {Pipe, PipeTransform} from 'angular2/angular2';
@Pipe({
name: 'UpperCasePipe'
})
export class UpperCasePipe implements PipeTransform {
transform(value: String, args: any[]) {
return value.toUpperCase();
}
}

69. Pipes
import {Component, View} from 'angular2/angular2';
import {UpperCasePipe} from './UpperCasePipe.ts'
@Component({
selector: 'widget1'
})
@View({
template: `<div>{{'Démo utilisant les pipes' | UpperCasePipe}}</div>`,
pipes: [UpperCasePipe]
})
export class Widget1{}

70. Pipes
import {Component, View} from 'angular2/angular2';
import {UpperCasePipe} from './UpperCasePipe.ts'
@Component({
selector: 'widget1'
})
@View({
template: ``,
bindings: [UpperCasePipe]
})
export class Widget1{
constructor(public upperCasePipe:UpperCasePipe){
this.upperCasePipe.transform('Un autre exemple...');
}
}

71. @Component
@View@Directive

72. @View
@Animation
@Inject
@InjectLazy
@Optional
@Host
@Parent
@Pipe
@Property
@Event
@RouteConfig
@HostBinding
@HostEvent
@ContentChild
@ContentChildren
@ViewChildren

73. Roadmap

74. Pour une migration heureuse...

75. John Papa's
styleguide

76. Autres Règles
1 composant AngularJS par fichier
ECMAScript 2015
Syntaxe Component As
bindToController dans l'API des
directives
Component-First Approach
Utilise le nouveau Router
Création de service via la méthode
service

79. eslint-plugin-angular
npm install --save-dev eslint eslint-plugin-angular
Implémente le guideline de John Papa
Rules :
Component-First Approach : ng_no_controller
controllerAs : ng_controller_as_*

80. ngUpgrade.js
Mixer AngularJS et
Angular2

81. Démo

82. https://github.com/Gillespie59/
angular2-migration-sample

83. Repository Github
Documentation
http://blog.thoughtram.io/
NG Europe 2014
NG Conf 2015
AngularU
ESLint Plugin Angular
John Papa Styleguide

84. Questions ?