Angular 2 : le réveil de la force
7 likes3,669 views
The document discusses the transition from Angular 1.x to Angular 2, highlighting significant changes such as the introduction of TypeScript and the absence of backward compatibility. It details new features like component-based architecture, improved performance, and the adoption of web standards. The presentation is presented at Breizhcamp 2015 and emphasizes the anticipation and uncertainty surrounding Angular 2's release.
![BreizhCamp 2015 #BzhCmp
Directive (1/2)Directive (1/2)
#Ng2BzhCmp #BzhCmp
import {
Directive
} from 'angular2/angular2';
@Directive({
selector: '[tooltip]',
properties: {
text: 'tooltip'
},
hostListeners: {
mouseover: 'display()'
}
})
export class Tooltip {
display() {
console.log(this.text);
}
}
<div tooltip="Hello BreizhCamp">
Hover Me!
</div>
HTML TS](https://image.slidesharecdn.com/angular-2-le-reveil-de-la-force-150614163805-lva1-app6891/85/Angular-2-le-reveil-de-la-force-22-320.jpg)
![BreizhCamp 2015 #BzhCmp
Directive (2/2)Directive (2/2)
#Ng2BzhCmp #BzhCmp
import {
Component, View
} from 'angular2/angular2';
import { Tooltip } from './tooltip';
@Component({
selector: 'my-component',
properties: {
message: 'msg'
}
})
@View({
template:
'<div tooltip="Yo!">Hi, {{message}}</div>',
directives: [Tooltip]
})
export class MyComponent {}
<my-component msg="BreizhCamp">
</my-component>
HTML TS](https://image.slidesharecdn.com/angular-2-le-reveil-de-la-force-150614163805-lva1-app6891/85/Angular-2-le-reveil-de-la-force-23-320.jpg)
![Templating (1/2)Templating (1/2)
#Ng2BzhCmp #BzhCmp
<div>Hello, {{username}}</div>
<button [model]="message" (click)="hello(message)">
Click Me!!
</button>
<audio-player #player></audio-player>
<button (click)="player.pause()">Pause</button>
Interpolation
Property binding / Event binding
Local variable (référence)](https://image.slidesharecdn.com/angular-2-le-reveil-de-la-force-150614163805-lva1-app6891/85/Angular-2-le-reveil-de-la-force-24-320.jpg)
![BreizhCamp 2015 #BzhCmp
Dependency InjectionDependency Injection
#Ng2BzhCmp #BzhCmp
import { MyService } from './my-service';
@Component({
selector: 'my-component',
injectables: [MyService]
})
@View({
templateUrl: '/path/to/my-component.html'
})
class MyComponent {
myService: MyService;
constructor(myService: MyService) {
this.myService = myService;
}
fetchData() {
this.myService.get().then((list) => {
console.log(list);
});
}
}](https://image.slidesharecdn.com/angular-2-le-reveil-de-la-force-150614163805-lva1-app6891/85/Angular-2-le-reveil-de-la-force-26-320.jpg)
Angular 2 : le réveil de la force
- 1. Angular 2Angular 2 Le reveil de la forceLe reveil de la force #BzhCmp #Ng2BzhCmp BreizhCamp 2015 #BzhCmp
- 2. BreizhCamp 2015 #BzhCmp Nicolas PennecNicolas Pennec @NicoPennec@NicoPennec Full-Stack Web Developer Co-Fondateur de @RennesJS #Ng2BzhCmp #BzhCmp
- 3. BreizhCamp 2015 #BzhCmp Grégory HoullierGrégory Houllier @ghoullier@ghoullier Architecte Web, passionné par le Front-End Co-Fondateur de @RennesJS #Ng2BzhCmp #BzhCmp
- 4. @RennesJS@RennesJS rennesjs.orgrennesjs.org meetup.com/RennesJS/meetup.com/RennesJS/ #Ng2BzhCmp #BzhCmp Meetup le dernier jeudi de chaque mois 25/06/2015 à Epitech
- 5. Angular 1.XAngular 1.X #Ng2BzhCmp #BzhCmp Framework JS MV* Projet open-source porté par Google Version 1.X très populaire, 1er sur GitHub (39K stars) Concepts : Orienté Single Page Application (SPA) Étendre le langage HTML (directives) Data Binding bi-directionnel Dependency Injection, $scope, ...
- 6. Annonce d'Angular 2Annonce d'Angular 2 #Ng2BzhCmp #BzhCmp Octobre 2014: Première annonce Rupture de concepts Pas de rétrocompatibilité Nouveau langage (AtScript)
- 7. Annonce d'Angular 2Annonce d'Angular 2 #Ng2BzhCmp #BzhCmp Mars 2015 Rétropédalage de Google Opération séduction des devs Roadmap de la branche 1.X Nouveau langage (TypeScript)
- 8. PhilosophiePhilosophie #Ng2BzhCmp #BzhCmp Apprendre des erreurs d’Angular 1 2-way data binding, dirty-checking, $scope, ... Se baser sur les futurs standards du web WebComponents ES6 / ES7 / TypeScript* EverGreen Browsers Emulation due à la concurrence React et Ember Amélioration des performances
- 9. ES6, ES7, TypeScriptES6, ES7, TypeScript #Ng2BzhCmp #BzhCmp ES5 ES6 ES7 TS ES5 : ES6 : ES7 : draft TS : es5.github.io git.io/es6features typescriptlang.org Traceur: github.com/google/traceur-compiler
- 10. #Ng2BzhCmp #BzhCmp Surcouche à ES6/ES7 Créé par Microsoft Collaboration avec Google Merge avec AtScript Actuellement en version 1.5-beta
- 11. Exemple TypeScriptExemple TypeScript #Ng2BzhCmp #BzhCmp import { Annotation } from 'angular2/angular2'; import { Api as ApiSpeakers } from './api/speakers'; @Annotation({ property: 'value' }) class Talk { speakers: Array<String>; thread: String; constructor(thread: String, api: ApiSpeakers) { this.thread = thread; api.get().then((speakers) => { this.speakers = speakers; }); } } TS
- 12. Production Ready ?Production Ready ? #Ng2BzhCmp #BzhCmp NO!NO!
- 13. Production Ready ?Production Ready ? #Ng2BzhCmp #BzhCmp Version Alpha "Developer Preview" Solution instable API changeante Documentation en cours Pas de Roadmap
- 14. PoC Ready ?PoC Ready ? #Ng2BzhCmp #BzhCmp YES!YES!
- 15. BreizhCamp 2015 Ce qui va changer ?Ce qui va changer ? #Ng2BzhCmp #BzhCmp Angular 1 Controller Service Module $scope jQlite Directive Dependency Injection Angular 2 Controller Service Module $scope jQlite Directive Dependency Injection (TypeScript) Component Classes (ES6)
- 16. BreizhCamp 2015 #BzhCmp Directives/ComponentsDirectives/Components #Ng2BzhCmp #BzhCmp Directives Angular 1.X Directives Angular 2.X Components Angular 2.X Etendre le DOM Encapsule un template
- 17. BreizhCamp 2015 #BzhCmp A quoi ça va ressembler?A quoi ça va ressembler? #Ng2BzhCmp #BzhCmp
- 18. BreizhCamp 2015 #BzhCmp Bootstrap your codeBootstrap your code #Ng2BzhCmp #BzhCmp <!DOCTYPE html> <html> <head> <title>Angular 2 - BreizhCamp</title> <script src="//github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.90/traceur-runtime.js"> { bootstrap } { MyComponent } </scrip <script src="//jspm.io/system@0.16.js"></script> <script src="//code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script> </head> <body> <my-component></my-component> <script type="module"> import from 'angular2/angular2'; import from 'app/my-component'; bootstrap(MyComponent); </script> </body> </html> HTML
- 19. BreizhCamp 2015 #BzhCmp Component (1/3)Component (1/3) #Ng2BzhCmp #BzhCmp <my-component></my-component> import { Component, View } from 'angular2/angular2'; @Component({ selector: 'my-component' }) @View({ template: '<div>Hello, BreizhCamp</div>' }) export class MyComponent { } HTML TS
- 20. BreizhCamp 2015 #BzhCmp Component (2/3)Component (2/3) #Ng2BzhCmp #BzhCmp import { Component, View } from 'angular2/angular2'; @Component({ selector: 'my-component' }) @View({ template: '<div>Hello, {{message}}</div>' }) export class MyComponent { constructor() { this.message = 'BreizhCamp'; } } <my-component></my-component> HTML TS
- 21. BreizhCamp 2015 #BzhCmp Component (3/3)Component (3/3) #Ng2BzhCmp #BzhCmp import { Component, View } from 'angular2/angular2'; @Component({ selector: 'my-component', properties: { message: 'msg' } }) @View({ template: '<div>Hello, {{message}}</div>' }) export class MyComponent { } <my-component msg="BreizhCamp"> </my-component> HTML TS
- 22. BreizhCamp 2015 #BzhCmp Directive (1/2)Directive (1/2) #Ng2BzhCmp #BzhCmp import { Directive } from 'angular2/angular2'; @Directive({ selector: '[tooltip]', properties: { text: 'tooltip' }, hostListeners: { mouseover: 'display()' } }) export class Tooltip { display() { console.log(this.text); } } <div tooltip="Hello BreizhCamp"> Hover Me! </div> HTML TS
- 23. BreizhCamp 2015 #BzhCmp Directive (2/2)Directive (2/2) #Ng2BzhCmp #BzhCmp import { Component, View } from 'angular2/angular2'; import { Tooltip } from './tooltip'; @Component({ selector: 'my-component', properties: { message: 'msg' } }) @View({ template: '<div tooltip="Yo!">Hi, {{message}}</div>', directives: [Tooltip] }) export class MyComponent {} <my-component msg="BreizhCamp"> </my-component> HTML TS
- 24. Templating (1/2)Templating (1/2) #Ng2BzhCmp #BzhCmp <div>Hello, {{username}}</div> <button [model]="message" (click)="hello(message)"> Click Me!! </button> <audio-player #player></audio-player> <button (click)="player.pause()">Pause</button> Interpolation Property binding / Event binding Local variable (référence)
- 25. Templating (2/2)Templating (2/2) #Ng2BzhCmp #BzhCmp <div *if="user">Hello, {{user.name}}</div> // Équivalent à <template if="user"> <div>Hello, {{user.name}}</div> </template> <ul *if="list.length"> <li *for="#item of list"> {{item.title}} </li> </ul> Whole template
- 26. BreizhCamp 2015 #BzhCmp Dependency InjectionDependency Injection #Ng2BzhCmp #BzhCmp import { MyService } from './my-service'; @Component({ selector: 'my-component', injectables: [MyService] }) @View({ templateUrl: '/path/to/my-component.html' }) class MyComponent { myService: MyService; constructor(myService: MyService) { this.myService = myService; } fetchData() { this.myService.get().then((list) => { console.log(list); }); } }
- 27. BreizhCamp 2015 #BzhCmp Migration 1.X vers 2.X ?Migration 1.X vers 2.X ? #Ng2BzhCmp #BzhCmp Pas de rétrocompatibilitéPas de rétrocompatibilité Mais comment anticiper ces changements?Mais comment anticiper ces changements? Classes ES6/TS pour la définition des services Modules ES6 pour structurer son code Utiliser le ngNewRouter qui est sera disponible en 1.4 1.5 Préférer la syntaxe "controllerAs" et "bindToController" pour les directives
- 30. ConclusionConclusion #Ng2BzhCmp #BzhCmp Angular 2 c'est comme le prochain Star WarsAngular 2 c'est comme le prochain Star Wars tout le monde l'attend, maistout le monde l'attend, mais personne ne sait si ça sera à lapersonne ne sait si ça sera à la hauteurhauteur
- 31. BreizhCamp 2015 #BzhCmp #Ng2BzhCmp #BzhCmp