本文實例講述了AngularJS基于factory創建自定義服務的方法。分享給大家供大家參考，具體如下：
為什么要創建自定義服務？
很簡單，不想讓控制器顯得過于“臃腫”，而且服務可復用。針對性強，每個服務對應不同的功能。
這里介紹如何使用factory創建自定義服務，并且使用他。
例子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來創建一個服務和創建一個控制器非常像，只是創建服務需要返回這個服務的對象。這里的對象就是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相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
