Komponen Injeksi Dependensi AngularJS

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.

⚠️ Catatan versi: Dukungan AngularJS berakhir pada Januari 2022., tanpa tambalan keamanan. Angular modern melakukan injeksi melalui penyedia @Injectable dan menyuntikkan()Kode di bawah ini hanya akan menjadi catatan sejarah.

Jadi mari kita pahami dulu apa itu ketergantungan.

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.

Pada bagian selanjutnya dari tutorial ini, kita akan membahas lebih lanjut tentang dependency injection dan bagaimana hal ini dilakukan. AngularJS.

Komponen mana yang dapat diinjeksikan sebagai dependensi di AngularJS?

Dalam AngularJS, dependensi diinjeksikan dengan menggunakan "metode pabrik yang dapat diinjeksikan" 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.

AngularJS modul mendaftarkan objek yang dapat disuntikkan melalui lima resep.

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. Injector dalam AngularJS kemudian menyediakan instance layanan $http ke controller kita untuk diproses lebih lanjut.

Formulir anotasi: Anotasi implisit membaca nama parameter, jadi minifikasi merusaknya. Notasi array inline dan $inject keduanya tetap berfungsi; ng-strict-di pada ng-app menolak anotasi implisit.

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 pembuatan sesuatu yang sederhana. JavaNaskah objek tersebut dan meneruskannya ke controller untuk diproses lebih lanjut.

Ini diimplementasikan menggunakan dua langkah di bawah ini

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

Komponen nilai tersebut menerima dua parameter; satu adalah kunci, dan yang lainnya adalah nilai dari JavaObjek skrip yang dibuat.

Langkah 2) mengakses JavaObjek skrip dari Pengontrol AngularJS

<! 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>

Kode di atas menjalankan langkah-langkah berikut:

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

   Fungsi `value` dari modul AngularJS digunakan untuk membuat pasangan kunci-nilai yang disebut “TutorialID” dan nilainya adalah “5”.

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

   Variabel TutorialID sekarang dapat diakses oleh pengontrol sebagai parameter fungsi.

3.  $scope.ID =TutorialID;

   Nilai TutorialID, yaitu 5, sekarang diberikan ke variabel lain yang disebut ID di dalam $scope Objek. Hal ini dilakukan agar nilai 5 dapat diteruskan dari controller ke view.

4. {{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

2) Layanan

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

Sebagai contoh, “$http” adalah sebuah layanan di AngularJS yang ketika diinjeksikan ke dalam controller Anda akan menyediakan fungsi-fungsi yang diperlukan, yaitu:

( 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 dari modul AngularJS utama kita.

2.  this.ADDITION = function(a,b)

   Di sini kita membuat fungsi baru bernama ADDITION di dalam layanan kita. Ini berarti bahwa ketika AngularJS menginstansiasi AdditionService di dalam controller kita, kita kemudian dapat mengakses fungsi 'ADDITION'. Dalam definisi fungsi ini, kita mengatakan bahwa fungsi ini menerima dua parameter, a dan b.

3.  return a+b;

   Di sini kita mendefinisikan isi dari fungsi ADDITION kita yang hanya menambahkan parameter dan mengembalikan nilai yang ditambahkan.

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

   Ini adalah langkah utama yang melibatkan injeksi dependensi. Dalam definisi controller kita, kita sekarang merujuk pada layanan 'AdditionService'. Ketika AngularJS melihat ini, ia akan membuat instance objek bertipe 'AdditionService'.

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

   Sekarang kita mengakses fungsi 'ADDITION' yang didefinisikan dalam layanan kita dan menetapkannya ke objek $scope dari controller.

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

Pertanyaan Umum Demo Slot