angularJS依賴注入的個人理解
阿新 • • 發佈：2020-11-13
依賴注入：一句話 --- 沒事你不要來找我，有事我會去找你。
AngularJS 5個核心元件用來作為依賴注入：
- value
- factory
- service
- provider
- constant
value：想來就是一個map定義了當前物件的變數，使用時將key放在function（key）引數列表中
constant：一個全域性變數
mainApp.constant("configParam", "constant value");
service：像是一個普通函式，亦或者中間商，負責函式的呼叫
controller函式在呼叫時在引數位置新增先前定義的service函式，
service函式也可以通過相同的方法呼叫factory函式內定義的方法。
在java普通spring專案中，controller呼叫service，service呼叫業務程式碼，想來也差不多。
controller('CalcController', function($scope, CalcService, defaultInput) {
1 <html> 2 3 <head> 4 <meta charset="utf-8"> 5 <title>AngularJS 依賴注入</title> 6 </head> 7 8 <body> 9 <h2>AngularJS 簡單應用</h2> 10 11 <div ng-app = "mainApp" ng-controller = "CalcController"> 12 <p>輸入一個數字: <input type = "number" ng-model = "number" /></p> 13 <button ng-click= "square()">X<sup>2</sup></button> 14 <p>結果: {{result}}</p> 15 </div> 16 17 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 18 19 <script> 20 var mainApp = angular.module("mainApp", []); 21 mainApp.value("defaultInput", 5); 22 23 mainApp.factory('MathService', function() { 24 var factory = {}; 25 26 factory.multiply = function(a, b) { 27 return a * b; 28 } 29 return factory; 30 }); 31 32 mainApp.service('CalcService', function(MathService){ 33 this.square = function(a) { 34 return MathService.multiply(a,a); 35 } 36 }); 37 38 mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { 39 $scope.number = defaultInput; 40 $scope.result = CalcService.square($scope.number); 41 42 $scope.square = function() { 43 $scope.result = CalcService.square($scope.number); 44 } 45 }); 46 47 </script> 48 49 </body> 50 </html>
provider：感覺著與factory差不多，至少步驟差不多，按照剛才說的java的邏輯，也許只是業務程式碼的實現變了樣子。
1 //provider 實現 一小部分 2 3 var mainApp = angular.module("mainApp", []); 4 5 mainApp.config(function($provide) { 6 $provide.provider('MathService', function() { 7 this.$get = function() { 8 var factory = {}; 9 10 factory.multiply = function(a, b) { 11 return a * b; 12 } 13 return factory; 14 }; 15 }); 16 }); 17 18 //factory實現 一小部分 19 20 var mainApp = angular.module("mainApp", []); 21 22 mainApp.factory('MathService', function() { 23 var factory = {}; 24 25 factory.multiply = function(a, b) { 26 return a * b; 27 } 28 return factory; 29 });
1 //provider 完整程式碼 2 3 <html> 4 5 <head> 6 <meta charset="utf-8"> 7 <title>AngularJS 依賴注入</title> 8 </head> 9 10 <body> 11 <h2>AngularJS 簡單應用</h2> 12 13 <div ng-app = "mainApp" ng-controller = "CalcController"> 14 <p>輸入一個數字: <input type = "number" ng-model = "number" /></p> 15 <button ng-click = "square()">X<sup>2</sup></button> 16 <p>結果: {{result}}</p> 17 </div> 18 19 <script src="//cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 20 21 <script> 22 var mainApp = angular.module("mainApp", []); 23 24 mainApp.config(function($provide) { 25 $provide.provider('MathService', function() { 26 this.$get = function() { 27 var factory = {}; 28 29 factory.multiply = function(a, b) { 30 return a * b; 31 } 32 return factory; 33 }; 34 }); 35 }); 36 37 mainApp.value("defaultInput", 5); 38 39 mainApp.service('CalcService', function(MathService){ 40 this.square = function(a) { 41 return MathService.multiply(a,a); 42 } 43 }); 44 45 mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { 46 $scope.number = defaultInput; 47 $scope.result = CalcService.square($scope.number); 48 49 $scope.square = function() { 50 $scope.result = CalcService.square($scope.number); 51 } 52 }); 53 54 </script> 55 56 </body> 57 </html>
2020-11-13 15:46:10