AngularJS【AngularJS】—— 13 服务Service(Service)

style=”font-size: 13px; color: #000080;”>在AngularJS中有众多的劳务,常用的诸如$http,$location等等。

style=”font-size: 13px; color: #000080;”>本篇作品会介绍一下的情节:

style=”font-size: 13px; color: #ff0000;”>  1 $http这种Angular提供的劳务的行使

  2
如何自定义服务,并总计服务需要留意的多少个小点。

  $http的使用

AngularJS,  AngularJS为我们提供了很多种劳务,$http用于发送http请求,动态的哀求数据。

  这样就需要使用web容器来运转代码了,先看看程序源码,视图方面或者跟经常的代码相同:

<div ng-controller="myAppCtrl">
            <ul>
                <li ng-repeat="user in users">
                    {{user.name}}
                </li>
            </ul>
        </div>

  创设一个无连串表,循环输出请求到的数目。

  在js中,成立一个模板,在模板上创办控制器。

<script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){
                $http({
                    method:'GET',
                    url:'data.json'
                }).success(function(data,status,headers,config){
                    console.log("success!...");
                    console.log(data);
                    $scope.users = data;
                }).error(function(data,status,headers,config){
                    console.log("error!...");
                });
            }]);
        </script>

  该控制器比日日常常的控制器多了一个流入的参数$http,添加了这么些参数,就足以在措施内部一贯调用。

  选用如下的格式:

$http({
  method:'GET',//http请求的类型
  url:'data.json'//请求的地址
}).success(function(data,status,headers,config){
  //成功了,怎么做
}).error(function(data,status,headers,config){
  //失败了,怎么做
});

  接下去需要在代码相同的门径下,成立data.json文件

[{
    "name":"test1"
},{
    "name":"test2"
},{
    "name":"test3"
}]

  利用web容器,本文使用的是按照nodejs的http-server,启动后在网页中输入相应的URL查看结果:

AngularJS 1

  全体的代码体现:

AngularJS 2AngularJS 3

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="myAppCtrl">
            <ul>
                <li ng-repeat="user in users">
                    {{user.name}}
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){
                $http({
                    method:'GET',
                    url:'data.json'
                }).success(function(data,status,headers,config){
                    console.log("success!...");
                    console.log(data);
                    $scope.users = data;
                }).error(function(data,status,headers,config){
                    console.log("error!...");
                });
            }]);
        </script>
    </body>
</html>

View Code

 

  使用$http是很基本的始末,就不做过多的讲演了。

  创设自己的瑟维斯(Service)服务

  接下去看看怎么样创制自己的劳动,创造服务可以透过两种艺术,factory,provider和service,可是它们的五台山真面目都是Provider,只是封装了不同的写法而已。

  本文采纳factory的款式,如故是先成立一个模块,在模块的根基上成立一个Service(Service):

var myAppModule = angular.module("myApp",[]);

            myAppModule.factory('myService',['$http',function($http){
                var doRequest = function(username){
                    return $http({
                        method:'GET',
                        url:'data.json'
                    });
                }
                return {
                    userList:function(username){
                        return doRequest(username);
                    }
                }
            }]);

  分析下代码:

  这个Service(Service)需要注入一个特性 $http ,在模式内部,再次来到的值是一个对外提供的主意,userList。

  外部可以经过 userList(username) 的章程,举办调用。

  真正的实现部分放在 doRequest 中,内部就是第顶尖的一个AngularJS的$http请求了,请求会回去url相应的数码。

  然后看一下表面咋样利用,先看看视图部分:

        <div ng-controller="myAppCtrl">
            <label>username</label>
            <input type="text" ng-model="username" placeholder="输入"/>
            <pre ng-show="username">
                {{users}}
            </pre>
        </div>

  该有的是一个输入框input和一个代码框pre,他们同台采用了一个变量username。当username有值时,会在底下体现users对应的情节。

myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',
                function($scope,$timeout,myService){
                    var timeout;
                    $scope.$watch('username',function(newUserName){
                        console.log("您输入了:"+newUserName);
                        if(newUserName){
                            if(timeout){
                                $timeout.cancel(timeout);
                            }
                            timeout = $timeout(function(){
                                myService.userList(newUserName).success(function(data){
                                    console.log(data);
                                    $scope.users = data;
                                });
                            },350);
                        }
                    });
                }
            ]);

  在相应的控制器中,采纳了$watch这种监督措施,监控username属性的成形。当username属性变化时,会接触请求方法。

  控制器多注入了一个$timeout变量,该变量用于控制输入的岁月。代码观看$timeout(function(…),350);当输入的区间超过350ms时,就会触发相应函数function(…)。这样可以有效的预防,不停的基础代谢请求,造成网页的基础代谢抖动。

  在函数内部,调用了大家友好的劳务提供的userList方法。当呼吁成功时,绑定再次回到值到users中。users会动态的基础代谢内容。

  查看程序的言传身教结果:

AngularJS 4

  通过测试发现:当我们连忙的输入4321时,虽然$watch都监控到了变量的生成,不过只有截至时间超越350ms才会发送请求。

  全体的代码样例:

AngularJS 5AngularJS 6

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="myAppCtrl">
            <label>username</label>
            <input type="text" ng-model="username" placeholder="输入"/>
            <pre ng-show="username">
                {{users}}
            </pre>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.factory('myService',['$http',function($http){
                var doRequest = function(username){
                    return $http({
                        method:'GET',
                        url:'data.json'
                    });
                }
                return {
                    userList:function(username){
                        return doRequest(username);
                    }
                }
            }]);

            myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',
                function($scope,$timeout,myService){
                    var timeout;
                    $scope.$watch('username',function(newUserName){
                        console.log("您输入了:"+newUserName);
                        if(newUserName){
                            if(timeout){
                                $timeout.cancel(timeout);
                            }
                            timeout = $timeout(function(){
                                myService.userList(newUserName).success(function(data){
                                    console.log(data);
                                    $scope.users = data;
                                });
                            },350);
                        }
                    });
                }
            ]);
        </script>
    </body>
</html>

View Code

 

  关于自定义的服务,有下边几点需要小心:

  1 它的接纳情形:由于可以在劳动中抽取公共调用的主意,由此得以把六个控制器中同样的机能抽取出来,形成一个劳务。

  2 单例:服务都是单例的,一个用到生命周期内,只有一个劳动的实例存在。

  3 注入器:服务的实例化都是有注入器injector创设的。在我们创设controller控制器时,前边指明了特需注入一个my瑟维斯(Service)(Service)服务,注入器就会去实例化该服务。

  参考

  [1]
大漠穷求,慕课网:http://www.imooc.com/learn/156

相关文章