文档章节

angularjs--$http服务及自定义service

孟飞阳
 孟飞阳
发布于 2016/12/11 08:19
字数 1246
阅读 26
收藏 0

$http的使用

  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查看结果:

  全部的代码展示:

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

  使用$http是很基本的内容,就不做过多的解释了。

  创建自己的Service服务

  接下来看看如何创建自己的服务,创建服务可以通过三种方式,factory,provider和service,但是它们的本质都是Provider,只是封装了不同的写法而已。

  本文采用factory的形式,仍然是先创建一个模块,在模块的基础上创建一个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需要注入一个属性 $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会动态的刷新内容。

  查看程序的演示结果:

  通过测试发现:当我们快速的输入4321时,虽然$watch都监控到了变量的变化,但是只有停止时间超过350ms才会发送请求。

  全部的代码样例:

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

  关于自定义的服务,有下面几点需要注意:

  1 它的使用场景:由于可以在服务中抽取公共调用的方法,因此可以把多个控制器中相同的功能抽取出来,形成一个服务。

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

  3 注入器:服务的实例化都是有注入器injector创建的。在我们创建controller控制器时,后面指明了需要注入一个myService服务,注入器就会去实例化该服务。

本文转载自:http://www.cnblogs.com/xing901022/p/4293451.html

共有 人打赏支持
孟飞阳
粉丝 206
博文 972
码字总数 544644
作品 5
朝阳
个人站长
私信 提问
  AngularJS中serivce,factory,provider的区别

一、service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别。This is where we'll start the twenty-five days ...

武文海
2015/04/29
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.7K
13
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

slot分发内容

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。 有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。 内容分发就是指混合父组件的内...

Carbenson
17分钟前
1
0
python开发入门

1.执行python文件 # python ./demo.py 2.Python ImportError: No module named 'requests'异常 解决方法: # pip install requests;...

硅谷课堂
18分钟前
1
0
官宣,PyTorch 1.0 稳定版本现已推出

简评:快来一起快乐地学习吧。 随着 PyTorch 生态系统和社区继续为开发人员提供有趣的新项目和教育资源,今天(12 月 7日)在 NeurIPS 会议上发布了 PyTorch 1.0 稳定版。研究人员和工程师现...

极光推送
31分钟前
1
0
对比理解adr,ldr指令

很多人在写简单的裸机代码或分析uboot时,常常遇到adr ldr指令。却分不清这2者的区别,今天就来谈谈adr与ldr指令。 参照韦老师的代码和Makefile写了test_adr.S: .text .globl _start _start...

天王盖地虎626
42分钟前
3
0
将spring boot 项目注册为Linux的服务

springboot 注册为Linux系统服务 springboot 注册为Linux系统服务

miaojiangmin
43分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部