Ketergantungan Suntikan di AngularJS dengan Contoh

Isi kandungan:

Anonim

Apakah Suntikan Ketergantungan di AngularJS?

Dependency Injection adalah corak reka bentuk perisian yang menerapkan inversi kawalan untuk menyelesaikan kebergantungan.

Inversion of Control : Ini bermaksud bahawa objek tidak membuat objek lain di mana mereka bergantung untuk melakukan kerja mereka. Sebaliknya, mereka mendapatkan objek-objek ini dari sumber luar. Ini membentuk asas suntikan kebergantungan di mana jika satu objek bergantung pada yang lain; objek utama tidak mengambil tanggungjawab membuat objek bergantung dan kemudian menggunakan kaedahnya. Sebaliknya, sumber luaran (yang dalam AngularJS, adalah kerangka AngularJS itu sendiri) membuat objek bergantung dan memberikannya ke objek sumber untuk penggunaan selanjutnya.

Oleh itu, mari kita fahami apa itu pergantungan.

Gambar rajah di atas menunjukkan contoh ringkas ritual sehari-hari dalam pengaturcaraan pangkalan data.

  • Kotak 'Model' menggambarkan "Model model" yang biasanya dibuat untuk berinteraksi dengan pangkalan data. Jadi sekarang pangkalan data adalah pergantungan untuk "Model model" berfungsi.
  • Dengan suntikan kebergantungan, kami membuat perkhidmatan untuk mengambil semua maklumat dari pangkalan data dan masuk ke kelas model.

Selebihnya dari tutorial ini, kita akan melihat lebih lanjut mengenai suntikan kebergantungan dan bagaimana ini dapat dicapai di AngularJS.

Dalam tutorial ini, anda akan belajar-

  • Komponen mana yang boleh disuntik sebagai Ketergantungan Dalam AngularJS
  • Contoh Suntikan Ketergantungan
    • Komponen nilai
    • Perkhidmatan

Komponen mana yang boleh disuntik sebagai Ketergantungan Dalam AngularJS

Di Angular.JS, kebergantungan disuntik dengan menggunakan "kaedah kilang suntikan" atau "fungsi konstruktor".

Komponen ini dapat disuntik dengan komponen "service" dan "value" sebagai dependensi. Kami telah melihat ini dalam topik sebelumnya dengan perkhidmatan $ http.

Kami telah melihat bahawa perkhidmatan $ http dapat digunakan dalam AngularJS untuk mendapatkan data dari pangkalan data MySQL atau MS SQL Server melalui aplikasi web PHP.

Perkhidmatan $ http biasanya ditakrifkan dari dalam pengawal dengan cara berikut.

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

Sekarang apabila perkhidmatan $ http ditentukan dalam pengawal seperti yang ditunjukkan di atas. Ini bermaksud bahawa pengawal kini mempunyai kebergantungan pada perkhidmatan $ http.

Oleh itu, apabila kod di atas dilaksanakan, AngularJS akan melakukan langkah-langkah berikut;

  1. Periksa untuk melihat apakah "$ http perkhidmatan" telah dibuat. Oleh kerana "pengawal" kami sekarang bergantung pada "$ http perkhidmatan", objek perkhidmatan ini perlu disediakan untuk pengawal kami.
  2. Sekiranya AngularJS mengetahui bahawa perkhidmatan $ http tidak dibuat, AngularJS menggunakan fungsi 'kilang' untuk membina objek $ http.
  3. Penyuntik dalam Angular.JS kemudian memberikan contoh perkhidmatan $ http kepada pengawal kami untuk proses selanjutnya.

Sekarang bahawa kebergantungan disuntikkan ke dalam pengawal kami, kami sekarang dapat menggunakan fungsi yang diperlukan dalam perkhidmatan $ http untuk pemprosesan selanjutnya.

Contoh Suntikan Ketergantungan

Suntikan ketergantungan dapat dilaksanakan dengan 2 cara

  1. Salah satunya adalah melalui "Nilai Komponen"
  2. Yang lain adalah melalui "Perkhidmatan"

Mari lihat pelaksanaan kedua-dua cara dengan lebih terperinci.

