Injeksi Ketergantungan di AngularJS dengan Contoh

Daftar Isi:

Anonim

Apa itu Injeksi Ketergantungan di AngularJS?

Dependency Injection adalah pola desain perangkat lunak yang mengimplementasikan inversi kontrol untuk menyelesaikan dependensi.

Inversion of Control : Ini berarti bahwa objek tidak membuat objek lain yang mereka andalkan untuk melakukan pekerjaannya. Sebaliknya, mereka mendapatkan benda-benda ini dari sumber luar. Ini membentuk dasar injeksi ketergantungan dimana jika satu objek bergantung pada yang lain; objek utama tidak mengambil tanggung jawab untuk membuat objek dependen dan kemudian menggunakan metodenya. Sebaliknya, sumber eksternal (yang di AngularJS, adalah kerangka kerja AngularJS itu sendiri) membuat objek dependen dan memberikannya ke objek sumber untuk penggunaan lebih lanjut.

Jadi pertama-tama mari kita pahami apa itu ketergantungan.

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

  • Kotak 'Model' menggambarkan "kelas Model" yang biasanya dibuat untuk berinteraksi dengan database. Jadi sekarang database adalah dependensi untuk "kelas Model" 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 banyak tentang injeksi ketergantungan dan bagaimana ini dilakukan di AngularJS.

Dalam tutorial ini, Anda akan belajar-

  • Komponen mana yang dapat diinjeksikan sebagai ketergantungan di AngularJS
  • Contoh Injeksi Ketergantungan
    • Komponen nilai
    • Layanan

Komponen mana yang dapat diinjeksikan sebagai ketergantungan di AngularJS

Di Angular.JS, dependensi dimasukkan dengan menggunakan "metode pabrik injeksi" atau "fungsi konstruktor".

Komponen ini dapat dimasukkan dengan komponen "layanan" dan "nilai" sebagai dependensi. Kami telah melihat ini di topik sebelumnya dengan layanan $ http.

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

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

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

Sekarang ketika layanan $ http didefinisikan di controller seperti yang ditunjukkan di atas. Ini berarti bahwa pengontrol sekarang memiliki ketergantungan pada layanan $ http.

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

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

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

Contoh Injeksi Ketergantungan

Injeksi ketergantungan dapat diimplementasikan dengan 2 cara

  1. Salah satunya adalah melalui "Komponen Nilai"
  2. Lainnya adalah melalui "Layanan"

Mari kita lihat penerapan kedua cara tersebut secara lebih detail.

1) Komponen nilai

Konsep ini didasarkan pada fakta pembuatan objek JavaScript sederhana dan meneruskannya ke pengontrol untuk diproses lebih lanjut.

Ini diimplementasikan menggunakan dua langkah di bawah ini

Langkah 1) Buat objek JavaScript dengan menggunakan komponen nilai dan lampirkan ke modul AngularJS.JS utama Anda.

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

Langkah 2) Akses objek JavaScript dari pengontrol Angular.JS

Event Registration

Guru99 Global Event

5

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

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

Fungsi nilai modul JS Angular.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 controller sebagai parameter fungsi.

  1.  $scope.ID =TutorialID;

Nilai TutorialID yang adalah 5, sekarang sedang ditugaskan ke variabel lain yang disebut ID di objek $ scope. Ini dilakukan agar nilai 5 dapat diteruskan dari pengontrol ke tampilan.

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

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

2) Layanan

Layanan didefinisikan sebagai objek JavaScript tunggal yang terdiri dari sekumpulan fungsi yang ingin Anda tunjukkan dan masukkan ke pengontrol Anda.

Misalnya, "$ http" adalah layanan di Angular.JS yang bila dimasukkan ke dalam pengontrol Anda menyediakan fungsi yang diperlukan untuk

(get (), query (), save (), remove (), delete ()).

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.

Event Registration

Guru99 Global Event

Result: {{result}}

Dalam contoh di atas, langkah-langkah berikut dilakukan

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

Di sini kami membuat layanan baru yang disebut 'AdditionService' menggunakan parameter layanan modul JS AngularJS utama kami.

  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 kami di dalam pengontrol kami, kami kemudian 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 kami mendefinisikan tubuh fungsi Addition kami 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 melihat ini, itu akan membuat instance objek berjenis 'AdditionService.'

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

Kami sekarang mengakses fungsi 'Addition' yang didefinisikan dalam layanan kami dan menugaskannya ke objek $ scope dari controller.

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

Ringkasan:

  • Dependency Injection seperti namanya adalah proses memasukkan fungsionalitas dependen ke dalam modul pada saat dijalankan.
  • Menggunakan injeksi ketergantungan membantu memiliki 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 itu sebagai dependensi dalam modul aplikasi Anda.
  • Objek nilai AngularJS dapat digunakan untuk memasukkan objek JavaScript sederhana ke pengontrol Anda.
  • Modul layanan dapat digunakan untuk menentukan layanan kustom Anda yang dapat digunakan kembali di beberapa modul AngularJS.