angular js 依赖注入的5大核心组件的理解和使用。

最新推荐文章于 2023-11-27 13:42:29 发布

学无止境之问道

最新推荐文章于 2023-11-27 13:42:29 发布

阅读量2.2k

点赞数

分类专栏：前端 angular js 文章标签：依赖注入 angularjs

本文链接：https://blog.csdn.net/h_qingxue/article/details/55253524

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

angular js

2 篇文章 0 订阅

订阅专栏

今天重温了一遍angularjs的依赖注入，在这里呢，我做了一个总结，希望帮助大家理解和使用。有不对的地方请大家指出来。
首先 angular js的依赖注入我们可以理解为是jq中封装的小组件（自己理解的）。只不过在angular中这些小组件是需要注入到控制器中的，及哪个控制器需要调用这个小组件，那么就在对应的控制器中注入这个小组件。
angular 中有5个核心组件分别是 value factory service constant provider

我们先创建一个模块

var myApp = angualr.module(“myApp”,[]);

首先我们来说明：

第一个是 value

value 官方文档说的是
一个简单的javascript对象，用于向控制器传递值（在配置阶段）;

这个好理解，就是给一个值绑定为一个变量，他与constant的区别在于他可以修改，但不能注入到config中。只不过这个变量是在配置阶段绑定

语法为：

myApp.value("valueName",valueValue);

其中valueName 为“变量”名，是需要注入到控制器的，而valueValue是指，可以是数值，字符串和函数

第二个是factory 这是一个我们经常会使用得到的核心组件,通常我们称其为工厂模式,其理解为时一个函数用来返回值或者函数

通常情况下在实践项目中 factory 用来进行购物车的相关编辑;

语法如下：

myAPP.factory("factoryName",function(){

return {

//返回函数和值

xxx:function(params){...return..},

yy:function(params){.....}

}

})

当在控制器中调用的时候直接使用factoryName.xxx(params)来调用，点语法。

第三个是service 它是一个可注入的构造器，在AngularJS中它是单例的，用它在Controller中通信或者共享数据都很合适，在官方文档中将他归类到了 service中单独使用的话是作为自定义服务来的。

语法为：

myAPP.service("serviceName", function () {

this.XXX = function(){ //可以是值也可以是函数；

.....

} ;

});

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

第四个是 constant

定义常量用的，这货定义的值当然就不能被改变，它可以被注入到任何地方

语法为：

myApp.constant("constantName","constantValue")

constantName 为常量名

constantValue 为常量值

通常我们用来定义不会改变的url 或接口名称

第五个是 provider

provider是他们的老大，上面的几乎(除了constant)都是provider的封装，provider必须有一个$get方法，当然也可以说provider是一个可配置的factory.

使用provider的时候，我们不能单独的配置，需要在config中来创建provider ，在angular中在config中只能注入提供服务的供应商，但是angular中提供了一个$provide。因此在使用provider的时候在config中注入的应该是$provide，通过$provide来创建provider。

语法为：

myApp.config(function($provide){
$provide.provider("providerName",function(){
this.$get = function(){
return { //返回函数和值
xxx:function(params){...return}
yyy:function(params){ ...}
}
}
})
})

可以看出来this.$get函数其实和factory是一样的，这样就可以和上面说的相符合，provider是factory等的老大，而factory等是provider封装的。

由此可以看出来有的时候factory service provider 达到的效果是一样的那么他们的区别是什么呢，我们在什么情况下选择使用他们呢？

当使用factory来创建服务的时候，相当于新创建了一个对象，然后在这个对象上新添属性，最后返回这个对象。当把这个服务注入控制器的时候，控制器就可以访问在那个对象上的属性了。

当使用service创建服务的时候，相当于使用new关键词进行了实例化。因此，你只需要在this上添加属性和方法，然后，服务就会自动的返回this。当把这个服务注入控制器的时候，控制器就可以访问在那个对象上的属性了。

provider是唯一一种可以创建用来注入到config()函数的服务的方式。想在你的服务启动之前，进行一些模块化的配置的话，就使用provider。

如果你需要在你的应用在别处运行之前对你的服务对象进行一部分的配置，那么，这个就显得很重要了。

例子：

myApp.provider("MyProvider",function(){

this.number= "";

this.$get=function(){

var n =this.number;

return {

numbers:function(a){

return a*a;

num:n

}

});

你可以认为provider有三个部分，第一部分是私有变量和私有函数，这些变量和函数会在以后被修改。第二部分是在myApp.config函数里可以访问的变量和函数，所以，他们可以在在其他地方使用之前被修改。注意，这些变量和函数一定要添加到this上面才行。在我们的例子中，myApp.config()函数能够修改的只有number。第三部分是在控制器里可以访问的变量和函数。

当使用 provider创建服务的时候，唯一可以让控制器访问的属性和方法是在$get()函数里返回的属性和方法。上面的代码将$get添加到了this上面，最终这个函数会被返回。

现在，与之前的service和factory类似，只要我们把MyProvider注入到控制器里面，对应的方法就可以使用了。下面是myCtrl。

myApp.controller(“myCtrl”,function($scope, MyProvider){

$scope.result =MyProvider. numbers (5);

$scope.n= MyProvider. num;

});

正如之前提到的，使用provider来创建服务的目的就是为了能够通过myApp.config()函数修改一些变量来传递到最终的项目中。而上面也提到了myApp.config中能修改的变量必须是在this上的，因此我们能修改number的值。值得注意的是：config中只能够传递提供服务的供应商，而此时使用者中方法的话MyProvider是一个服务，因此我们要在后面使用驼峰命名法为期加上Provider，其变成了MyProviderProvider。myApp.config(function(MyProviderProvider){