在 AngularJS 中，服務是一個函數或對象，可在我們的 AngularJS 應用中使用。AngularJS 內建了30 多個服務。這一篇部落格將為大家介紹一些服務的使用方式以及如何建立我們自己的服務。
AngularJS服務的API可以點擊這裡查看 $http
$http 是 AngularJS 應用中最常用的服務。 服務向伺服器發送請求，應用響應伺服器傳送過來的資料。可以理解成jQuery中的ajax。
首先我們建立一個JSON資料檔案，用於$http訪問。
[1,2,3,4,5,6,7,8,9]
接下來我們使用$http讀取資料：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("myApp", []).controller("myCtrl", function($scope, $http) { $http.get("data.json").success(function(data) { $scope.items = data; }); }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="x in items">{{x}}</li> </ul> </body></html>
運行效果：
$interval
AngularJS $interval 服務對應了 JS window.setInterval 函數。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("myApp", []).controller("myCtrl", function($scope, $interval) { $scope.now = new Date(); $interval(function() { $scope.now = new Date(); }, 1000); }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div>{{now|date:'yyyy:MM:dd HH:mm:ss'}}</div> </body></html>
這樣就實現了一個時鐘效果，運行效果：
$location
AngularJS中的$location服務是對window.location的封裝。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("myApp", []).controller("myCtrl", function($scope, $location) { $scope.items = []; $scope.items.push("absUrl:" + $location.absUrl()); $scope.items.push("protocol:" + $location.protocol()); $scope.items.push("host:" + $location.host()); $scope.items.push("port:" + $location.port()); }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="item in items">{{item}}</li> </ul> </body></html>
以上介紹的為$location的基本用法，另外，$location服務還提供了獲得錨點等資訊的方法，下面著重介紹一下$location服務獲得查詢參數的使用，剛接觸的時候也走了一些彎路。
在$location服務中將查詢參數轉換為JSON對象的方法為search。
首先：假設我們的頁面的訪問地址為：http://127.0.0.1:8020/location.html，我們在其後添加一些參數，如：http://127.0.0.1:8020/location.html?p1=123&p2=456，我們理想中得到的JSON資料應為：{p1:123,p2:456}，我們來試一下是這樣子的嗎。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("myApp", []).controller("myCtrl", function($scope, $location) { $scope.params = $location.search(); }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div>{{params}}</div> </body></html>
我們訪問之後會發現頁面顯示的是：{}，並未沒有取到資料，這是AngularJS的BUG，並不是這樣子，在$location的API中提供了這樣的執行個體
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var searchObject = $location.search();
// => {foo: ‘bar’, baz: ‘xoxo’}
// set foo to ‘yipee’
location.search(‘foo′,‘yipee′);// location.search(‘foo’, ‘yipee’); // location.search() => {foo: ‘yipee’, baz: ‘xoxo’}
我們仿照API的例子將我們的地址改造一下，改造成如下形式：
http://127.0.0.1:8020/mui/location.html#?p1=123&p2=456
這時候我們會發現頁面上顯示了我們預測的內容。其實在不對請求地址進行改造的情況下，我們也可以獲得查詢參數的，我們的代碼應該這樣寫：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--必須添加base元素，否則報錯--> <base href="/" /> <script src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("myApp", []). config(function($locationProvider) { $locationProvider.html5Mode(true); }).controller("myCtrl", function($scope, $location) { $scope.params = $location.search(); }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div>{{params}}</div> </body></html>
自訂服務
上面介紹了一些AngularJS中內建的服務，下面來介紹一下如何自訂自己的服務，看過上一篇《AngularJS 過濾器》的朋友應該可以猜到自訂服務的方式，和自訂過濾器很像。下面我們就通過代碼來示範一下如何自訂服務。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script type="text/javascript"> angular.module("myApp", []) .service('HQString', function() { this.toUpperCase = function(x) { return x.toUpperCase(); } }).controller("myCtrl", function($scope, HQString) { $scope.name = HQString.toUpperCase('jianggujin'); }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div>{{name}}</div> </body></html>
在這段代碼中，我們自訂了一個服務，並向其中添加了一個方法將字串轉換為大寫，運行效果：
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
