AngularJS - Inyeksi Dependensi: Panduan untuk Pemula

Hai, para programer yang sedang mencari ilmu! Hari ini, kita akan memulai sebuah perjalanan yang menarik ke dalam dunia AngularJS dan salah satu fitur yang paling kuatnya: Inyeksi Dependensi (DI). Jangan khawatir jika istilah ini terdengar seperti kode yang sulit dipahami - pada akhir tutorial ini, Anda akan bisa menggunakannya seperti seorang ahli!

Apa Itu Inyeksi Dependensi?

Sebelum kita masuk ke detilnya, mari pahami apa itu Inyeksi Dependensi. Bayangkan Anda sedang membuat kue. Apakah Anda merasa enak jika seseorang memberikan Anda tepat apa yang Anda butuhkan, tepat saat Anda membutuhkannya? Itu sebenarnya apa yang Inyeksi Dependensi lakukan dalam pemrograman - memberikan komponen (bahan) yang Anda butuhkan agar kode Anda (kue) bisa bekerja dengan baik.

Sekarang, mari jelajahi berbagai macam cara AngularJS mengimplementasikan Inyeksi Dependensi.

Value

Sebuah Value adalah bentuk ter simplest dari inyeksi dependensi. Itu seperti memberikan satu bahan saja ke fungsi membuat kue Anda.

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

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

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

Dalam contoh ini, kita membuat sebuah value bernama 'playerName' dan injeksikan ke dalam controller. Controller kemudian bisa menggunakan value ini seperti variable lokal.

Factory

Sebuah Factory mirip seperti campuran kue - itu adalah sebuah fungsi yang membuat dan mengembalikan sebuah objek. Itu lebih kompleks daripada Value tetapi memberikan Anda lebih fleksibilitas.

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

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

Di sini, kita membuat sebuah factory yang mengembalikan sebuah objek dengan properti dan metode. Controller kemudian bisa menggunakan factory ini untuk mengakses informasi pemain.

Service

Sebuah Service mirip seperti Factory, tetapi instead of mengembalikan sebuah objek, itu mengembalikan sebuah instance dari fungsi. Bayangkan itu seperti sebuah toko roti khusus yang hanya membuat satu jenis kue.

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

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

Perbedaan utama antara Factory dan Service adalah bagaimana mereka di-instantiasi. Sebuah Service selalu adalah sebuah singleton - hanya ada satu instance di seluruh aplikasi Anda.

Provider

Sebuah Provider adalah bentuk inyeksi dependensi yang paling kompleks di AngularJS. Itu seperti memiliki sebuah toko roti yang lengkap yang bisa membuat jenis kue apa saja, dengan bahan apa saja, dan cara apa saja Anda inginkan.

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

Sebuah Provider memungkinkan Anda mengkonfigurasi layanan sebelum aplikasi berjalan. Dalam contoh ini, kita mengatur nama pemain dalam fase config, yang dijalankan sebelum aplikasi utama.

Constant

Sebuah Constant mirip seperti Value, tetapi bisa di-injeksikan ke fase config aplikasi Anda. Itu seperti memiliki sebuah resep yang Anda ikuti tepat, tanpa perubahan, untuk jenis kue apa saja Anda buat.

app.constant('GAME_DURATION', 48);

app.config(function(GAME_DURATION) {
console.log('A basketball game lasts ' + GAME_DURATION + ' minutes');
});

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

Constants berguna untuk nilai yang tidak pernah berubah selama aplikasi Anda berjalan.

Contoh: Membangun Manajer Tim Bola Basket

Sekarang kita telah melihat semua jenis inyeksi dependensi, mari gabungkan semuanya dalam contoh yang lebih kompleks.

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 + ' says: Let\'s win this game!';
};
});

// 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('Team is full!');
}
};
});

Output

Ketika Anda menjalankan aplikasi ini, Anda akan mendapatkan manajer tim bola basket yang sepenuhnya berfungsi. Anda bisa menambah pemain ke tim Anda (sampai batas maksimum yang diizinkan), melihat motivasi pelatih, dan mengetahui di mana pertandingan dimainkan.

Berikut adalah tabel yang menggabungkan jenis-jenis inyeksi dependensi yang kita bahas:

Tipe	Deskripsi	Kasus Penggunaan
Value	Inyeksi nilai sederhana	Untuk injeksi nilai sederhana
Factory	Mengembalikan objek	Untuk membuat layanan dengan logik kompleks
Service	Mengembalikan instance fungsi	Untuk layanan singleton
Provider	Layanan konfigurasi	Untuk layanan yang memerlukan konfigurasi sebelum aplikasi berjalan
Constant	Nilai tak berubah, dapat di-injeksikan ke config	Untuk nilai konstan di seluruh aplikasi

Ingat, kunci untuk menguasai inyeksi dependensi adalah latihan. Mulai dengan inyeksi sederhana dan perlahan-lahan tingkatkan ke kasus yang lebih kompleks. Sebelum Anda sadari, Anda akan bisa membuat aplikasi AngularJS modular dan mudah dipelihara seperti seorang ahli!

Selamat coding, para master AngularJS masa depan!

Credits: Image by storyset