angularJS 服务二

$http服务

一 介绍

AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据。我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。

二 使用

1.链式调用

$http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。

返回一个promise对象:

var promise=$http({

method:‘GET‘,

url:"data.json"

});

由于$http方法返回一个promise对象,我们可以在响应返回时用then方法来处理回调。如果使用then方法,会得到一个特殊的参数,它代表了相应对象的成功或失败信息,还可以接受两个可选的函数作为参数。或者可以使用success和error回调代替。

promise.then(function(resp){

//resp是一个响应对象

},function(resp){

//带有错误信息的resp

});

或者这样:

promise.success(function(data,status,config,headers){

//处理成功的响应

});

promise.error(function(data,status,hedaers,config){

//处理失败后的响应

});

then()方法与其他两种方法的主要区别是,它会接收到完整的响应对象,而success()和error()则会对响应对象进行析构。

举例:

HTML部分:

<div ng-controller="myAppCtrl">

<label>username</label>

<input type="text" ng-model="username" placeholder="输入"/>

<pre ng-show="username">

{{users}}

</pre>

</div>

JS部分:

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

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);

}

});

}

]);

myAppModule.factory(‘myService‘,[‘$http‘,function($http){

var doRequest = function(username){

return $http({

method:‘GET‘,

url:‘data.json‘

});

}

return {

userList:function(username){

return doRequest(username);

}

}

}]);

在相同的路径下建立data.json:

[{

"name":"test1"

},{

"name":"test2"

},{

"name":"test3"

}]

在service部分,注入一个属性 $http ,在方法内部,返回的值是一个对外提供的方法,userList。 外部可以通过 userList(username) 的方式,进行调用。 真正的实现部分放在 doRequest 中,内部就是典型的一个AngularJS的$http请求了,请求会返回url相应的数据。

在对应的控制器中,采用了$watch这种监控方法,监控username属性的变化。当username属性变化时,会触发请求方法。 控制器多注入了一个$timeout变量,该变量用于控制输入的时间。代码观察$timeout(function(...),350);当输入的间隔超过350ms时,就会触发相应函数function(...)。这样可以有效的防止,不停的刷新请求,造成网页的刷新抖动。 在函数内部,调用了我们自己的服务提供的userList方法。当请求成功时,绑定返回值到users中。users会动态的刷新内容。

2.快捷的get请求

$http.get(‘/api/users.json‘);

get()方法返回HttpPromise对象。

3.也可以将$http当做函数来使用,这时需要传入一个设置对象,用来说明如何构造XHR对象。

$http({

method:‘GET‘,

url:‘/api/users.json‘,

params:{

‘username‘:‘tan‘

});

其中设置对象可以包含以下主要的键:

①method

可以是:GET/DELETE/HEAD/JSONP/POST/PUT

②url:绝对的或者相对的请求目标

③params(字符串map或者对象)

这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化。

//参数会转为name=ari的形式

$http({

params:{‘name‘:‘ari‘}

});

④data(字符串或者对象)

这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。

4.响应对象

angularJS传递给then()方法的响应对象包含了四个属性。

data :这个数据代表转换过后的响应体(如果定义了转换的话)

status :响应的HTTP状态码

headers :这个函数是头信息的getter函数,可以接受一个参数,用来获取对应名字值

时间: 2024-11-05 23:07:08

angularJS 服务二的相关文章

Angularjs总结 二

# Angularjs总结 二 # ---------- **控制器的含义:** AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能.用它来给作用域对象设置初始状态,并添加自定义行为. 当在页面上创建一个新的控制器时, AngularJS会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope.由于AngularJS会负责处理控制器的实例化过程,所以只需编写控制函数即可. function myController($scope) { $scop

angularjs笔记二

9.ng-repeat ng-repeat 指令用在一个对象数组上 比如: <div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <p>循环对象:</p> <ul> <li ng-repeat="x in

angularJS 指令二

指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};});该方法接受两个参数:name(字符串):指令的名字,用来在视图中引用特定的指令factory_function(函数):该函数返回一个对象,其中定义了指令的全部行为当AngularJS启动应用时,会把第一个参数当做一个字符串,并以此字符串为名来来注册第二个参数返回的对象.也可以返回一个函数代替对

AngularJS(二)

AngularJS 服务(Service)AngularJS 中你可以创建自己的服务,或使用内建服务. 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务.有个 $location 服务,它可以返回当前页面的 URL 地址. 1 var app = angular.module('myApp', []); 2 app.controller('customersCtrl', function($scope, $loc

Sharepoint2013搜索学习笔记之创建搜索服务(二)

第一步,进入管理中心,点击管理服务器上的服务 第二步,在服务器上选择需要承载搜索服务的服务器,并启动服务列表上的sharepoint server search 第三步,从管理中心进入管理服务应用程序 第四步,新建search service application 第五步,在弹出的新建窗口分别填好相应信息点击确定,主要注意的是 应用程序池可以选择已经有的,也可以自己填一个新的名称,选择填写新的之后,程序会在稍后新建一个应用程序池,一般推荐新建应用程序池. 默认情况,爬网组件会用配置好的搜索服务

AngularJS服务总结

在之前介绍AngularJS的博客中,简单的介绍了AngularJS提供的常用服务,以及如何自定义服务,具体可参见<AngularJS 服务(Service)>.在这一篇博客中,我将为大家详细介绍如何自定义服务,以及各种方式之间的区别. value(name, object) value(name, object)方法允许我们直接将一个普通值或对象作为服务.我们通过一段代码来看看如何使用: <!DOCTYPE html> <html> <head> <

angularjs 服务

内置服务 1.$timeout 2.$watch(obj,fun): fun(newVal,oldVal,scope) //newVal是新改变的值,oldVal是旧值 3.$destroy():作用域的销毁,如果子作用域不再有用了.那么子作用域的创建者就会负责用$destroy()来将它销毁.这回停止$digest再调用子作用域,并且让作用域占用的内容能够被回收. 内置函数: 1.dateFilter(time,format)//参数time是时间,format是格式化 angularjs 服

AngularJS学习之旅—AngularJS 服务(八)

1.AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务.2.什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. 注意 $location 服务是作为一个参数传递到 controller 中.如果要使用它,需要在 controller 中定义. var app = angular

5、SAMBA服务二:配置实例

①:SAMBA服务一:参数详解 ②:SAMBA服务二:配置实例 5.2.3.Samba共享目录配置实例 原文地址:https://www.cnblogs.com/-xuan/p/10542392.html