AngularJS - Injection de dépendances : Guide pour les débutants

Bonjour, futurs programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde d'AngularJS et l'une de ses fonctionnalités les plus puissantes : l'Injection de Dépendances (DI). Ne vous inquiétez pas si ces termes vous semblent barbares pour le moment - à la fin de ce tutoriel, vous les prononcerez comme un pro !

Qu'est-ce que l'Injection de Dépendances ?

Avant de plonger dans les détails, comprenons ce qu'est l'Injection de Dépendances. Imaginez que vous cuisinez un gâteau. Plutôt que de rassembler tous les ingrédients vous-même, ne serait-il pas agréable si quelqu'un vous les remettait exactement quand vous en avez besoin ? C'est essentiellement ce que fait l'Injection de Dépendances en programmation - elle fournit les composants (ingrédients) dont votre code (le gâteau) a besoin pour fonctionner correctement.

Maintenant, explorons les différentes manières dont AngularJS implémente l'Injection de Dépendances.

Value

Une Value est la forme la plus simple d'injection de dépendances. C'est comme passer un seul ingrédient à votre fonction de fabrication de gâteaux.

var app = angular.module('myApp', []);

app.value('playerName', 'LeBron James');

app.controller('PlayerCtrl', function($scope, playerName) {
$scope.name = playerName;
});

Dans cet exemple, nous créons une value appelée 'playerName' et l'injectons dans notre contrôleur. Le contrôleur peut alors utiliser cette value comme s'il s'agissait d'une variable locale.

Factory

Une Factory est comme un mélange à gâteau - c'est une fonction qui crée et retourne un objet. Elle est plus complexe qu'une Value mais offre plus de flexibilité.

app.factory('playerFactory', function() {
return {
name: 'Stephen Curry',
team: 'Golden State Warriors',
getInfo: function() {
return this.name + ' joue pour ' + this.team;
}
};
});

app.controller('PlayerCtrl', function($scope, playerFactory) {
$scope.playerInfo = playerFactory.getInfo();
});

Ici, nous créons une factory qui retourne un objet avec des propriétés et des méthodes. Le contrôleur peut alors utiliser cette factory pour accéder aux informations du joueur.

Service

Un Service est similaire à une Factory, mais au lieu de retourner un objet, il retourne une instance d'une fonction. Pensez-y comme une boulangerie spécialisée qui ne fait qu'un type de gâteau.

app.service('PlayerService', function() {
this.name = 'Kevin Durant';
this.team = 'Phoenix Suns';
this.getInfo = function() {
return this.name + ' joue pour ' + this.team;
};
});

app.controller('PlayerCtrl', function($scope, PlayerService) {
$scope.playerInfo = PlayerService.getInfo();
});

La principale différence entre une Factory et un Service est comment ils sont instanciés. Un Service est toujours un singleton - il n'y a qu'une seule instance dans toute votre application.

Provider

Un Provider est la forme la plus complexe d'injection de dépendances dans AngularJS. C'est comme avoir une boulangerie entièrement équipée qui peut faire n'importe quel type de gâteau, avec n'importe quel ingrédient, de n'importe quelle manière que vous souhaitez.

app.provider('playerProvider', function() {
var defaultName = 'Giannis Antetokounmpo';

return {
setName: function(name) {
defaultName = name;
},
$get: function() {
return {
getName: function() {
return defaultName;
}
};
}
};
});

app.config(function(playerProviderProvider) {
playerProviderProvider.setName('Luka Doncic');
});

app.controller('PlayerCtrl', function($scope, playerProvider) {
$scope.playerName = playerProvider.getName();
});

Un Provider vous permet de configurer le service avant que l'application ne s'exécute. Dans cet exemple, nous définissons le nom du joueur dans la phase de configuration, qui s'exécute avant l'application principale.

Constant

Une Constant est similaire à une Value, mais elle peut être injectée dans la phase de configuration de votre application. C'est comme avoir une recette que vous suivez toujours exactement, peu importe quel gâteau vous faites.

app.constant('GAME_DURATION', 48);

app.config(function(GAME_DURATION) {
console.log('Un match de basket dure ' + GAME_DURATION + ' minutes');
});

app.controller('GameCtrl', function($scope, GAME_DURATION) {
$scope.duration = GAME_DURATION;
});

Les Constants sont utiles pour les valeurs qui ne changent jamais tout au long de votre application.

Exemple : Construire un Gestionnaire d'Équipe de Basket-Ball

Maintenant que nous avons couvert tous les types d'injection de dépendances, mettons tout cela ensemble dans un exemple plus complexe.

var app = angular.module('basketballApp', []);

// Constant
app.constant('MAX_PLAYERS', 15);

// Value
app.value('teamName', 'Angular All-Stars');

// Factory
app.factory('PlayerFactory', function() {
var players = [];
return {
addPlayer: function(name) {
players.push(name);
},
getPlayers: function() {
return players;
}
};
});

// Service
app.service('CoachService', function() {
this.name = 'Coach Angular';
this.motivate = function() {
return this.name + ' dit : Gagnons ce match !';
};
});

// Provider
app.provider('gameProvider', function() {
var venue = 'Home Court';

return {
setVenue: function(v) {
venue = v;
},
$get: function() {
return {
getVenue: function() {
return venue;
}
};
}
};
});

app.config(function(gameProviderProvider) {
gameProviderProvider.setVenue('Angular Arena');
});

app.controller('TeamCtrl', function($scope, MAX_PLAYERS, teamName, PlayerFactory, CoachService, gameProvider) {
$scope.teamName = teamName;
$scope.maxPlayers = MAX_PLAYERS;
$scope.players = PlayerFactory.getPlayers();
$scope.coachMotivation = CoachService.motivate();
$scope.gameVenue = gameProvider.getVenue();

$scope.addPlayer = function(playerName) {
if ($scope.players.length < MAX_PLAYERS) {
PlayerFactory.addPlayer(playerName);
$scope.playerName = '';
} else {
alert('L\'équipe est complète !');
}
};
});

Output

Lorsque vous exécutez cette application, vous aurez un gestionnaire d'équipe de basket-bol fonctionnel. Vous pouvez ajouter des joueurs à votre équipe (jusqu'à la limite autorisée), voir la motivation de l'entraîneur et connaître le lieu du match.

Voici un tableau résumant les différents types d'injection de dépendances que nous avons couverts :

Type	Description	Cas d'utilisation
Value	Injection de valeur simple	Pour injecter des valeurs simples
Factory	Retourne un objet	Pour créer des services avec un logic complexe
Service	Retourne une instance de fonction	Pour des services singleton
Provider	Fabrique de service configurable	Pour les services qui nécessitent une configuration avant le lancement de l'application
Constant	Valeur immuable, injectable en configuration	Pour les valeurs constantes à l'échelle de l'application

Souvenez-vous, la clé pour maîtriser l'injection de dépendances est la pratique. Commencez par des injections simples et progressez vers des scénarios plus complexes. Avant de vous en rendre compte, vous serez créer des applications AngularJS modulaires et maintainables comme un pro !

Bonne programmation, futurs maîtres d'AngularJS !

Credits: Image by storyset