Panduan Awal bagi Inyeksi Ketergantungan di AngularJS

Hai, para pemula dalam dunia pemrograman! Hari ini, kita akan memulai perjalanan menarik ke dalam dunia AngularJS dan salah satu fitur terkuatnya: Inyeksi Ketergantungan (DI). Jangan khawatir jika istilah ini terdengar sepertiongkos-ongkos – pada akhir panduan ini, Anda akan bisa menggunakannya seperti seorang ahli!

Apa Itu Inyeksi Ketergantungan?

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

Sekarang, mari kita eksplor bagaimana AngularJS mengimplementasikan Inyeksi Ketergantungan.

Value

Sebuah Value adalah bentuk paling sederhana dari inyeksi ketergantungan. Itu seperti memberikan bahan tunggal ke fungsi pembuatan 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 injeksinya ke dalam controller. Controller kemudian bisa menggunakan value ini seperti variable lokal.

Factory

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

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 dengan Factory, tapi bukannya mengembalikan sebuah objek, ia mengembalikan sebuah instance dari fungsi. Bayangkan itu seperti sebuah toko kue 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-instantiasikan. Sebuah Service selalu adalah singleton – hanya ada satu instance di seluruh aplikasi Anda.

Provider

Sebuah Provider adalah bentuk inyeksi ketergantungan yang paling kompleks di AngularJS. Itu seperti memiliki sebuah toko kue yang lengkap yang bisa membuat jenis kue apa saja, dengan bahan apa saja, dan dengan 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 mengkonfigur layanan sebelum aplikasi berjalan. Dalam contoh ini, kita mengatur nama pemain di fase konfigurasi, yang berjalan sebelum aplikasi utama.

Constant

Sebuah Constant mirip dengan Value, tapi dapat di-injeksikan ke fase konfigurasi aplikasi Anda. Itu seperti memiliki resep yang Anda ikuti tepat, tanpa perubahan, untuk jenis kue apa saja yang 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 sepanjang aplikasi Anda.

Contoh: Membangun Manajer Tim Bola Basket

Sekarang kita telah menelusuri semua jenis inyeksi ketergantungan, mari kita 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 memiliki manajer tim bola basket yang sepenuhnya berfungsi. Anda dapat menambahkan pemain ke tim Anda (sampai batas maksimum yang diizinkan), melihat motivasi pelatih, dan mengetahui di mana pertandingan akan dimainkan.

Berikut adalah tabel yang menggabungkan jenis inyeksi ketergantungan yang kita bahas:

Tipe	Deskripsi	Kasus Penggunaan
Value	Inyeksi nilai sederhana	Untuk menginjeksikan nilai sederhana
Factory	Mengembalikan objek	Untuk membuat layanan dengan logika 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 di konfigurasi	Untuk nilai konstan di seluruh aplikasi

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

Selamat coding, para master masa depan AngularJS!

Credits: Image by storyset