angularJs---$http使用

1.$http 服务的使用

/*

* 前端主要负责界面的开发，界面上的数据则是通过与后台对接的接口请求得到。这就要用到网络请求。angular中就提供了一种

* 封装好了的服务——$http。

* 他的使用方式跟ajax非常相似，而且还提供了快捷访问方式。

* 1.$http 服务普通使用方式

*   使用格式：

*   var promise = $http({

*       url:地址值,

*       method:'Get'/'post'等,

*       params:{参数}

*   });

*   promise.success(function(data,status,header,config){ });

*   promise.error(function(data,status,header,config){ });

*   在那个控制器里面使用该服务要先在回调函数中注入改服务，就像控制器中要注入$scope这个子作用域一样。

*   服务接受一个参数，参数是一个对象，里面三个属性值，url和method这两个属性值必须要，参数可选。

*   【变量和参数】

*       （1）promise ：$http最终返回的是一个promise对象，该对象携带两个方法一个成功一个失败，即代表请求的成功与否。

*       （2）success、error：$http 返回对象的固定两个回调函数，在函数参数中依然有一个回调函数，这个回调函数有四个参数

*       （3）data：成功或者失败从后天返回的数据都包含在个变量中。

*       （4）status：请求状态，200 500等服务器返回的参数值。

*       （5）header：这个参数为一个函数，没用过。angularJs上解释是头部信息getter函数，接受一个参数，通过他就可以拿到参数的值。

*       （6）config：生成的请求所有配置，内容跟$http服务中的传入的参数一样，另有一些别的内容。可自己打断点查看。

*

*  2. $http 服务的快捷使用方式：

*      使用格式：

*       （1）$http.get(url,{params: 参数}).success(function(data,status,header,config){}).error(function(data,status,header,config){})

*       （2）$http.post(url,data,{params：参数}).success(function(data,status,header,config){}).error(function(data,status,header,config){})

*       实际应用上大部分为post请求，第一个参数为请求地址，第二个参数为请求数据。第三个参数为请求数据的参数。

* */

 

2.断点调试

    （1）在当前调试的浏览器上按F12或者鼠标右键点击检查（谷歌浏览器）有些浏览器为审查元素，还是F12好用。进入如下界面

 

    （2）点击source，右边会出现工程的相关代码文件， 点击打开要准备断点调试的js文件--->点击右边行号（行号会变成蓝色标签箭头，代表断点设置成功，再次点击则可以取消），如下所示：

    （3）断点打好之后，按F5刷新页面，代码会从头开始重新执行一遍，这时候会在断点出暂停。上图中的调到下一个断点的标志会变蓝，点击则会调到下一个断点，下一行标志也会变成黑色，这是时候把鼠标放在断点前的代码变量上可以看到变量的值。如下所示：

 

完整例子在附件中

 

代码：

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

myApp.controller("mainController",['$scope','$http',function ($scope,$http) {

/*数据地址支持get/post两种请求方式，新闻数据接口

* 挑选了一个传参数最简单的接口，

* 参数形式：{"type":"top"},

* 字段释义：type：类型；取值是固定的字符串：top(头条，默认),shehui(社会),guonei(国内),

* guoji(国际),yule(娱乐),tiyu(体育)junshi(军事),

* keji(科技),caijing(财经),shishang(时尚),

* */

$scope.url = "http://v.juhe.cn/toutiao/index?key=0e2569421e1e28441082a50c1518a893";

 

$scope.fromHttpData = {data:""};//接收请求到的数据

/*普通请求方式*/

/* var promise = $http({

url:$scope.url,

method:"GET",//这里可以换成POST，一样会成功请求数据

params:{"type":"shishang"}//这个type值可以换成上面提供的其他值

});

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

$scope.fromHttpData.data = angular.toJson(data);

});

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

alert("错了："+data);//浏览器跨域了，网络正常这句一般就不会执行了

});*/

 

 

// 快捷方式

/* var par = {type:"shehui"};

$http.post($scope.url,null,{params:par}).success(function (data) {//其他数据参数需要的就写在参数列表里，这里我只用返回的数据，就留一个参数

$scope.fromHttpData.data = angular.toJson(data);

}).error(function (data) {

alert("错了："+data);

});*/

 

var par = {type:"shishang"};

$http.get($scope.url,{params:par}).success(function (data) {//其他数据参数需要的就写在参数列表里，这里我只用返回的数据，就留一个参数

$scope.fromHttpData.data = angular.toJson(data);

}).error(function (data) {

alert("错了："+data);

});

 

}]);