AngularJS系列(四)——服务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo4105/article/details/77894340
服务是一个函数或对象，可在AngularJS应用中使用。可以和后台中的service去理解。
$location
$location，和js中的location作用相似，下面是返回当前页面URL的实例
<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>$http服务
$http服务是AngularJS应用中最常用的服务。服务向服务器返送请求，应用响应服务器传送过来的数据。get访问请求实例
<div ng-app="myApp"ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</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>$timeout 服务
AngularJS $timeout 服务对应了 JSwindow.setTimeout 函数。
<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= "Hello JS";
},3000)
})
</script>$interval 服务
AngularJS $interval 服务对应了 JSwindow.setInterval 函数。
<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().toLocaleString();
$interval(function() {
$scope.theTime= new Date().toLocaleString();
},1000);
})
</script>自定义服务
创建访问自定义服务，链接到你的模块中
在controller中创建并使用服务
<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('fd', function () {
this.toCase= function (x) {
returnx.toString(16);
}
});
app.controller('myCtrl', function ($scope,fd){
$scope.hex= fd.toCase(255)
})
</script>在filter中使用服务
<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){
returnfunction (text) {
returnhexafy.myFunc(text);
}
}])
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录