AngularJS - Dependency Injection: A Beginner's Guide

Hallo, ambitionierte Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von AngularJS und eine seiner leistungsfähigsten Funktionen: die Abhängigkeitsinjektion (DI). Keine Sorge, wenn diese Begriffe jetzt wie Kauderwelsch klingen – bis zum Ende dieses Tutorials werdet ihr sie wie ein Profi verwenden!

Was ist Abhängigkeitsinjektion?

Bevor wir uns den Details widmen, lassen Sie uns verstehen, was Abhängigkeitsinjektion ist. Stellt euch vor, ihr backt einen Kuchen. Wäre es nicht schön, wenn jemand euch genau das gibt, was ihr braucht, wenn ihr es braucht? Das ist im Grunde genommen, was Abhängigkeitsinjektion in der Programmierung macht – sie stellt die Komponenten (Zutaten) bereit, die euer Code (der Kuchen) braucht, um korrekt zu funktionieren.

Nunja, lassen wir uns die verschiedenen Möglichkeiten anschauen, wie AngularJS Abhängigkeitsinjektion implementiert.

Value

Ein Value ist die einfachste Form der Abhängigkeitsinjektion. Es ist wie das Übergeben eines einzelnen Ingredients an eure Kuchenbackfunktion.

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

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

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

In diesem Beispiel erstellen wir einen Value namens 'playerName' und injizieren ihn in unseren Controller. Der Controller kann diesen Value dann verwenden, als wäre er eine lokale Variable.

Factory

Eine Factory ist wie ein Kuchenteig – es ist eine Funktion, die ein Objekt erstellt und zurückgibt. Sie ist komplexer als ein Value, bietet aber mehr Flexibilität.

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

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

Hier erstellen wir eine Factory, die ein Objekt mit Eigenschaften und Methoden zurückgibt. Der Controller kann dann diese Factory verwenden, um die Informationen des Spielers abzurufen.

Service

Ein Service ist ähnlich wie eine Factory, aber anstatt ein Objekt zurückzugeben, gibt er eine Instanz einer Funktion zurück. Denkt daran als eine spezialisierte Bäckerei, die nur einen bestimmten Kuchen macht.

app.service('PlayerService', function() {
this.name = 'Kevin Durant';
this.team = 'Phoenix Suns';
this.getInfo = function() {
return this.name + ' spielt für ' + this.team;
};
});

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

Der Hauptunterschied zwischen einer Factory und einem Service ist, wie sie instantiiert werden. Ein Service ist immer ein Singleton – es gibt nur eine Instanz davon im gesamten Anwendungsbereich.

Provider

Ein Provider ist die komplexeste Form der Abhängigkeitsinjektion in AngularJS. Es ist wie eine vollständig ausgestattete Bäckerei, die jeden beliebigen Kuchen mit beliebigen Zutaten und auf jede mögliche Weise herstellen kann.

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();
});

Ein Provider ermöglicht es euch, den Service vor dem Start der Anwendung zu konfigurieren. In diesem Beispiel setzen wir den Namen des Spielers in der Konfigurationsphase, die vor der Hauptanwendung läuft.

Constant

Eine Constant ist ähnlich wie ein Value, aber sie kann in die Konfigurationsphase der Anwendung injiziert werden. Es ist wie ein Rezept, das ihr immer genau befolgt, egal welchen Kuchen ihr macht.

app.constant('GAME_DURATION', 48);

app.config(function(GAME_DURATION) {
console.log('Ein Basketballspiel dauert ' + GAME_DURATION + ' Minuten');
});

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

Konstanten sind nützlich für Werte, die im gesamten Anwendungsbereich niemals ändern.

Beispiel: Erstellung eines Basketballteam-Managers

Nun, da wir alle Arten der Abhängigkeitsinjektion behandelt haben, lassen uns alles in einem komplexeren Beispiel zusammenführen.

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 + ' sagt: Lasst uns dieses Spiel gewinnen!';
};
});

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

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('Das Team ist voll!');
}
};
});

Ausgabe

Wenn ihr diese Anwendung startet, werdet ihr einen voll funktionsfähigen Basketballteam-Manager haben. Ihr könnt Spieler zu eurem Team hinzufügen (bis zur maximal zulässigen Anzahl), die Motivation des Trainers sehen und wissen, wo das Spiel stattfindet.

Hier ist eine Tabelle, die die verschiedenen Arten der Abhängigkeitsinjektion zusammenfasst, die wir behandelt haben:

Typ	Beschreibung	Verwendungszweck
Value	Einfache Wertinjektion	Für das Injizieren einfacher Werte
Factory	Gibt ein Objekt zurück	Für die Erstellung von Diensten mit komplexer Logik
Service	Gibt eine Funktion zurück	Für Singleton-Dienste
Provider	Konfigurierbarer Dienstefabrikant	Für Dienste, die vor dem Start der Anwendung konfiguriert werden müssen
Constant	Unveränderlicher Wert, in Konfiguration injizierbar	Für konstante Werte im gesamten Anwendungsbereich

Denkt daran, der Schlüssel zum Beherrschen der Abhängigkeitsinjektion ist die Übung. Beginnt mit einfachen Injektionen und arbeitet euch langsam zu komplexeren Szenarien vor. Bevor ihr es wisst, werdet ihr modular erweiterbare AngularJS-Anwendungen wie ein Profi erstellen können!

Happy Coding, zukünftige AngularJS-Meister!

Credits: Image by storyset