Angular创建自定义服务的四种方法

Angular自定义服务完全指南
本文详细介绍了在Angular中创建自定义服务的四种方法:包括最简单的方法,使用factory、service以及复杂的provider方法。每种方法都阐述了其参数、实现细节以及特性,如依赖注入和服务实例的创建方式。对于有一定Vue背景的开发者,理解第四种方法会更加容易。
1. 第一种方法(也是最简单的)

参数一:“服务名称”
参数二:服务的具体实践
局限性:在这个服务当中,不能使用其它的服务

// value服务可以传一个死值
app.value("pi",3.1415926)

// 将json形式的数据转化成key = value形式
app.value("urlEncoded",function(json){
	var temp = []
	for(key in json){
	 	// 获取指定的value
	 	var value= json[key]
	 	var newValue = key + "=" + value
	 	temp.push(newValue)
	}
	// 将数组中的所有元素放入一个字符串中,并以&连接
	var result = temp.join("&")
	retrun result
})
2. 第二种方式

参数一:自定义服务的名称
参数二:具体实现,里面可以添加依赖的其它服务
factory 要求必须返回一个对象,对象是什么类型的没有明确要求

app.factory("myFactory",function(pi){
	// 将3.1415926向取整
	var value = Math.floor(pi)
	// 求取整后的平方
	var result = Math.pow(value,2)
	return result
})
第三种方法

参数一:自定义服务的名字
参数二:具体实现,还可以添加依赖的服务
每一个通过service创建的对象,都是new出来的对象,类似于构造函数

app.server("myService",function(pi,myFactory){
	this.pi = pi
	this.factory = myFactory
	this.name = "张三"
})
第四种方法(相对于前三种来说,比较复杂,如果你已经学过Vue,那么理解起来就比较容易)

参数一:指定一函数服务的名称
参数二:工厂函数实现
通过provider定义的服务,只能在这个内部是用
$get自定义服务的具体实现(固定格式)

app.provider("randomStr",function(){
	// 这里相当于vue组件内的返回值,一定要有一个return,数据写在return内,
要想找到return内的数据,要通过this找到
	return{
		length:5
		// 对length进行设置
		setLength: function(len){
		this.length = len
		}
		// $get内生成一个多位随即数,随机位数和return内的length一致
		$get: function(){
			var str= "QWERTYUIOPASDFGHJKLZXCVBNM"
			for(var index = 0; index  < this.length; index++){
				var random = Math.floor(Math.random() * str.length)
				var char = str[random]
				value += char
			}
			return value
		}
	}
})
// 对randomStr服务进行设置
// provider的配置选项,该选项会在自定义provider加载的术后自动调用
// randomStrProvider 为固定格式,对自定义服务进行配置时,后面都要带上Provider
app.config(function(randomStrProvider){
	// 调用ramdomStr内部的方法并调用
	randomStrProvider.setLength(10)
})
// 最后在Angular内添加服务依赖
app.controller("ctrl1",function($scope,pi,urlEncoded,myFactory,myService,randomStr){
	console.log(pi)
	console.log(urlEncoded({name:"张三",age:18}))
	console.log(myFactory)
	console.log(myService.name)
	// 将myService依赖内的name值赋值给controller控制器内的des
	$scope.des = myService.name
	console.log(randomStr)
})
控制台输出结果

输出结果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值