1. 程式人生 > >Angular建立自定義服務的四種方法

Angular建立自定義服務的四種方法

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)
})

控制檯輸出結果

輸出結果