依赖注入：一句话 --- 没事你不要来找我，有事我会去找你。
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
做一个像马老师一样温文尔雅的人；
