前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >angularJS学习之路(二十五)---创建服务的五大方法---provider

angularJS学习之路(二十五)---创建服务的五大方法---provider

作者头像
wust小吴
发布2019-07-08 16:45:58
2890
发布2019-07-08 16:45:58
举报
文章被收录于专栏:风吹杨柳风吹杨柳

所有的服务工厂都是由 $provider 服务创建的,

$provider服务负责在运行时初始化这些提供者

所有的创建服务的方法都是构建在provider方法之上的,

provider方法负责在$providerCache中注册服务

下面两种方法是等价的:这里我们假设了提供者是一个具有$get方法的对象

代码语言:javascript
复制
app.factory('game', function() {
	return {
		title: 'StarCraft'
	};
});

app.provider('game',{
	$get:function () {
		return {
			title:'StarCraft'
		};
	}
});

下面的两种方法也是等价的:

代码语言:javascript
复制
app.config(function ($provider) {
	$provider.factory('game',function () {
		return {
			title:'StarCraft'
		}
	});
});


app.factory('game', function() {
	return {
		title: 'StarCraft'
	};
});

下面四种方法都是等价的:

代码语言:javascript
复制
app.config(function ($provider) {
	$provider.factory('game',function () {
		return {
			title:'StarCraft'
		}
	});
});

app.config(function ($provider) {
	$provider.provider('game',function () {
		return {
			$get:function(){
				title:'StarCraft'
			}			
		}
	});
});

app.factory('game', function() {
	return {
		title: 'StarCraft'
	};
});

app.provider('game',{
	$get:function () {
		return {
			title:'StarCraft'
		};
	}
});

那么问题来了,是否一直可以使用.factory()方法来代替.provider()方法呢?

答案是这样的:

取决于 是否 需要用angularJS的.config()函数来对.provider()方法返回的服务进行额外的扩展配置,

原因是:config()方法可以被注入特殊的参数,

下面的例子很好的说明这点:

js代码:

代码语言:javascript
复制
var app = angular.module('myApp', []);

app.provider('game',function () {
	var type;
	return {
		setType:function (value) {
			type = value;
		},
		$get:function () {
			return {
				title:type + 'Craft'
			}
		}
	}
});

app.config(function (gameProvider) {
	gameProvider.setType("Puzzle");
});

app.controller('FirstController',function ($scope,game) {
	$scope.title = game.title;
});

HTML代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<div ng-controller="FirstController">{{title}}</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/provider.js"></script>
	</body>

</html>

现在你只需要在创建服务的时候,把config里面的参数,随便改,结果就是你要的了,

而且在这个例子中,出现的gameProvider  需要你自己去测试下,你把名字换成abcProvider就失败了,

另外就是需要注意定义服务和定义config的顺序问题了,

因为我们定义了一个provider,名称叫做game   angularJS机制在注册的时候,后面后自动加上Provider

就导致我们使用app.provider()函数的时候,第一个参数会自动加上Provider,只有这样才能完整的变成一个angularJS认可的  提供者  ,这个完整的提供者才可以被注入到config函数中,

再次说明一点,要注意,config要在provider()函数后面

讲到这里,你现在应该明白了再什么时候,我们必须要使用provider来生成创建一个服务了吧,

就是,如果你希望在config中可以对服务进行配置的话,那么你必须要用provider来定义服务了

然后我们再次讲解下  provider函数:

参数接受两个,

1.name 字符串,name参数在providerCache中注册的名字,name+Provide会成为 服务的 提供者,同时name也是服务实例的名字

2.对象,函数,数组   :就是一个依赖,  注意 如果是对象 ,它必须带有$get方法,如果是数组,它的最后一个元素必须是函数,而且这个函数必须是带有$get方法的对象

provider是非常强大的,欢迎大量使用

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015年11月24日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档