Injeksi ketergantungan AngularJS
Apa itu Injeksi Ketergantungan
Penjelasan pada wiki adalah: Injeksi Ketergantungan (DI) adalah pola desain perangkat lunak di mana satu atau lebih dependensi (atau layanan) disuntikkan (atau diteruskan dengan referensi) ke objek terpisah (atau klien) dan kemudian menjadi bagian dari keadaan klien.
Pola ini memisahkan penciptaan perilaku ketergantungan klien, yang membuat pemrograman digabungkan secara longgar dan mengikuti prinsip -prinsip pembalikan ketergantungan dan tanggung jawab tunggal. Berbeda langsung dengan pola locator layanan, ini memungkinkan klien untuk memahami bagaimana klien menggunakan sistem untuk menemukan dependensi
Singkatnya-jika Anda tidak ada hubungannya, jangan datang kepada saya, saya akan pergi kepada Anda jika Anda memiliki sesuatu untuk dilakukan.
AngularJS memberikan mekanisme injeksi ketergantungan yang baik. 5 komponen inti berikut digunakan sebagai injeksi ketergantungan:
nilai
pabrik
melayani
Penyedia
konstan
nilai
Nilai adalah objek JavaScript sederhana yang meneruskan nilai ke pengontrol (fase konfigurasi):
var mainapp = angular.module ("Mainapp", []); // Buat objek nilai "defaultInput" dan lewati data Mainapp.Value ("DefaultInput", 5); ... // menyuntikkan "defaultInput" ke controller Mainapp.controller ('Calccontroller', fungsi ($ scope, calcsservault (calccontroller '($ scope, $ scopeul (calcsservice (calccontroller' function ($ scope, calcsservault (calcopput (calccontroller 'function ($ scope, $ calcsservice (Calccontroller' function ($ scope, calcsserservice. $ scope.Result = calcService.square ($ scope.number);pabrik
Pabrik adalah fungsi yang mengembalikan nilai. Dibuat saat layanan dan pengontrol membutuhkan.
Biasanya kami menggunakan fungsi pabrik untuk menghitung atau mengembalikan nilai.
// Tentukan modul var mainapp = angular.module ("MainApp", []); // Buat pabrik "MathService" yang digunakan untuk melipatgandakan produk dari dua numberMainApp.factory ('MathService', function () {var factory = {}; factory.multiply = function (a, b) {return factory = {}; factory.multiply = function (a, b) {return factory = {}; factory.multiply = function (a, b) {return factory = {}; factory.multiply = function (a, b) {return factory = {}; factory.multiply = function (a, b) {return return // Suntikkan pabrik "MathService" di layanan Mainapp.service ('calcService', function (mathservice) {this.square = function (a) {return mathservice.multiply (a, a);}}); ...Penyedia
Di AngularJS, layanan, pabrik, dll. Dibuat melalui penyedia (tahap konfigurasi).
Metode pabrik GET () disediakan di penyedia, yang digunakan untuk mengembalikan nilai/layanan/pabrik.
// Define a module var mainApp = angular.module("mainApp", []);...// Create service using provider Define a method to calculate the product of two numbers mainApp.config(function($provide) { $provide.provider('MathService', function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b;konstan
Konstanta (konstan) digunakan untuk melewati nilai numerik selama fase konfigurasi. Perhatikan bahwa konstanta ini tidak tersedia selama fase konfigurasi.
mainapp.constant ("configParam", "Constant Value");
Contoh
Contoh -contoh berikut memberikan demonstrasi beberapa mekanisme injeksi ketergantungan di atas.
<html> <head> <meta charset="utf-8"> <title>AngularJS Dependency Injection</title> </head> <body> <h2>AngularJS Simple Application</h2> <div ng-app = "mainApp" ng-controller = "CalcController"> <p>Enter a number: <input type = "number" ng-model = "number" /></p> <button ng-click = "square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var mainApp = 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 Menjalankan:
Di atas adalah penyortiran data untuk menyuntikkan dependensi AngularJS. Kami akan terus menambahkannya nanti. Saya berharap ini dapat membantu teman -teman yang mengembangkan AngularJS.