AngularJS系列(四)——服务

本文链接：https://blog.csdn.net/luo4105/article/details/77894340

服务是一个函数或对象，可在AngularJS应用中使用。可以和后台中的service去理解。

$location

$location，和js中的location作用相似，下面是返回当前页面URL的实例

代码语言：javascript复制

<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访问请求实例

代码语言：javascript复制

<div ng-app="myApp"ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

代码语言：javascript复制

<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 函数。

代码语言：javascript复制

<div ng-app="myApp"ng-controller="myCtrl">
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>

代码语言：javascript复制

<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 函数。

代码语言：javascript复制

<div ng-app="myApp"ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

代码语言：javascript复制

<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中创建并使用服务

代码语言：javascript复制

<div ng-app="myApp"ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>

代码语言：javascript复制

<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中使用服务

代码语言：javascript复制

<div ng-app="myApp">

在过滤器中使用服务:

代码语言：javascript复制

<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>

http angularjs

0 人点赞