angularJS依赖注入（一）

本文主要是介绍angularJS依赖注入（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

依赖注入（Dependency Injection）是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分，从定位的依赖，依赖配置。这有助于使组件可重用，维护和测试。

Provider服务（$provide）

值（value）
工厂（factory）
服务（service）
提供者（provider）
常值（constant）

value

值是简单的JavaScript对象，它是用来将值传递过程中的配置相位控制器。（配置阶段）
这货可以是string,number甚至function,它和constant的不同之处在于，它可以被修改，不能被注入到config中，但是它可以被decorator装饰

var app = angular.module('app', []);app.config(function ($provide) {$provide.value('movieTitle', 'The Matrix')
});app.controller('ctrl', function (movieTitle) {expect(movieTitle).toEqual('The Matrix');
})

语法糖：

app.value('movieTitle', 'The Matrix');

// 定义一个模块
var mainApp = angular.module("mainApp", []);// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {$scope.number = defaultInput;$scope.result = CalcService.square($scope.number);$scope.square = function() {$scope.result = CalcService.square($scope.number);}
});

factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。

它是一个可注入的function，它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，所以factory可以返回任何东西，而service可以不返回(可查阅new关键字的作用)

var app = angular.module('app', []);app.config(function ($provide) {$provide.factory('movie', function () {return {title: 'The Matrix';}});
});app.controller('ctrl', function (movie) {expect(movie.title).toEqual('The Matrix');
});

语法糖：

app.factory('movie', function () {return {title: 'The Matrix';}
});

factory可以返回任何东西，它实际上是一个只有$get方法的provider

// 定义一个模块
var mainApp = angular.module("mainApp", []);// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {var factory = {};factory.multiply = function(a, b) {return a * b}return factory;
}); // 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){this.square = function(a) {return MathService.multiply(a,a);}
});

service

服务是一个单一的JavaScript包含了一组函数对象来执行某些任务。服务使用service()函数，然后注入到控制器的定义。

它是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通信或者共享数据都很合适

var app = angular.module('app' ,[]);app.config(function ($provide) {$provide.service('movie', function () {this.title = 'The Matrix';});
});app.controller('ctrl', function (movie) {expect(movie.title).toEqual('The Matrix');
});

语法糖：

app.service('movie', function () {this.title = 'The Matrix';
});

在service里面可以不用返回东西，因为AngularJS会调用new关键字来创建对象。但是返回一个自定义对象好像也不会出错。

//define a module
var 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 the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {$scope.number = defaultInput;$scope.result = CalcService.square($scope.number);$scope.square = function() {$scope.result = CalcService.square($scope.number);}
});

provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
provider是他们的老大，上面的几乎(除了constant)都是provider的封装，provider必须有一个$get方法，当然也可以说provider是一个可配置的factory

var app = angular.module('app', []);app.provider('movie', function () {var version;return {setVersion: function (value) {version = value;},$get: function () {return {title: 'The Matrix' + ' ' + version}}}
});app.config(function (movieProvider) {movieProvider.setVersion('Reloaded');
});app.controller('ctrl', function (movie) {expect(movie.title).toEqual('The Matrix Reloaded');
});

注意这里config方法注入的是movieProvider，上面定义了一个供应商叫movie，但是注入到config中不能直接写movie，因为前文讲了注入的那个东西就是服务，是供应商提供出来的，而config中又只能注入供应商（两个例外是$provide和$injector），所以用驼峰命名法写成movieProvider，Angular就会帮你注入它的供应商。（更详细可参考文末官方wiki翻译版中的配置provider）

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {$provide.provider('MathService', function() {this.$get = function() {var factory = {};  factory.multiply = function(a, b) {return a * b; }return factory;};});
});

// 定义一个模块var mainApp = angular.module("mainApp", []);mainApp.provider('MathService',function(){this.$get = function(){
var factory = {};factory.multiply = function(a, b) {return a * b; }return factory;
}});

constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
定义常量用的，这货定义的值当然就不能被改变，它可以被注入到任何地方，但是不能被装饰器(decorator)装饰

语法糖：

mainApp.constant("configParam", "constant value");

ar app = angular.module('app', []);app.config(function ($provide) {$provide.constant('movieTitle', 'The Matrix');
});app.controller('ctrl', function (movieTitle) {expect(movieTitle).toEqual('The Matrix');
});

实例

<html>
<head><title>AngularJS Dependency Injection</title>
</head>
<body><h2>AngularJS Sample Application</h2><div ng-app="mainApp" ng-controller="CalcController"><p>Enter a number: <input type="number" ng-model="number" /><button ng-click="square()">X<sup>2</sup></button><p>Result: {{result}}</p></div><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script><script>var mainApp = angular.module("mainApp", []);mainApp.config(function($provide) {$provide.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 = CalcService.square($scope.number);$scope.square = function() {$scope.result = CalcService.square($scope.number);}});</script>
</body>
</html>

总结

所有的供应商都只被实例化一次，也就说他们都是单例的
除了constant，所有的供应商都可以被装饰器(decorator)装饰
value就是一个简单的可注入的值
service是一个可注入的构造器
factory是一个可注入的方法
decorator可以修改或封装其他的供应商，当然除了constant
provider是一个可配置的factory