Rumah hujung hadapan web tutorial js Penjelasan terperinci mengenai mekanisme suntikan pergantungan dalam AngularJS_AngularJS

Penjelasan terperinci mengenai mekanisme suntikan pergantungan dalam AngularJS_AngularJS

May 16, 2016 pm 03:54 PM
angularjs suntikan pergantungan

Suntikan ketergantungan ialah corak reka bentuk perisian yang menggantikan pengekodan keras kebergantungan mereka dalam komponen dengan memberikannya dalam komponen. Ini melegakan satu komponen, daripada mencari kebergantungan, kepada konfigurasi kebergantungan. Ini membantu menjadikan komponen boleh digunakan semula, boleh diselenggara dan boleh diuji.

AngularJS menyediakan mekanisme suntikan pergantungan tertinggi. Ia menyediakan komponen teras berikut yang boleh menyuntik kebergantungan antara satu sama lain.

  • Nilai
  • Kilang
  • Perkhidmatan
  • Pembekal
  • Nilai malar

Nilai

Nilai ialah objek JavaScript mudah yang digunakan untuk menghantar nilai semasa pengawal fasa konfigurasi.

//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
   $scope.result = CalcService.square($scope.number);
  }
});

Salin selepas log masuk

Kilang

Kilang digunakan untuk mengembalikan nilai fungsi. Ia mencipta nilai atas permintaan, apabila perkhidmatan atau pengawal memerlukannya. Ia biasanya menggunakan fungsi kilang untuk mengira dan mengembalikan nilai yang sepadan

//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {   
  var factory = {}; 
  factory.multiply = function(a, b) {
   return a * b 
  }
  return factory;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
...

Salin selepas log masuk

Perkhidmatan

Perkhidmatan ialah objek JavaScript tunggal yang mengandungi satu set fungsi untuk melaksanakan tugas tertentu. Perkhidmatan ditakrifkan menggunakan fungsi service(), yang kemudiannya disuntik ke dalam pengawal.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
   $scope.result = CalcService.square($scope.number);
  }
});

Salin selepas log masuk

Pembekal

Perkhidmatan pembekal, kilang, dsb. yang digunakan semasa fasa konfigurasi proses penciptaan dalaman AngularJS (sepadan dengan apabila AngularJS bootstrap sendiri). Skrip yang dinyatakan di bawah boleh digunakan untuk mencipta MathService yang telah kami buat sebelum ini. Pembekal ialah kaedah kilang khas dan kaedah get() yang mengembalikan nilai/perkhidmatan/kilang.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
  $provide.provider('MathService', function() {
   this.$get = function() {
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b; 
     }
     return factory;
   };
  });
});

Salin selepas log masuk

Malar

Pemalar digunakan untuk mengambil kira fakta bahawa nilai tidak boleh diluluskan semasa fasa konfigurasi dengan mengkonfigurasinya, dan nilai tidak boleh diluluskan semasa fasa konfigurasi.

mainApp.constant("configParam", "constant value");

Salin selepas log masuk

Contoh

Contoh berikut akan menunjukkan semua arahan di atas.
testAngularJS.html

<html>
<head>
  <title>AngularJS Dependency Injection</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="CalcController">
   <p>Enter a number: <input type="number" ng-model="number" />
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script>
   var mainApp = angular.module("mainApp", []);
  
   mainApp.config(function($provide) {
     $provide.provider('MathService', function() {
      this.$get = function() {
        var factory = {}; 
        factory.multiply = function(a, b) {
         return a * b; 
        }
        return factory;
      };
     });
   });

   mainApp.value("defaultInput", 5);

   mainApp.factory('MathService', function() {   
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b; 
     }
     return factory;
   }); 

   mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
     }
   });

   mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);

      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
     }
   });
  </script>
</body>
</html>

Salin selepas log masuk

Keputusan

Buka textAngularJS.html dalam penyemak imbas web anda. Lihat hasilnya di bawah.

2015617111816048.jpg (560×240)

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan suntikan kebergantungan (Dependency Injection) dalam rangka kerja Phalcon Cara menggunakan suntikan kebergantungan (Dependency Injection) dalam rangka kerja Phalcon Jul 30, 2023 pm 09:03 PM

Pengenalan kepada kaedah menggunakan suntikan kebergantungan (DependencyInjection) dalam rangka kerja Phalcon: Dalam pembangunan perisian moden, suntikan kebergantungan (DependencyInjection) ialah corak reka bentuk biasa yang bertujuan untuk meningkatkan kebolehselenggaraan dan kebolehujian kod. Sebagai rangka kerja PHP yang pantas dan kos rendah, rangka kerja Phalcon juga menyokong penggunaan suntikan kebergantungan untuk mengurus dan mengatur kebergantungan aplikasi. Artikel ini akan memperkenalkan anda cara menggunakan rangka kerja Phalcon

Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular Panduan langkah demi langkah untuk memahami suntikan pergantungan dalam Angular Dec 02, 2022 pm 09:14 PM

Artikel ini akan membawa anda melalui suntikan pergantungan, memperkenalkan masalah yang diselesaikan oleh suntikan pergantungan dan kaedah penulisan asalnya, dan bercakap tentang rangka kerja suntikan pergantungan Angular saya harap ia akan membantu semua orang.

2022年最新5款的angularjs教程从入门到精通 2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Suntikan kebergantungan menggunakan rangka kerja ujian unit JUnit Suntikan kebergantungan menggunakan rangka kerja ujian unit JUnit Apr 19, 2024 am 08:42 AM

Untuk menguji suntikan kebergantungan menggunakan JUnit, ringkasannya adalah seperti berikut: Gunakan objek olok-olok untuk mencipta kebergantungan: Anotasi @Mock boleh mencipta objek olok-olok bagi kebergantungan. Tetapkan data ujian: Kaedah @Sebelum dijalankan sebelum setiap kaedah ujian dan digunakan untuk menetapkan data ujian. Konfigurasikan tingkah laku olok-olok: Kaedah Mockito.when() mengkonfigurasi gelagat yang dijangkakan bagi objek olok-olok. Sahkan keputusan: assertEquals() menegaskan untuk menyemak sama ada hasil sebenar sepadan dengan nilai yang dijangkakan. Aplikasi praktikal: Anda boleh menggunakan rangka kerja suntikan kebergantungan (seperti Rangka Kerja Spring) untuk menyuntik kebergantungan, dan mengesahkan ketepatan suntikan dan operasi biasa kod melalui ujian unit JUnit.

Corak suntikan kebergantungan dalam lulus parameter fungsi Golang Corak suntikan kebergantungan dalam lulus parameter fungsi Golang Apr 14, 2024 am 10:15 AM

Dalam Go, mod suntikan kebergantungan (DI) dilaksanakan melalui hantaran parameter fungsi, termasuk hantaran nilai dan hantaran penunjuk. Dalam corak DI, kebergantungan biasanya diluluskan sebagai petunjuk untuk meningkatkan penyahgandingan, mengurangkan pertikaian kunci dan menyokong kebolehujian. Dengan menggunakan penunjuk, fungsi itu dipisahkan daripada pelaksanaan konkrit kerana ia hanya bergantung pada jenis antara muka. Hantaran penunjuk juga mengurangkan overhed menghantar objek besar, dengan itu mengurangkan pertengkaran kunci. Tambahan pula, corak DI memudahkan untuk menulis ujian unit untuk fungsi menggunakan corak DI kerana kebergantungan boleh dipermainkan dengan mudah.

Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Jun 27, 2023 pm 07:37 PM

Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan

Suntikan ketergantungan dan bekas perkhidmatan untuk fungsi PHP Suntikan ketergantungan dan bekas perkhidmatan untuk fungsi PHP Apr 27, 2024 pm 01:39 PM

Jawapan: Suntikan ketergantungan dan bekas perkhidmatan dalam PHP membantu mengurus kebergantungan secara fleksibel dan meningkatkan kebolehujian kod. Suntikan kebergantungan: Lulus kebergantungan melalui bekas untuk mengelakkan penciptaan langsung dalam fungsi, meningkatkan fleksibiliti. Bekas perkhidmatan: menyimpan contoh pergantungan untuk akses mudah dalam program, meningkatkan lagi gandingan longgar. Kes praktikal: Aplikasi sampel menunjukkan aplikasi praktikal bekas suntikan kebergantungan dan perkhidmatan, menyuntik kebergantungan ke dalam pengawal, mencerminkan kelebihan gandingan longgar.

Bagaimana untuk menggunakan suntikan pergantungan untuk ujian unit di Golang? Bagaimana untuk menggunakan suntikan pergantungan untuk ujian unit di Golang? Jun 02, 2024 pm 08:41 PM

Menggunakan suntikan pergantungan (DI) dalam ujian unit Golang boleh mengasingkan kod yang akan diuji, memudahkan persediaan ujian dan penyelenggaraan. Perpustakaan DI yang popular termasuk wayar dan go-inject, yang boleh menjana stub pergantungan atau ejekan untuk ujian. Langkah-langkah ujian DI termasuk menetapkan kebergantungan, menyediakan kes ujian dan menegaskan keputusan. Contoh penggunaan DI untuk menguji fungsi pengendalian permintaan HTTP menunjukkan betapa mudahnya untuk mengasingkan dan menguji kod tanpa kebergantungan atau komunikasi sebenar.

See all articles