快捷導(dǎo)航

AngularJS基于factory創(chuàng)建自定義服務(wù)的方法詳解

更新時(shí)間：2017年05月25日 14:25:10 作者：面具哥布林

這篇文章主要介紹了AngularJS基于factory創(chuàng)建自定義服務(wù)的方法,結(jié)合實(shí)例形式分析了AngularJS使用factory創(chuàng)建自定義服務(wù)的具體步驟、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了AngularJS基于factory創(chuàng)建自定義服務(wù)的方法。分享給大家供大家參考，具體如下：

為什么要?jiǎng)?chuàng)建自定義服務(wù)？

很簡(jiǎn)單，不想讓控制器顯得過(guò)于“臃腫”，而且服務(wù)可復(fù)用。針對(duì)性強(qiáng)，每個(gè)服務(wù)對(duì)應(yīng)不同的功能。

這里介紹如何使用factory創(chuàng)建自定義服務(wù)，并且使用他。

例子1：

<!--HTML-->
<div ng-controller="showTheName">
  <h1 ng-bind="name"></h1>
</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來(lái)創(chuàng)建一個(gè)服務(wù)和創(chuàng)建一個(gè)控制器非常像，只是創(chuàng)建服務(wù)需要返回這個(gè)服務(wù)的對(duì)象。這里的對(duì)象就是NameFactory 。一般的寫(xiě)法是在函數(shù)的一開(kāi)始就創(chuàng)建一個(gè)變量對(duì)象，而后在進(jìn)行對(duì)象里面屬性以及方法的設(shè)置，最后返回這個(gè)對(duì)象即可。

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

自定義服務(wù)還有個(gè)更強(qiáng)大的玩法，就是在創(chuàng)建自定義服務(wù)的同時(shí)將已經(jīng)創(chuàng)建好的服務(wù)注入。以上一篇博文的基礎(chǔ)為例，使用自定義服務(wù)來(lái)實(shí)現(xiàn)讀取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>種類(lèi)</td>
        <td>價(jià)格</td>
        <td>保質(zhì)期</td>
      </tr>
      </thead>
      <tbody>
      <tr ng-hide="products.length">
        <td colspan="4" class="text-center">沒(méi)有數(shù)據(jù)</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數(shù)據(jù)</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("出錯(cuò)"));
      });
    return d.promise;
  };
  return loadJson;
});
app.controller("AjaxJson",function($scope,loadJSON){
  $scope.LoadJson = function () {
    loadJSON.loadjson().then(function(data){
      $scope.products = data;
    },function(){
      alert("出錯(cuò)");
    })
  }
});

步驟如下：

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

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: