上一节:
下一节:

  AngularJS 服务

  • 什么是服务

    在 AngularJS 中，您可以制作自己的服务，也可以使用许多内置服务之一。
    在 AngularJS 中，服务是功能或对象，可用于AngularJS应用程序，但仅限于此。
    AngularJS 具有大约30种内置服务。 其中之一是$location服务。
    $location 服务具有返回有关当前网页位置信息的方法。
    下面演示了使用内置的$location服务获取页面的绝对URL： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
   <p>尝试更改名称。</p>
   <div ng-app="myApp" ng-controller="myCtrl">
       <p>该页面的网址是：</p>
       <h3>{{ myUrl }}</h3>
   </div> 
   <script>
       var app = angular.module('myApp', []);
       app.controller('myCtrl', function($scope, $location) {
           $scope.myUrl = $location.absUrl();
       });
   </script>
</body>
</html>
    尝试一下
    请注意，$location服务将作为参数传递给控制器。 为了在控制器中使用服务，必须将其定义为依赖项。

  • 为什么要使用服务

    对于许多服务，例如 $location 服务，似乎可以使用DOM中已经存在的对象（例如window.location对象），并且可以使用，但至少在 AngularJS 应用程序中有一些限制。
    AngularJS 不断监督您的应用程序，并且为了使其能够正确处理更改和事件，AngularJS 希望您使用 $location 服务而不是 window.location 对象。

  • $http 服务

    $http 服务是AngularJS应用程序中最常用的服务之一；该服务向服务器发出请求，并让您的应用程序处理响应。
    使用 $http 服务从服务器请求数据： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
   <div ng-app="myApp" ng-controller="myCtrl">
       <p>今天的最欢迎信息是：</p>
       <h3>{{ myWelcome }}</h3>
   </div> 
   <p>$http服务请求服务器上的页面，并将响应设置为 "myWelcome" 变量的值。</p>

   <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {
            $http.get("welcome.html").then(function (response) {
                $scope.myWelcome = response.data;
            });
        });
   </script>
</body>
</html>
    尝试一下
    此示例演示了$http服务的非常简单的用法。在下一章AngularJS Http教程中你将了解有关$http服务的更多信息。

  • $timeout 服务

    $timeout 服务是 AngularJS 版本的 window.setTimeout 函数。
    下面示例演示了两秒钟后显示一条新消息： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p>此标题将在两秒钟后更改：</p>
    <h3>{{ myHeader }}</h3>
    </div> 
    <p>$timeout服务将在指定的毫秒数后运行一个函数。</p>
   <script>
       var app = angular.module('myApp', []);
       app.controller('myCtrl', function($scope, $timeout) {
           $scope.myHeader = "Hello World!";
           $timeout(function () {
               $scope.myHeader = "你今天好吗？";
           }, 2000);
       });
   </script>
</body>
</html>
    尝试一下

  • $interval 服务

    $interval 服务是 AngularJS 版本的 window.setInterval 函数。
    下面示例演示了每秒显示时间： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p>现在的时间是：</p>
    <h3>{{ theTime }}</h3>
    </div> 
    <p>$interval服务每隔指定的毫秒数运行一个函数。</p>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $interval) {
            $scope.theTime = new Date().toLocaleTimeString();
            $interval(function () {
                $scope.theTime = new Date().toLocaleTimeString();
            }, 1000);
        });
    </script>
</body>
</html>
    尝试一下

  • 创建自己的服务

    要创建自己的服务，请将您的服务连接到模块：
    创建一个名为hexafy的服务： 
    app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
    要使用定制服务，请在定义控制器时将其添加为依赖项。
    下面示例演示了使用名为hexafy的定制服务将数字转换为十六进制数字： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p>十六进制值255为：</p>
    <h3>{{ hex }}</h3>
    </div> 
    <p>定制服务，其方法将给定数字转换为十六进制数字。</p>
    <script>
        var app = angular.module('myApp', []);

        app.service('hexafy', function() {
            this.myFunc = function (x) {
                return x.toString(16);
            }
        });
        app.controller('myCtrl', function($scope, hexafy) {
            $scope.hex = hexafy.myFunc(255);
        });
    </script>
</body>
</html>
    尝试一下

  • 在过滤器内使用自定义服务

    创建服务并将其连接到应用程序后，即可在任何控制器，指令，过滤器甚至其他服务内部使用该服务。
    要在过滤器内使用服务，请在定义过滤器时将其添加为依赖项。
    下面示例演示了过滤器 myFormat 中使用的服务hexafy： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p>使用定制过滤器中的定制服务来转换数字255：</p>
    <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) {
            return function(x) {
                return hexafy.myFunc(x);
            };
        }]);
    </script>
</body>
</html>
    尝试一下
    当显示来自对象或数组的值时，可以使用过滤器。
    下面示例演示了创建一个名为hexafy的服务： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p>显示数组[255、251、200]时使用过滤器：</p>
    <ul>
        <li ng-repeat="x in counts">{{x | myFormat}}</li>
    </ul>
    </div> 
    <p>此筛选器使用将数字转换为十六进制值的服务。</p>
    
    <script>
        var app = angular.module('myApp', []);
        app.service('hexafy', function() {
            this.myFunc = function (x) {
                return x.toString(16);
            }
        });
        app.filter('myFormat',['hexafy', function(hexafy) {
            return function(x) {
                return hexafy.myFunc(x);
            };
        }]);
        app.controller('myCtrl', function($scope) {
            $scope.counts = [255, 251, 200];
        });
    </script>
</body>
</html>
    尝试一下
上一节:
下一节: