AngularJS入门教程之服务(Service)
AngularJS服务(Service)
AngularJS中你可以创建自己的服务，或使用内建服务。
什么是服务？
在AngularJS中，服务是一个函数或对象，可在你的AngularJS应用中使用。
AngularJS内建了30多个服务。
有个$location服务，它可以返回当前页面的URL地址。
实例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内建的$location服务获取当前页面的URL。</p>
<script>
varapp=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服务向服务器请求数据:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>欢迎信息:</p>
<>{{myWelcome}}<>
</div>
<p>$http服务向服务器请求信息，返回的值放入变量"myWelcome"中。</p>
<script>
varapp=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服务应用请查看AngularJSHttp教程。
$timeout服务
AngularJS$timeout服务对应了JSwindow.setTimeout函数。
实例
两秒后显示信息:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout访问在规定的毫秒数后执行指定函数。</p>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$timeout){
$scope.myHeader="HelloWorld!";
$timeout(function(){
$scope.myHeader="Howareyoutoday?";
},2000);
});
</script>
</body>
</html>
运行结果：
两秒后显示信息:
Howareyoutoday?
$timeout访问在规定的毫秒数后执行指定函数。
$interval服务
AngularJS$interval服务对应了JSwindow.setInterval函数。
实例
每两秒显示信息:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$interval){
$scope.theTime=newDate().toLocaleTimeString();
$interval(function(){
$scope.theTime=newDate().toLocaleTimeString();
},1000);
});
</script>
</body>
</html>
运行效果：
现在时间是:
下午3:41:09
$interval访问在指定的周期(以毫秒计)来调用函数或计
创建自定义服务
你可以创建自定义的访问，链接到你的模块中：
创建名为hexafy的访问:
app.service('hexafy',function(){
this.myFunc=function(x){
returnx.toString(16);
}
});
要使用自定义的访问，需要在定义过滤器的时候独立添加:
实例
使用自定义的的服务hexafy将一个数字转换为16进制数:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>255的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
varapp=angular.module('myApp',[]);
app.service('hexafy',function(){
this.myFunc=function(x){
returnx.toString(16);
}
});
app.controller('myCtrl',function($scope,hexafy){
$scope.hex=hexafy.myFunc(255);
});
</script>
</body>
</html>
运行结果：
255的16进制是：
ff
自定义服务,用于转换16进制数：
过滤器中，使用自定义服务
当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。
在过滤器myFormat中使用服务hexafy:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp">
在过滤器中使用服务:
<h1>{{255|myFormat}}</h1>
</div>
<script>
varapp=angular.module('myApp',[]);
app.service('hexafy',function(){
this.myFunc=function(x){
returnx.toString(16);
}
});
app.filter('myFormat',['hexafy',function(hexafy){
returnfunction(x){
returnhexafy.myFunc(x);
};
}]);
</script>
</body>
</html>
运行效果：
在过滤器中使用服务：
f f
在对象数组中获取值时你可以使用过滤器：
创建服务hexafy:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>在获取数组[255,251,200]值时使用过滤器:</p>
<ul>
<ling-repeat="xincounts">{{x|myFormat}}</li>
</ul>
<p>过滤器使用服务将10进制转换为16进制。</p>
</div>
<script>
varapp=angular.module('myApp',[]);
app.service('hexafy',function(){
this.myFunc=function(x){
returnx.toString(16);
}
});
app.filter('myFormat',['hexafy',function(hexafy){
returnfunction(x){
returnhexafy.myFunc(x);
};
}]);
app.controller('myCtrl',function($scope){
$scope.counts=[255,251,200];
});
</script>
</body>
</html>
运行效果：
在获取数组[255,251,200]值时使用过滤器：
过滤器使用服务将10进制转换为16进制。
以上就是对AngularJS服务的资料整理，后续继续补充，有需要的朋友参考下。