Injeksi ketergantungan adalah pola desain perangkat lunak yang diberikan dalam komponen yang menggantikan pengkodean ketergantungan mereka dalam komponen keras. Ini mengurangi komponen dari posisi dependensi, konfigurasi ketergantungan. Ini membantu membuat komponen dapat digunakan kembali, dipelihara, dan diuji.
AngularJS memberikan mekanisme injeksi ketergantungan tertinggi. Ini memberikan komponen inti yang dapat disuntikkan yang saling tergantung.
nilai
pabrik
Melayani
Penyedia
Selalu
nilai
Nilai adalah objek JavaScript sederhana yang digunakan untuk melewati nilai selama pengontrol fase konfigurasi.
//define a modulevar 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;pabrik
Pabrik digunakan untuk mengembalikan nilai fungsi. Ini menciptakan nilai sesuai dengan permintaan, setiap kali layanan atau pengontrol membutuhkannya. Biasanya menggunakan fungsi pabrik untuk menghitung dan mengembalikan nilai yang sesuai
//define a modulevar mainApp = angular.module("mainApp", []);//create a factory "MathService" which provides a method multiply to return multiplication of two numbersmainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory;}); // menyuntikkan pabrik "MathService" dalam layanan untuk memanfaatkan metode multipel dari factory.mainapp.service ('calcService', function (mathservice) {this.square = function (a) {return mathservice.multiply (a);}}); ...Melayani
Layanan adalah JavaScript tunggal yang berisi satu set objek fungsi untuk melakukan tugas -tugas tertentu. Layanan menggunakan fungsi layanan () dan menyuntikkan ke dalam definisi pengontrol.
//define a modulevar 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 controllermainapp.controller ('calccontroller', function ($ scope, calcservice, defaultInput) {$ scope.number = defaultInput; $ scope.result = calcService.square ($ scope.number); $ scope.square = function () {$ scope.resull); $ scope.square = function () {$ scope. }});Penyedia
Penyedia menggunakan layanan, pabrik, dll. Selama fase konfigurasi proses pembuatan internal AngularJS (seperti selama boot AngularJS itu sendiri). Script yang disebutkan di bawah ini dapat digunakan untuk membuat, kami telah membuat MathService terlebih dahulu. Penyedia adalah metode khusus pabrik dan get () untuk mengembalikan nilai/layanan/pabrik.
// Tentukan Modulevar MainApp = Angular.Module ("MainApp", []); ... // Buat Layanan Menggunakan Penyedia yang mendefinisikan Metode Square untuk mengembalikan kuadrat dari number.mainapp.config (fungsi ($ tersedia) {$ advover. {return a * b;konstan
Konstanta digunakan untuk mempertimbangkan fakta dengan mengonfigurasi nilai fase, nilai tidak dapat dilewati selama fase konfigurasi.
mainapp.constant ("configParam", "Constant Value");
contoh
Contoh -contoh berikut akan menunjukkan semua instruksi di atas.
testangularjs.html
<html> <head> <title> AngularJS Injeksi ketergantungan </itement> </head> <hody> <h2> aplikasi sampel AngularJS </h2> <v ng-app = "MainApp" ng-controller = "calccontroller"> <p> Masukkan angka: <input type = "angka" numbel = " ng-click = "square ()"> x <sup> 2 </sup> </button> <p> Hasil: {{hasil}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.min.min.min angular.module ("MainApp", []); MainApp.config (function ($ invice) {$ serligent.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 = calcsservice.square ($ scope.number); $ scope.square = function () {$ scope.result = calcopserve.number. </script> </body> </html>hasil
Buka TextAngularJs.html di browser web. Hasilnya adalah sebagai berikut.
Di atas adalah kumpulan informasi untuk injeksi ketergantungan AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!