Injeksi Ketergantungan AngularJS: Komponen Mana yang Diinjeksi

Oleh: James Hartman James Hartman
Hours Updated

Apa itu Injeksi Ketergantungan di AngularJS?

Injeksi Ketergantungan di AngularJS adalah pola desain perangkat lunak yang mengimplementasikan kontrol inversi untuk menyelesaikan dependensi. Ini memutuskan bagaimana komponen mempertahankan ketergantungannya. Ini dapat digunakan saat mendefinisikan komponen atau menyediakan blok run dan konfigurasi modul. Ini memungkinkan Anda membuat komponen dapat digunakan kembali, diuji, dan dipelihara.

Pembalikan Kontrol: Artinya objek tidak menciptakan objek lain yang diandalkannya untuk melakukan pekerjaannya. Sebaliknya, mereka mendapatkan benda-benda tersebut dari sumber luar. Ini membentuk dasar dari Injeksi Ketergantungan AngularJS dimana jika satu objek bergantung pada objek lain; objek utama tidak mengambil tanggung jawab untuk membuat objek dependen dan kemudian menggunakan metodenya. Sebaliknya, sumber eksternal (yang dalam AngularJS adalah kerangka kerja AngularJS itu sendiri) membuat objek dependen dan memberikannya ke objek sumber untuk penggunaan lebih lanjut.

Jadi mari kita pahami dulu apa itu ketergantungan.

Injeksi Ketergantungan di AngularJS

Diagram di atas menunjukkan contoh injeksi ketergantungan AngularJS sederhana dari ritual sehari-hari dalam pemrograman database.

  • Kotak 'Model' menggambarkan "Kelas Model" yang biasanya dibuat untuk berinteraksi dengan basis data. Jadi sekarang basis data menjadi ketergantungan agar "Kelas Model" dapat berfungsi.
  • Dengan injeksi ketergantungan, kami membuat layanan untuk mengambil semua informasi dari database dan masuk ke kelas model.

Di sisa tutorial ini, kita akan melihat lebih jauh tentang injeksi ketergantungan dan bagaimana hal ini dilakukan di AngularJS.

Komponen Mana yang Dapat Disuntikkan sebagai Ketergantungan di AngularJS?

Di Angular.JS, dependensi dimasukkan menggunakan “metode pabrik yang dapat diinjeksi” atau “fungsi konstruktor”.

Komponen-komponen ini dapat dimasukkan dengan komponen “layanan” dan “nilai” sebagai dependensi. Kita telah melihat ini di topik sebelumnya dengan layanan $http.

Kita telah melihat bahwa layanan $http dapat digunakan dalam AngularJS untuk mendapatkan data dari a MySQL atau MS SQL Basis data server melalui a PHP aplikasi web.

Layanan $http biasanya didefinisikan dari dalam pengontrol dengan cara berikut.

sampleApp.controller ('AngularJSController', function ($scope, $http)

Sekarang ketika layanan $http didefinisikan di pengontrol seperti yang ditunjukkan di atas. Artinya pengontrol sekarang memiliki ketergantungan pada layanan $http.

Jadi ketika kode di atas dieksekusi, AngularJS akan melakukan langkah-langkah berikut;

  1. Periksa untuk melihat apakah "layanan $http" telah dipakai. Karena "pengontrol" kita sekarang bergantung pada "layanan $http", objek layanan ini perlu tersedia untuk pengontrol kita.
  2. Jika AngularJS mengetahui bahwa layanan $http tidak dipakai, AngularJS menggunakan fungsi 'pabrik' untuk membuat objek $http.
  3. Injektor dalam Angular.JS kemudian menyediakan instance layanan $http ke pengontrol kami untuk diproses lebih lanjut.

Sekarang ketergantungan telah dimasukkan ke dalam pengontrol kita, sekarang kita dapat menjalankan fungsi yang diperlukan dalam layanan $http untuk diproses lebih lanjut.

Contoh Injeksi Ketergantungan

Dalam contoh ini, kita akan mempelajari cara menggunakan injeksi ketergantungan di AngularJS.

Injeksi ketergantungan dapat diimplementasikan dengan 2 cara

  1. Salah satunya adalah melalui “Komponen Nilai”
  2. Cara lainnya adalah melalui “Layanan”

Mari kita lihat penerapan kedua cara tersebut lebih detail.

1) Komponen nilai

Konsep ini didasarkan pada fakta penciptaan yang sederhana JavaNaskah objek dan meneruskannya ke pengontrol untuk diproses lebih lanjut.

Ini diimplementasikan menggunakan dua langkah di bawah ini

Langkah 1) Membuat JavaObjek skrip dengan menggunakan komponen nilai dan lampirkan ke modul AngularJS.JS utama Anda.

Komponen nilai mengambil dua parameter; satu adalah kuncinya, dan yang lainnya adalah nilai dari objek javascript yang dibuat.

Langkah 2) mengakses JavaObjek skrip dari Pengontrol Angular.JS

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

ARTIKEL TERKAIT

Dalam contoh kode di atas, langkah-langkah utama di bawah ini sedang dilakukan

  1. sampleApp.value("TutorialID", 5);

Fungsi nilai modul Angular.JS JS digunakan untuk membuat pasangan nilai kunci yang disebut "TutorialID" dan nilai "5".

  1. sampleApp.controller('AngularJSController', function ($scope,TutorialID)

Variabel TutorialID sekarang dapat diakses oleh pengontrol sebagai parameter fungsi.

  1.  $scope.ID =TutorialID;

Nilai TutorialID yaitu 5, sekarang ditugaskan ke variabel lain bernama ID di objek $scope. Hal ini dilakukan agar nilai 5 dapat diteruskan dari pengontrol ke tampilan.

  1. {{ID}}

Parameter ID ditampilkan dalam tampilan sebagai ekspresi. Jadi output '5' akan ditampilkan di halaman.

Ketika kode di atas dijalankan, outputnya akan terlihat seperti di bawah ini

Komponen nilai dalam Injeksi Ketergantungan

2) Layanan

Layanan didefinisikan sebagai singleton JavaObjek skrip yang terdiri dari serangkaian fungsi yang ingin Anda ekspos dan masukkan ke dalam pengontrol Anda.

Misalnya, “$http” adalah layanan di Angular.JS yang ketika disuntikkan ke pengontrol Anda menyediakan fungsi yang diperlukan

( get() , query() , simpan() , hapus(), hapus() ).

Fungsi-fungsi ini kemudian dapat dipanggil dari pengontrol Anda.

Mari kita lihat contoh sederhana bagaimana Anda dapat membuat layanan Anda sendiri. Kami akan membuat layanan penjumlahan sederhana yang menambahkan dua angka.

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

    mainApp.controller('DemoController', function($scope, AdditionService) {

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

Pada contoh di atas, langkah-langkah berikut dilakukan

  1.  mainApp.service('AdditionService', function()

Di sini kita membuat layanan baru bernama 'AdditionService' menggunakan parameter layanan modul AngularJS JS utama kita.

  1.  this.Addition = function(a,b)

Di sini kami membuat fungsi baru yang disebut Penambahan dalam layanan kami. Ini berarti bahwa ketika AngularJS membuat instance AdditionService di dalam pengontrol, kita akan dapat mengakses fungsi 'Addition'. Dalam definisi fungsi ini, kita mengatakan bahwa fungsi ini menerima dua parameter, a dan b.

  1.  return a+b;

Di sini kita mendefinisikan isi fungsi Penambahan yang hanya menambahkan parameter dan mengembalikan nilai tambah.

  1.  mainApp.controller('DemoController', function($scope, AdditionService)

Ini adalah langkah utama yang melibatkan injeksi ketergantungan. Dalam definisi pengontrol kami, kami sekarang mereferensikan layanan 'AdditionService' kami. Ketika AngularJS melihatnya, ia akan membuat instance objek bertipe 'AdditionService.'

  1.  $scope.result = AdditionService.Addition(5,6);

Kami sekarang mengakses fungsi 'Penambahan' yang didefinisikan dalam layanan kami dan menugaskannya ke objek $scope pengontrol.

Jadi ini adalah contoh sederhana bagaimana kita dapat mendefinisikan layanan kita dan memasukkan fungsionalitas layanan tersebut ke dalam pengontrol kita.

Kesimpulan

  • Dependency Injection sesuai dengan namanya adalah proses memasukkan fungsionalitas dependen ke dalam modul pada saat run time.
  • Menggunakan injeksi ketergantungan membantu mendapatkan kode yang lebih dapat digunakan kembali. Jika Anda memiliki fungsionalitas umum yang digunakan di beberapa modul aplikasi, cara terbaik adalah dengan mendefinisikan layanan pusat dengan fungsionalitas tersebut dan kemudian memasukkan layanan tersebut sebagai dependensi dalam modul aplikasi Anda.
  • Objek nilai AngularJS dapat digunakan untuk menyuntikkan sederhana JavaObjek skrip di pengontrol Anda menggunakan $inject di AngularJS.
  • Modul layanan dapat digunakan untuk menentukan layanan khusus Anda yang dapat digunakan kembali di beberapa modul AngularJS.

Anda mungkin ingin: