Angular 2

Préparez-vous !

@EmmanuelDemey

Qui souhaite commencer une application Angular2 ?

  • Bonnes Pratiques AngularJS
  • Débuter la migration
  • Démo

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'],
  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"],
    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

Démo

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

Questions ?

Matinale Bordeaux - Migration

By Emmanuel Demey

Matinale Bordeaux - Migration

  • 1,904