AngularJS——4、服务（Service）

最新推荐文章于 2021-04-26 16:45:54 发布

原创最新推荐文章于 2021-04-26 16:45:54 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS

AngularJS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了AngularJS中的服务，包括$location用于获取当前页面URL，$http服务进行服务器请求，$timeout和$interval定时执行函数。还展示了如何创建和在过滤器中使用自定义服务。

服务：一个函数或对象，可使用其中自带的服务，也可创建服务。

<!-- 通用部分 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">    
    </head>
    <body>
        ......
        <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        ......
    </body>
</html>

1、$location 返回当前页面URL地址（作为参数传递到controller中）

<div ng-app="xxApp" ng-controller="xxCtrl">
    <p>当前页面URL:</p>
    <p>{{myUrl}}</p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope, $location) {
        $scope.myUrl = $location.absUrl();
    });
</script>

2、$http 服务向服务器发送请求，应用响应服务器传送的数据。

<div ng-app="xxApp" ng-controller="xxCtrl"> 
    <h1>{{date}}</h1>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope, $http) {
      $http.get("/xxdemo.html").then(function (response) {
          $scope.date = response.data;
      });
    });
</script>

xxdemo.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>The TV play "Secret and Great" is coming out</h1>
    </body>
</html>

链接到： AngularJS——5、Http

3、$timeout 在规定的毫秒数后执行指定函数。

<div ng-app="xxApp" ng-controller="xxCtrl"> 
    <p>2s后显示信息:</p>
    <p>{{info}}</p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope, $timeout) {
      $scope.info = " what？ ";
      $timeout(function () {
          $scope.info = "Secretly and Greatly is coming out！";
      }, 2000);
    });
</script>

4、$interval 在指定的周期(以毫秒计)来调用函数或计算表达式。

<div ng-app="xxApp" ng-controller="xxCtrl"> 
    <p>当前时间:</p>
    <h1>{{time}}</h1>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.controller('xxCtrl', function($scope, $interval) {
      $scope.time = new Date().toLocaleTimeString();
      $interval(function () {
          $scope.time = new Date().toLocaleTimeString();
      }, 10000);
    });
</script>

输出：每10s执行一次

5、（1）创建自定义服务

<div ng-app="xxApp" ng-controller="xxCtrl">
    <p> 504 的二进制是：{{bin}}</p>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.service('isbin', function() {
	    this.myFunc = function (x) {
            return x.toString(2);
        }
    });
    app.controller('xxCtrl', function($scope, isbin) {
        $scope.bin = isbin.myFunc(504);
    });
</script>

输出：

（2）（过滤器中）使用自定义服务

<div ng-app="xxApp" ng-controller="xxCtrl">
    <p> 1987 的二进制是：{{1987 | format}}</p>
    <ul>
        <li ng-repeat="x in data">{{ x | format}}</li>
    </ul>
</div>
<script>
    var app = angular.module('xxApp', []);
    app.service('isbin', function() {
	    this.myFunc = function (x) {
            return x.toString(2);
        }
    });
    //过滤器使用服务将10进制转换为2进制。
    app.filter('format',['isbin',function(isbin){
        return function(x){
            return isbin.myFunc(x);
        }
    }]);
    app.controller('xxCtrl', function($scope, isbin) {
        $scope.data = [1987,5,4];
    });
</script>

输出：