前端之家收集整理的这篇文章主要介绍了
AngularJS入门(8)-Angular服务，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
403_0@在 AngularJS 中，服务是一个
函数或对象，可在我们的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。这一篇
博客将为大家介绍一些服务的使用方式以及如何创建我们自己的服务。
AngularJS服务的API可以点击这里查看
$http
@H_
403_0@
$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。可以理解成jQuery中的ajax。
@H_
403_0@首先我们创建一个JSON数据
文件，用于
$http访问。
[1,2,3,4,5,6,7,8,9]
@H_
403_0@接下来我们使用
$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>
@H_
403_0@运行
效果：
$interval
@H_
403_0@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",$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>
@H_
403_0@这样就实现了一个时钟
效果，运行
效果：
$location
@H_
403_0@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",$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>
@H_
403_0@以上介绍的为
$location的基本
用法，另外，
$location服务还提供了获得锚点等信息的
方法，下面着重介绍一下
$location服务获得
查询参数的使用，刚接触的时候也走了一些弯路。 在
$location服务中将
查询参数转换为JSON对象的
方法为
search()。
@H_
403_0@首先：假设我们的
页面的访问地址为：
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",$location) { $scope.params = $location.search(); }); </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>{{params}}</div>
</body>
</html>
@H_
403_0@我们访问之后会发现
页面显示的是：
{}，并未没有取到数据，这是AngularJS的BUG，并不是这样子，在
$location的API中提供了这样的实例
@H_403_0@// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var searchObject = $location.search();
// => {foo: ‘bar’,baz: ‘xoxo’}
@H_403_0@// set foo to ‘yipee’
location.search() => {foo: ‘yipee’,baz: ‘xoxo’}
@H_
403_0@我们仿照API的例子将我们的地址改造一下，改造成如下形式：
http://127.0.0.1:8020/mui/location.html#?p1=123&p2=456
@H_
403_0@这时候我们会发现
页面上
显示了我们预测的
内容。其实在不对请求地址进行改造的情况下，我们也可以获得
查询参数的，我们的
代码应该这样写：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<base href="/" />
<script src="js/angular.min.js"></script>
<script type="text/javascript"> angular.module("myApp",[]). config(function($locationProvider) { $locationProvider.html5Mode(true); }).controller("myCtrl",$location) { $scope.params = $location.search(); }); </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>{{params}}</div>
</body>
</html>
@H_
403_0@上面介绍了一些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",HQString) { $scope.name = HQString.toUpperCase('jianggujin'); }); </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>{{name}}</div>
</body>
</html>
@H_
403_0@在这段
代码中，我们
自定义了一个服务，并向其中
添加了一个
方法将字符串转换为大写，运行
效果：
