本文實(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 。一般的寫法是在函數(shù)的一開始就創(chuàng)建一個(gè)變量對(duì)象，而后在進(jìn)行對(duì)象里面屬性以及方法的設(shè)置，最后返回這個(gè)對(duì)象即可。

在控制器使用自定義的服務(wù)與使用AngularJS自帶的服務(wù)幾乎一樣，只是名字的前面沒有美元（$）符號(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>種類</td>        <td>價(jià)格</td>        <td>保質(zhì)期</td>      </tr>      </thead>      <tbody>      <tr ng-hide="products.length">        <td colspan="4" class="text-center">沒有數(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ò)");    })  }});