AngularJs依赖注入$service、$factory、$provider详解

前言

1、依赖注入的逼格

用有过JAVA spring的人都知道,Spring的核心思想就是DI(依赖注入,Dependency Injection)和IOC(控制反转 Invension of Controller),AngularJS的service其实就是用到了这里的DI思想,那么什么叫做DI?

所谓DI,就是指对象是被动接受依赖类而不是自己主动去找,换句话说就是指对象不是从容器中查找它依赖的类,而是在容器实例化对象的时候主动将它依赖的类注入给它。

在你实例化一个类时,它会自动去实例化它里面所用到的其它实例。所以这就叫依赖注入。在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了。

2、 三种注入类型

AngualrJs中可用来注入的有三种类型,service、factory、provider,这三种写法不样,用法也都不一样。其中,service只实例化一次,其实就是单例模式的思想。无论我们在什么地方注入我们的service,将永远使用同一个实例。所以对很多在controller层中的操作就可以放到serivce层中去。AngularJS提供例如许多内在的服务。 如:
$http, $route, $window, $location等。
每个服务负责例如一个特定的任务
$http是用来创建AJAX调用,以获得服务器的数据
r o u t e route用来定义路由信息等。内置的服务总是前缀 符号

一、Service使用详解

(1)一般直接用this来操作数据、定义函数,看一个简单的实例。
app.service('pgService',function(){
	console.log('pgService----观察实例化');
	this.name = '陈群';
	this.flag = '定品寻良骥';
	this.card = function(){
		return console.log(this.flag);
	}
})
(2)AngularJS使用DI添加sevice的三种方法:

方式一:内联注解(推荐使用)

app.controller('pgCtrl',['$scope','pgService',function($scope,pgService){
	//coding
}])

方式二:$inject注解

var pgController = function($scope, pgService) {}  
	pgController.$inject = ['$scope', 'pgService'];  
	app.controller('pgController', pgController);  

方式三:隐式注解:

app.controller('pgCtrl',function($scope,pgService){
	//coding
})

推荐使用方式1的原因:
1、写法上比方法2更简单明了
2、比方法3更可靠(由于Javascript可以被压缩,AngularJS又是通过解析服务名称找到对应Service的,因此Javascript压缩之后AngularJS将无法找到指定的Service,但字符串不会被压缩,因此单独以字符串指定Service的名称可以避免这个问题)

使用方式1或方式2的注意点:
1、由于上述第二点原因,AngularJS在编译Html时,由$injector将数组中Service的名称与方法体中的Service进行一一映射。这种映射关系必须遵守由AngularJS的约定
2、数组中Service名称的个数必须与方法体中Service名称的个数保持一致
3、数组中Service的顺序必须与方法体中Serivce的顺序保持一致

对比方式1和3的区别其实就是提前把service写入数组。

(3)什么时候适合使用service()方法

service()方法很适合使用在功能控制比较多的service里面
注意:需要使用.config()来配置service的时候不能使用service()方法
注意:seivce定义的服务不能在.config中使用!只有provider定义的才可以

(4)一个完整的service实例
//HTML
<div ng-controller="serviceCtrl">
	<p ng-bind="name"></p>
	<p ng-bind="flag"></p>
</div>
//JS
app.controller('serviceCtrl',['$scope','pgService',function($scope,pgService){
	$scope.name = pgService.name; //结果输出---陈群
	$scope.flag = pgService.card(); //结果输出---定品寻良骥
}])

app.service('pgService',function(){
	this.name = "陈群";
	this.flag = "定品寻良骥";
	this.card = function(){
		return this.flag;
	}
})

二、Factory使用详解

Factory 一般就是创建一个对象,然后在对这个对象添加方法与数据,最后将对象返回,然后注入到Controller层中即可。
实例:

//HTML
<div ng-controller="factoryCtrl">
	<p ng-bind="name"></p>
	<p ng-bind="flag"></p>
</div>
//JS
app.controller('factoryCtrl',function($scope,pgFactory){
	$scope.name = pgFactory.name;
	$scope.flag = pgFactory.card();
})

app.factory('pgFactory',function(){
	var factory = {};
		factory.name = '孙权';
		factory.flag = '容我三思';
		factory.card = function(){
			return factory.flag;
		}
		return factory;
})

三、provider使用详解

$provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务。 服务会被叫做供应商的东西来定义,你可以使用$provide来创建一个供应商。你需要使用$provide中的provider()方法来定义一个供应商,同时你也可以通过要求$provide被注入到一个应用的config函数中来获得$provide服务。使用方法是返回一个$get函数,注意在config阶段,只有provider能被注入。其它用法和service一样。

//HTML
<div ng-controller="providerCtrl">
	<p ng-bind="name"></p>
	<p ng-bind="flag"></p>
</div>
//JS
app.controller('providerCtrl',function($scope,pgProvider){
	$scope.name = pgProvider.name
	$scope.flag = pgProvider.flag
})
app.provider('pgProvider',function(){
	this.name = '刘备';
	this.flag = '惟贤惟德';
	this.$get = function(){
		return this;
	}
})

四、Service、Factory、Provider三者区别

1、用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。

2、Service 是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把
service 传进 controller 之后,在controller里 “this” 上的属性就可以通过 service 来使用了。

3、Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider。

4、Factory/service是第一个注入时才实例化,而provider不是,它是在config之前就已实例 化好

发布了23 篇原创文章 · 获赞 10 · 访问量 415

猜你喜欢

转载自blog.csdn.net/qq_35593965/article/details/103194460
今日推荐