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>