Matthieu Lux (@Swiip)
(© Slides @EmmanuelDemey)
Responsable Pôle Web
Zenika
@Swiip
JavaScript / Web
Les choses que nous n'aimons pas...
DI (provider, service, factory...)
MV*
MV*
MV*
Filtres
app.directive('MyDirective', function(){
return {
restrict: 'AE',
require: '?^^ngModel',
scope: { variable: '@' },
compile: function(...) {
return {
pre: function(...) { ... },
post: function(...) { ... }
}
},
link: function(...) { ... }
}
});
La solution... Angular 2
Attention !
<app></app>
menu
grid
gallery
DI
(classes ES6 ou TypeScript)
Pipes
(classes ES6 ou TypeScript)
ES5
ES2015
TypeScript
ES5
ES2016
TypeScript
Dart
Custom Elements
Templates
Imports
Shadow DOM
Les composants
//<my-app></my-app>
function MyAppComponent() {
}
MyAppComponent.annotations = [
new angular.ComponentAnnotation({
selector: 'my-app',
template: "<main>" +
"<h1> This is my first Angular2 app</h1>" +
"</main>"
})
];
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `<main>
<h1> This is my first Angular2 app</h1>
</main>`
})
class MyAppComponent {
}
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'my-app',
template: `<main>
<h1> This is my first Angular2 app</h1>
</main>`
})
class MyAppComponent {
}
bootstrap(MyAppComponent);
Root Cpt
Child1 Cpt
Child2 Cpt
[property]="expression"
(event)="update()"
<input [attr]="expression" />
<body>
<h1>My First Angular2 app</h1>
</body>
<body>
<h1 [textContent]="'My First Angular2 app'">
</h1>
</body>
<body>
<h1>{{'My First Angular2 app'}}</h1>
</body>
//<beer-item [beer]="'Maredsous'"></beerItem>
@Component({
selector: 'beer-item',
template: `<section>
<h2>{{beer}}</h2>
<button>Je veux celle-ci !</button>
</section>`
})
export class BeerItem {
@Input() beer: String;
}
<input (event)="expression" />
//<beer-item [beer]="'Maredsous'" (selectBeer)="sendToBeerTap($event)"></beerItem>
@Component({
selector: 'beer-item',
template: `<section>
<h2>{{beer}}</h2>
<button (click)="selectItem()">Je veux celle-ci !</button>
</section>`
})
export class BeerItem {
@Input() beer: String;
@Output() selectBeer: EventEmitter;
selectItem() {
this.selectBeer.next(this.beer);
}
}
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.
import {BeerItem} from 'BeerItem';
@Component({
selector: 'my-app',
template: `<main class="mdl-layout__content">
<ul class="googleapp-card-list">
<li *ng-for="#beer of beers">
<beer-item [beer]="beer"></beer-item>
</li>
</ul>
</main>`,
directives: [BeerItem]
})
export class MyAppComponent {
public beers: String[] = [];
constructor() { ... }
}
@Component
@View
@Directive
@Animation
@Inject
@InjectLazy
@Optional
@Host
@Parent
@Pipe
@Property
@Event
@RouteConfig
@HostBinding
@HostEvent
@ContentChildren
@ViewChild
@ViewChildren
@Input
@Output
@Attribute
@CanActivate
Mais encore...
Questions ?