Organisation du code – Etienne Crinier

J’Ã©tais trÃ¨s rÃ©fractaire Ã dÃ©velopper une solution full javascript puisque pour moi ce n’Ã©tait pas vraiment un langage; Pas de notion de classe, interface, hÃ©ritage …

Mais Ã©tant donnÃ© la tendance des applications je me suis tournÃ© vers ce langage en utilisant le framework Angular qui pour moi est un framework assez complet. TrÃ¨s tournÃ© injection de dÃ©pendance, je me suis dit je vais pouvoir faire une vraie application.

Je me suis rendu compte Ã l’utilisation qu’il Ã©tait possible de faire le meilleur comme le pire. En maitrisant bien l’usage ce n’est plus un calvaire d’utiliser angular. Je vais donc essayer d’expliquer ma vision des choses dans cet article.

Factory/Service :

(function () {
  angular
    .module('Module')
    .factory('Service', Service);

  Service.$inject = ['dependency1'];
  function Service(dependency1) {
    //Champs privÃ©s
    var field = null;

    var publicProperty = null;
        
    //MÃ©thodes ou propriÃ©tÃ©s publiques
    var service = {
      exposedFn: exposedFn,
      property: publicProperty
    };

    return service;

    ////////////////
    function exposedFn() { }
        
    //MÃ©thode privÃ©e
    function nonExposedFn() { }
  }
})();

(function () {

angular

.module('Module')

.factory('Service', Service);

Service.$inject = ['dependency1'];

function Service(dependency1) {

//Champs privÃ©s

var field = null;

var publicProperty = null;

//MÃ©thodes ou propriÃ©tÃ©s publiques

var service = {

exposedFn: exposedFn,

property: publicProperty

};

return service;

////////////////

function exposedFn() { }

//MÃ©thode privÃ©e

function nonExposedFn() { }

}

})();

Tout d’abord l’encapsulation la de la classe parÂ (function() { }(); permet d’Ã©viter les problÃ¨mes de conflit Ã la minification.

Afin de diminuer les portÃ©es et que cela soit plus claire, on initialise la factory (ou service) par une fonction non anonyme :

(function () {
  //A Ã©viter
    angular
    .module('Module')
    .factory('Service', function() {
      
    });

  //Bonne dÃ©claration
  angular
    .module('Module')
    .factory('Service', Service);

  function Service() {
  }
})();

(function () {

//A Ã©viter

angular

.module('Module')

.factory('Service', function() {

});

//Bonne dÃ©claration

angular

.module('Module')

.factory('Service', Service);

function Service() {

}

})();

De mÃªme pour les injections de dÃ©pendances, il est plus clair d’utiliser $inject :

(function () {
  //A Ã©viter
    angular
    .module('Module')
    .factory('Service', ['dependency1',function(dependency1) {
      
    }]);
    
  //Un peu mieux
    angular
    .module('Module')
    .factory('Service', ['dependency1', Service]);

  function Service(dependency1) {
  }
  
  //Bonne dÃ©claration
  angular
    .module('Module')
    .factory('Service', Service);
  
  Service.$inject = ['dependency1'];
  
  function Service(dependency1) {
  }
})();

(function () {

//A Ã©viter

angular

.module('Module')

.factory('Service', ['dependency1',function(dependency1) {

}]);

//Un peu mieux

angular

.module('Module')

.factory('Service', ['dependency1', Service]);

function Service(dependency1) {

}

//Bonne dÃ©claration

angular

.module('Module')

.factory('Service', Service);

Service.$inject = ['dependency1'];

function Service(dependency1) {

}

})();

Encore une fois prÃ©fÃ©rer l’usage de fonction que l’on expose plutÃ´t que de passer par des fonctions anonymes :

(function () {
  //A Ã©viter
  angular
    .module('Module')
    .factory('Service', Service);
  
  Service.$inject = ['dependency1'];
  
  function Service(dependency1) {
    return {
      method1: function() {},
      method2: function() {}
    };
  }
  
  //Bonne dÃ©claration
  angular
    .module('Module')
    .factory('Service', Service);
  
  Service.$inject = ['dependency1'];
  
  function Service(dependency1) {
    
    var service = {
      method1:method1,
      method2:method2
    }
    return service;
    
    function method1(){ }
    function method2(){ }
  }
})();

(function () {

//A Ã©viter

angular

.module('Module')

.factory('Service', Service);

Service.$inject = ['dependency1'];

function Service(dependency1) {

return {

method1: function() {},

method2: function() {}

};

}

//Bonne dÃ©claration

angular

.module('Module')

.factory('Service', Service);

Service.$inject = ['dependency1'];

function Service(dependency1) {

var service = {

method1:method1,

method2:method2

}

return service;

function method1(){ }

function method2(){ }

}

})();

De cette maniÃ¨re, on Ã©vite diminue considÃ©rablement le nombre de portÃ©es et on visualise trÃ¨s facilement les mÃ©thodes et propriÃ©tÃ© publiques et privÃ©es. CouplÃ© Ã une ngDoc on a un code bien lisible et comprÃ©hensible de tous 🙂

Controller/Directive

Les conseils Ã©voquÃ©s prÃ©cÃ©demment restent valables pour les controllers et directives nÃ©anmoins il y a quelques subtilitÃ©s que je vais essayer de dÃ©crire ici.

(function() {
  angular
    .module('Module')
    .controller('Controller', Controller);

  Controller.$inject = ['dependency1'];
  function Controller(dependency1) {
    var vm = this;
    
    vm.exposedMethod   = exposedMethod;
    vm.exposedProperty = {};

    var nonExposedField = {};
    
    ////////////////

    function exposedMethod() { }
    
    function nonExposedMethod() { }
  }
})();

(function() {

angular

.module('Module')

.controller('Controller', Controller);

Controller.$inject = ['dependency1'];

function Controller(dependency1) {

var vm = this;

vm.exposedMethod = exposedMethod;

vm.exposedProperty = {};

var nonExposedField = {};

////////////////

function exposedMethod() { }

function nonExposedMethod() { }

}

})();

Par convention dans un controller on Ã©crit Â : var vm = this (vm = ViewModel). Ce qui correspond donc Ã ce qui va Ãªtre exposÃ© cÃ´tÃ© vue.

Du coup dans un soucis de performance et de lisibilitÃ©, il faut absolument exposer uniquement les propriÃ©tÃ©s et mÃ©thodes que l’on souhaite utiliser cÃ´tÃ© vue.

J’espÃ¨re que ces conseils vont vous aider Ã mieux organiser vos classes angular.

Dans un prochain article, j’aborderais la structure d’une application angular.