AngularJS系列(四)——服务

绝地灬酷狼 2022-06-07 23:41 186阅读 0赞

服务是一个函数或对象，可在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>

### $timeout 服务 ###

AngularJS $timeout 服务对应了 JSwindow.setTimeout 函数。

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

### $interval 服务 ###

AngularJS $interval 服务对应了 JSwindow.setInterval 函数。

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

### 自定义服务 ###

创建访问自定义服务，链接到你的模块中

在controller中创建并使用服务

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

在filter中使用服务

在过滤器中使用服务:

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