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 服務的資料整理，後續繼續補充，有需要的朋友參考下。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
