Angular建立自定義服務的四種方法
阿新 • • 發佈:2018-12-10
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) })