AngularJS 服務(Service)
AngularJS 中你可以創建自己的服務，或使用內建服務。
什么是服務？
在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
有個 $location 服務，它可以返回當前頁面的 URL 地址。
實例
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><p> 當前頁面的url:</p><h3>{{myUrl}}</h3></div><p>該實例使用了內建的 $location 服務獲取當前頁面的 URL。</p><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl();});</script></body></html>運行結果：
當前頁面的url:
http://www.runoob.com/try/try.php?filename=try_ng_services
該實例使用了內建的 $location 服務獲取當前頁面的 URL。
注意： $location 服務是作為一個參數傳遞到 controller 中。如果要使用它，需要在 controller 中定義。
為什么使用服務?
$http 是 AngularJS 應用中最常用的服務。服務向服務器發送請求，應用響應服務器傳送過來的數據。
AngularJS 會一直監控應用，處理事件變化， AngularJS 使用 $location 服務比使用 window.location 對象更好。
$http 服務
$http 是 AngularJS 應用中最常用的服務。 服務向服務器發送請求，應用響應服務器傳送過來的數據。
實例
使用 $http 服務向服務器請求數據:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <p>歡迎信息:</p><>{{myWelcome}}<></div><p> $http 服務向服務器請求信息，返回的值放入變量 "myWelcome" 中。</p><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; });});</script>運行結果：
歡迎信息:
歡迎訪問
$http 服務向服務器請求信息，返回的值放入變量 "myWelcome" 中。
以上是一個非常簡單的 $http 服務實例，更多 $http 服務應用請查看 AngularJS Http 教程。
$timeout 服務
AngularJS $timeout 服務對應了 JS window.setTimeout 函數。
實例
兩秒后顯示信息:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <p>兩秒后顯示信息:</p><h1>{{myHeader}}</h1></div><p>$timeout 訪問在規定的毫秒數后執行指定函數。</p><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000);});</script></body></html>運行結果：
兩秒后顯示信息:
How are you today?
$timeout 訪問在規定的毫秒數后執行指定函數。
$interval 服務
AngularJS $interval 服務對應了 JS window.setInterval 函數。
實例
每兩秒顯示信息:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <p>現在時間是:</p><h1>{{theTime}}</h1></div><p>$interval 訪問在指定的周期(以毫秒計)來調用函數或計算表達式。</p><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000);});</script></body></html>運行效果：
現在時間是:
下午3:41:09
$interval 訪問在指定的周期(以毫秒計)來調用函數或計
創建自定義服務
你可以創建自定義的訪問，鏈接到你的模塊中：
創建名為hexafy 的訪問:
app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});要使用自定義的訪問，需要在定義過濾器的時候獨立添加:
實例
使用自定義的的服務 hexafy 將一個數字轉換為16進制數:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><p>255 的16進制是:</p><h1>{{hex}}</h1></div><p>自定義服務，用于轉換16進制數：</p><script>var app = angular.module('myApp', []);app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255);});</script></body></html>運行結果：
255 的16 進制是：
f f
自定義服務,用于轉換16進制數：
過濾器中，使用自定義服務
當你創建了自定義服務，并連接到你的應用上后，你可以在控制器，指令，過濾器或其他服務中使用它。
在過濾器 myFormat 中使用服務 hexafy:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp">在過濾器中使用服務:<h1>{{255 | myFormat}}</h1></div><script>var app = angular.module('myApp', []);app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); };}]);</script></body></html>運行效果：
在過濾器中使用服務：
f f
在對象數組中獲取值時你可以使用過濾器：
創建服務 hexafy:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><p>在獲取數組 [255, 251, 200] 值時使用過濾器:</p><ul> <li ng-repeat="x in counts">{{x | myFormat}}</li></ul><p>過濾器使用服務將10進制轉換為16進制。</p></div><script>var app = angular.module('myApp', []);app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); };}]);app.controller('myCtrl', function($scope) { $scope.counts = [255, 251, 200];});</script></body></html>運行效果：
在獲取數組[255, 251, 200]值時使用過濾器：
過濾器使用服務將10進制轉換為16進制。
以上就是對AngularJS 服務的資料整理，后續繼續補充，有需要的朋友參考下。
新聞熱點
疑難解答
