AngularJS 服務(Service)
在 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> 執行效果：
$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’, 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>在這段程式碼中，我們自定義了一個服務，並向其中添加了一個方法將字串轉換為大寫，執行效果：
