Angular 2

Préparez-vous !

Matthieu Lux (@Swiip)

(© Slides @EmmanuelDemey)

Qui souhaite commencer une application Angular2 ?

John Papa's styleguide

Bonnes Pratiques

• Création de service via la méthode service
• Utilise ngAnnotate
• 1 composant AngularJS par fichier
• Syntaxe ControllerAs 
• bindToController dans l'API des directives
• Component-First Approach
• Utiliser des composants compatibles AngularJS et Angular2
• ECMAScript 2015

Service AngularJS

angular.module('MyApp')
    .service('BreweryService', function(){
        
        this.getBeers(){ ... }
    
    });

• Utiliser la méthode service
• Similaire à l'implémentation Angular2

Utilisation de ngAnnotate

angular.module('MyApp')
    .controller('BreweryCtrl', 
        ['BreweryService', 
        function(BreweryService){
        
            BreweryService.getBeers();
        
        }]);

function BreweryCtrl(BreweryService){
    BreweryService.getBeers();
}
BreweryCtrl.$inject = ['BreweryService']

angular.module('MyApp')
    .controller('BreweryCtrl', BreweryCtrl);

Utilisation de ngAnnotate

angular.module('MyApp')
    .controller('BreweryCtrl', 
        function(BreweryService){
        
            BreweryService.getBeers();
        
        });

• Eviter les problèmes après Minification
• Plus de duplication de code
• Intégration Grunt/Gulp

Component-First Approach

• Se baser sur des composants simples et  réutilisables
• Bannir l'utilisation des ng-controller
• Architecture identique à Angular2
• Eviter les contrôleurs et templates trop longs

controllerAs / bindToController

angular.module('MyApp')
    .controller('BreweryCtrl', 
        function(){
        
            this.beers = [];
        
        });

• Eviter d'utiliser le scope 
  • dans les contrôleurs
  • dans les directives
• Faciliter la hiérarchie des contrôleurs

<ul ng-controller="BreweryCtrl as bc">
    <li ng-repeat="beer in bc.beers">
        {{beer}}
    </li>
</ul>

Utiliser EcmaScript 2015

class BreweryCtrl {

    constructor() { ... }

    selectBeer() { ... }
}
export { BreweryCtrl }

• Définition des composants AngularJS via des classes
• Utilisation des modules ES2015

import { BreweryCtrl} from './BreweryCtrl';

angular
    .module('app', [])
    .controller('BreweryCtrl', BreweryCtrl);

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_*

generator-gulp-angular

https://github.com/Swiip/generator-gulp-angular

ngUpgrade.js

Mixer AngularJS et Angular2

ngUpgrade

Intérêts

• Composants Angular 2 à partir de directives
• Directives à partir de composant Angular2
• Mixer les services AngularJS et Angular2
• Initialiser une application AngularJS & Angular2

// 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));

ngUpgrade

ngForward

Ecrire du AngularJS
avec la syntaxe Angular2

@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);

ngForward

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