依赖注入：一句话 --- 没事你不要来找我，有事我会去找你。
AngularJS 5个核心组件用来作为依赖注入：
value
factory
service
provider
constant
value：想来就是一个map定义了当前对象的变量，使用时将key放在function（key）参数列表中
constant：一个全局变量
mainApp.constant("configParam", "constant value");
service：像是一个普通函数，亦或者中间商，负责函数的调用
factory：
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