AngularJS--自定義服務的三種方式用法總結


AngularJS 中可通過三種($provider,$factory,$service)方式自定義服務,以下是不同的實現形式:

第一種factory工廠模式實現:
以其簡潔的使用特色而流行於自定義服務行列
* 在處理返回數據的時候,可以返回字面量、數組、對象、複雜對象等等各種數據
* 極大的滿足了我們項目的需要,所以使用較多,需要掌握!
html頁面:

<div ng-controller="myCtrl">
    <span ng-bind="value1"></span>
</div>

輸出結果:

factory value

JS代碼:

app.controller("myCtrl",["$scope","service1",function($scope,s1){
    $scope.value1=s1;
}])
app.factroy("service1",function(){
//模擬從後端獲取數據
    var _v="factory value";
//返回數據
    return _v;
})

第二種service對象方式實現
以其規範的返回數據而流行與自定義服務行列
service方式,只能返回對象,在某些項目組中,爲了規範服務返回的數據~也就是強制指定
必須返回對象數據,才能正常解析,避免了出現大量的各種格式的數據:由於返回數據的標準化而流行!
html頁面:

  <div ng-controller="myCtrl">
    <span ng-bind="value2"></span>
</div>  

輸出結果:

service value

JS代碼:

app.controller("myCtrl",["$scope","service2",function($scope,s2){
    $scope.value2=s2.v;
}])
app.service("service2",function(){
//模擬從後端獲取數據
    var _v="service value";
//返回json對象
    return {v:_v};
})

第三種provider代理方式實現
要求處理的過程中必須通過this.$get()函數進行返回數據的處理
這種方式在Angular自己的內置服務和框架中使用較多,但是不推薦在項目開發中使用
因爲操作的複雜性和代碼的可讀性無形中讓開發人員掌握有一定的難度
html頁面:

  <div ng-controller="myCtrl">
    <span ng-bind="value3"></span>
 </div>    

輸出結果:

provider value

JS代碼:

app.provider("service3",function(){
//通過this.$get()函數進行返回數據的處理
    this.$get=function(){
        return "provider value"
    }
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章