AngularJS基于factory如何創建自定義服務

這篇文章主要介紹了AngularJS基于factory如何創建自定義服務，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為什么要創建自定義服務？

很簡單，不想讓控制器顯得過于“臃腫”，而且服務可復用。針對性強，每個服務對應不同的功能。

這里介紹如何使用factory創建自定義服務，并且使用他。

例子1：

<!--HTML-->
<div ng-controller="showTheName">
  <h2 ng-bind="name"></h2>
</div>

/*js*/
var app = angular.module("routingDemoApp",[]);
app.factory("showName",function(){
  var NameFactory = {};
  NameFactory.name = "張三";
  return NameFactory;
});
app.controller("showTheName",function($scope,showName){
  $scope.name = showName.name;
});

使用factroy來創建一個服務和創建一個控制器非常像，只是創建服務需要返回這個服務的對象。這里的對象就是NameFactory 。一般的寫法是在函數的一開始就創建一個變量對象，而后在進行對象里面屬性以及方法的設置，最后返回這個對象即可。

在控制器使用自定義的服務與使用AngularJS自帶的服務幾乎一樣，只是名字的前面沒有美元（$）符號。在注入了自定義的服務后，控制器中就可以隨意的使用該控制器返回的對象的屬性和方法了。

自定義服務還有個更強大的玩法，就是在創建自定義服務的同時將已經創建好的服務注入。以上一篇博文的基礎為例，使用自定義服務來實現讀取AJAX文件。（JSON文件可參考前面一篇《AngularJS讀取JSON及XML文件的方法》，這里不給出了）

<!--html-->
<div class="panel panel-default" ng-controller="AjaxJson">
  <div class="panel-body">
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <td>名</td>
        <td>種類</td>
        <td>價格</td>
        <td>保質期</td>
      </tr>
      </thead>
      <tbody>
      <tr ng-hide="products.length">
        <td colspan="4" class="text-center">沒有數據</td>
      </tr>
      <tr ng-repeat="item in products">
        <td ng-bind="item.name"></td>
        <td ng-bind="item.category"></td>
        <td ng-bind="item.price"></td>
        <td ng-bind="item.expiry"></td>
      </tr>
      </tbody>
    </table>
    <p><button ng-click="LoadJson()">加載JSON數據</button></p>
  </div>
</div>

/*JS*/
app.factory("loadJSON",function($http,$q){
  var loadJson ={};
  loadJson.loadjson = function(){
    var d = $q.defer();
    $http({
      url:"json.json",
      method:"GET"
    })
      .success(function(response){
      d.resolve(response);
    })
      .error(function(){
        d.reject(alert("出錯"));
      });
    return d.promise;
  };
  return loadJson;
});
app.controller("AjaxJson",function($scope,loadJSON){
  $scope.LoadJson = function () {
    loadJSON.loadjson().then(function(data){
      $scope.products = data;
    },function(){
      alert("出錯");
    })
  }
});

步驟如下：

1）將$http，$q 注入到匿名函數中。
2）創建一個變量對象，命名為loadJson。
3）在該對象中創建一個方法，命名為loadjson()。
4）創建一個變量d，賦予它$q.difer()方法。
5）使用http({})創建一個promise對象，并返回該promise對象。
6）返回ladJson對象。服務創建完畢。
7）在控制器中注入該服務，使用then()方法對自定義服務返回的承諾進行操作。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“AngularJS基于factory如何創建自定義服務”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!