1) Komponen nilai

Konsep ini didasarkan pada fakta membuat objek JavaScript sederhana dan menyebarkannya ke pengawal untuk proses selanjutnya.

Ini dilaksanakan menggunakan dua langkah di bawah

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

Komponen nilai mengambil dua parameter; satu adalah kunci, dan yang lain adalah nilai objek javascript yang dibuat.

Langkah 2) Akses objek JavaScript dari pengawal Angular.JS

Event Registration


Guru99 Global Event

{{ID}}

Dalam contoh kod di atas, langkah-langkah utama di bawah 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)

Pemboleh ubah TutorialID kini dapat diakses oleh pengawal sebagai parameter fungsi.

  1.  $scope.ID =TutorialID;

Nilai TutorialID yang 5, kini ditugaskan ke pemboleh ubah lain yang disebut ID dalam objek $ lingkup. Ini dilakukan supaya nilai 5 dapat diteruskan dari pengawal ke pandangan.

  1. {{ID}}

Parameter ID sedang ditampilkan dalam pandangan sebagai ungkapan. Jadi output '5' akan dipaparkan di halaman.

Apabila kod di atas dijalankan, output akan ditunjukkan seperti di bawah

2) Perkhidmatan

Perkhidmatan didefinisikan sebagai objek JavaScript tunggal yang terdiri daripada sekumpulan fungsi yang ingin anda dedahkan dan disuntikkan dalam alat kawalan anda.

Sebagai contoh, "$ http" adalah perkhidmatan di Angular.JS yang apabila disuntikkan dalam alat kawalan anda menyediakan fungsi yang diperlukan untuk

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

Fungsi-fungsi ini kemudiannya dapat dipanggil dari pengawal anda dengan sewajarnya.

Mari lihat contoh ringkas bagaimana anda boleh membuat perkhidmatan anda sendiri. Kami akan membuat perkhidmatan penambahan ringkas yang menambah dua nombor.

Event Registration

Guru99 Global Event




Result: {{result}}

Dalam contoh di atas, langkah-langkah berikut dijalankan

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

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

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

Di sini kami membuat fungsi baru yang disebut Addition dalam perkhidmatan kami. Ini bermaksud bahawa apabila AngularJS memberi contoh pada AdditionService kita di dalam pengawal kita, kita akan dapat mengakses fungsi 'Addition'. Dalam definisi fungsi ini, kita mengatakan bahawa fungsi ini menerima dua parameter, a dan b.

  1.  return a+b;

Di sini kita menentukan bahagian fungsi Penambahan kita yang hanya menambahkan parameter dan mengembalikan nilai tambah.

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

Ini adalah langkah utama yang melibatkan suntikan kebergantungan. Dalam definisi pengawal kami, kami sekarang merujuk perkhidmatan 'AdditionService' kami. Apabila AngularJS melihat ini, ia akan menunjukkan objek jenis 'AdditionService.'

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

Kami sekarang mengakses fungsi 'Addition' yang ditentukan dalam perkhidmatan kami dan memberikannya ke objek $ lingkup pengawal.

Jadi ini adalah contoh mudah bagaimana kita dapat menentukan perkhidmatan kita dan menyuntikkan fungsi perkhidmatan tersebut di dalam pengawal kita.

Ringkasan:

  • Dependency Injection seperti namanya adalah proses menyuntik fungsi yang bergantung ke dalam modul pada waktu berjalan.
  • Menggunakan suntikan kebergantungan membantu mempunyai kod yang lebih boleh digunakan semula. Sekiranya anda mempunyai fungsi umum yang digunakan di pelbagai modul aplikasi, cara terbaik adalah menentukan perkhidmatan pusat dengan fungsi tersebut dan kemudian menyuntikkan perkhidmatan tersebut sebagai ketergantungan dalam modul aplikasi anda.
  • Objek nilai AngularJS dapat digunakan untuk menyuntikkan objek JavaScript sederhana di pengawal anda.
  • Modul perkhidmatan boleh digunakan untuk menentukan perkhidmatan khusus anda yang dapat digunakan kembali di beberapa modul AngularJS.