Injection de dépendance et minification

Injection de dépendance

L’injection de dépendances (dependency injection en anglais) est un mécanisme qui permet d’implémenter le principe de l’inversion de contrôle.

Il consiste à créer dynamiquement (injecter) les dépendances entre les différentes classes en s’appuyant sur une description (fichier de configuration ou métadonnées) ou de manière programmatique. Ainsi les dépendances entre composants logiciels ne sont plus exprimées dans le code de manière statique mais déterminées dynamiquement à l’exécution.

Wikipedia

Exemple d’injection du scope avec AngularJS

app.module("app").controller( 'loginController', function($scope) {

});

app.module("app").controller( 'loginController', function($scope) {

});

Dans l’exemple précédent, l’objet $scope est injecté dans le contrôleur. Il n’est pas nécessaire de connaître la provenance de cet objet, c’est le cadriciel AngularJS qui se charge de trouver le bon objet et de l’injecter dans le contrôleur.

Injection basée sur le nom de la variable

AngularJS utilise le nom de la variable pour identifier le bon objet à injecter. Le nom $scope est donc bien important dans ce cas.

Injection multiple

Il est possible d’injecter un nombre illimité de dépendances :

app.module("app").controller( 'loginController', 
        function($scope, $http, $q, $auth, monService, ...) {

});

app.module("app").controller( 'loginController',

function($scope, $http, $q, $auth, monService, ...) {

});

Conseil

Il est recommandé de limiter les dépendances à un maximum de 2 ou 3 objets. De cette manière, on facilite la testabilité, on applique le SRP (Single Responsability Principle) et le rôle de notre contrôleur est ainsi mieux défini.

Minification

Lorsque vient le temps de produire un « build » prêt pour la production, idéalement, vos fichiers doivent être optimisés et donc minifiés.

Le processus de minification est simple, un outil tel que Closure éliminera les espaces blancs (espace et tab) de votre code et remplacera les noms des variables pour des noms abrégés ($voiciLeNomdeMonContrôleur -> devient -> $a). Un fichier .min.js est souvent créé à partir d’un fichier .js.

Angular minifié et non minifié

Voici le même code avec et sans minification :

Concaténation

Par la suite, tous les fichiers .js peuvent être concaténés dans un seul fichier. De cette manière, on limite le nombre de requêtes au serveur.

Nom unique

Finalement, il peut-être parfois utile de donner un nom unique au fichier js minimifié. Vous pourrez parfois voir ce genre de nom :

app.kjhappydf98.min.js

Si le code de l’application est modifié, le hash change aussi et invalide le cache de votre navigateur. Le fichier sera ainsi téléchargé de nouveau et l’application sera à jour avec vos dernières modifications.

Minifier avec Grunt

Si vous avez installé et configuré un générateur Yo comme generator-angular ou generator-angular-fullstack, une tâche de minification est disponible. En fait, la tâche prépare votre projet AngularJS pour la mise en ligne en production.

$ grunt build

1	$ grunt build

Une fois la tâche lancée, elle crée un dossier dist (pour distribution) avec tous les fichiers .js et .css minifiés et concatenés. Vous pouvez ainsi déployer votre code sur un serveur de staging ou de production.

Attention

Si vos dépendances ne sont pas annotées, votre build ne sera pas fonctionnel! Continuez votre lecture pour la solution.

Minification et injection de dépendance

Nous avons vu que l’injection de dépendances est basée sur le nom ($scope) de la variable et que la minification remplace les noms des variables par de noms abrégés ($a). Cela cause une difficulté de plus pour le déploiement de votre application en production.

La solution, l’annotation des dépendances

Version initiale du contrôleur sans minification possible

Code préalablement présenté. Sans minification :

app.module("app").controller( 'loginController', function($scope) {

});

app.module("app").controller( 'loginController', function($scope) {

});

Version du contrôleur avec minification possible

app.module("app").controller( 'loginController', ['$scope', function($scope) {

}]);

app.module("app").controller( 'loginController', ['$scope', function($scope) {

}]);

Le truc est de créer une annotation dans un tableau [ ]. Ce tableau comporte les noms des injections en format chaîne de caractères. Puisque le processus de minification ne modifie pas les chaînes, elles resteront intactes.

Version avec 2 objets injectés et minification possible

app.module("app").controller( 'loginController', 

       ['$scope', '$http', function($scope, $http) {

}]);

app.module("app").controller( 'loginController',

['$scope', '$http', function($scope, $http) {

}]);

Permettre l’injection de dépendances avec ngAnnotate

ngAnnotate est un outil logiciel qui analyse votre code Angular et le transforme dans un format qui peut ensuite être minifié. En ajoutant la chaîne « ngInject » dans votre code, il est possible d’indiquer les endroits où l’injection de dépendance prend place. ngAnnotate pourra donc transformer votre code afin qu’il puisse être minifié.

https://github.com/olov/ng-annotate

$ npm install -g ng-annotate

1	$ npm install -g ng-annotate

Pour le moment présent, il est proposer d’annoter le code manuellement sans utiliser d’outil comme ngAnnotate.

Grunt et ngAnnotate

Une tâche grunt permet l’exécution de ngAnnotate est disponible.

https://www.npmjs.com/package/grunt-ng-annotate

Add, remove and rebuild AngularJS dependency injection annotations.

npm install grunt-ng-annotate --save-dev

1	npm install grunt-ng-annotate --save-dev

Pour aller plus loin sur la minification et l’injection de dépendances

Closure Compiler | Google Developers

https://developers.google.com/closure/compiler/

AngularJS: Developer Guide: Dependency Injection

Dependency injection

Qu’est ce que la minification ? | Développement Web | IT-Connect

http://www.it-connect.fr/quest-ce-que-la-minification/

Injection de dépendance et minification