Préparez-vous !
Matthieu Lux (@Swiip)
(© Slides @EmmanuelDemey)
angular.module('MyApp')
.service('BreweryService', function(){
this.getBeers(){ ... }
});
angular.module('MyApp')
.controller('BreweryCtrl',
['BreweryService',
function(BreweryService){
BreweryService.getBeers();
}]);
function BreweryCtrl(BreweryService){
BreweryService.getBeers();
}
BreweryCtrl.$inject = ['BreweryService']
angular.module('MyApp')
.controller('BreweryCtrl', BreweryCtrl);
angular.module('MyApp')
.controller('BreweryCtrl',
function(BreweryService){
BreweryService.getBeers();
});
angular.module('MyApp')
.controller('BreweryCtrl',
function(){
this.beers = [];
});
<ul ng-controller="BreweryCtrl as bc">
<li ng-repeat="beer in bc.beers">
{{beer}}
</li>
</ul>
class BreweryCtrl {
constructor() { ... }
selectBeer() { ... }
}
export { BreweryCtrl }
import { BreweryCtrl} from './BreweryCtrl';
angular
.module('app', [])
.controller('BreweryCtrl', BreweryCtrl);
npm install --save-dev eslint eslint-plugin-angular
https://github.com/Swiip/generator-gulp-angular
// Example of Angular 2 Component
@Component({
selector: 'my-settings',
properties: ['user'],
events: ['logout']
})
@View({
templateUrl: '...'
})
class MySettings {
user: User;
logout = new EventEmitter();
}
// AngularJS 1 module declaration:
myAppModule
.directive('mySettings', ng2upgrade.ng1from2(MySettings));
@Component({
selector: 'app',
bindings: [TestService, "ui.router"]
})
@View({
directives: [InnerApp],
template: `
<inner-app (event1)="app.onIncrement()" [message1]="app.message1"></inner-app>
`
})
class AppCtrl{
constructor(){
this.triggers = 0;
this.message1 = 'Hey, inner app, you can not change this';
}
onIncrement(){
this.triggers++;
}
}
bootstrap(AppCtrl);
Questions ?