Angular的$http与$location


Posted in Javascript onDecember 26, 2016

$http

但是对于一个web应用,angular是如何同服务端进行交互获得数据的呢?

<script type="text/javascript">
  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$http',function($scope,$http){
    $http({
      method : 'GET',
      url : 'http/data.php',
    }).success(function(data,state,headers,config){
      console.log(data,state,headers(),config);
    }).error(function(data){
      console.log(data);
    });
  }]);
</script>

用过JQ的同学一看就知道了,我们重点看看success回调的参数。(别忘了我们需要controller上引入http的模块)

data:後端返回给我们的数据。

state:http状态码

headers:http头信息

config:ajax的配置信息 

我们还可以更简单的来使用get和post。

//get
$http.get('http/data.php').success(function(data,state,headers,config){
  console.log(data);
}).error(function(data){
  console.log(data);
});

//post
$http.post('http/data.php',{
  name : 'xiecg',
  age : 18
}).success(function(data,state,headers,config){
  console.log(data);
}).error(function(data){
  console.log(data);
});

 上面都很简单。

下面我们来看看如何用angular来实现跨域(百度搜索关键词补全)。

<div ng-controller="Aaa">
  <input type="text" ng-model="name" ng-keyup="change(name)">
  <input type="button" ng-click="change(name)" value="搜索">
  <ul>
    <li ng-repeat="d in data">{{d}}</li>
  </ul>
</div>

<script type="text/javascript">
  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
    var timer = null;
    $scope.data = [];
    $scope.change = function(name){
      $timeout.cancel(timer);
      timer = $timeout(function(){
        $http({
          method : 'JSONP',
          url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK',
        }).success(function(data,state,headers,config){
          console.log(data);
          $scope.data = data.s;
        }).error(function(data){
          console.log(data);
        });
      },500);
    };
  }]);
</script>

我们分别添加了两个事件ng-keyup以及ng-click来传入用户需要搜索的关键词,为了考虑性能我们使用定时器延迟500毫秒执行change方法。

Angular的$http与$location

$location

<script type="text/javascript">

  var m1 = angular.module('myApp',[]);
  m1.controller('Aaa',['$scope','$location',function($scope,$location){
    var absUrl = $location.absUrl();  //URL地址
    
    //$location.path('aaa').replace();  //禁止历史管理
    var path = $location.path();    //文件路径,路由
    
    //$location.hash('hello');      //设置哈希值
    //$location.search({'age' : '19'});  //设置数据
    var hash = $location.hash();

    var url = $location.url();      //数据

    var host = $location.host();    //主机名

    var port = $location.port();    //端口号

    var protocol = $location.protocol();//协议

    console.log(protocol);

  }]);

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
有关Promises异步问题详解
Nov 13 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 #Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 #Javascript
Angular路由简单学习
Dec 26 #Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 #Javascript
Angular工具方法学习
Dec 26 #Javascript
angular双向绑定模拟探索
Dec 26 #Javascript
jquery Banner轮播选项卡
Dec 26 #Javascript
You might like
解析数组非数字键名引号的必要性
2013/08/09 PHP
onpropertypchange
2006/07/01 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
javascript基本类型详解
2014/11/28 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
django站点管理详解
2017/12/12 Python
Python决策树分类算法学习
2017/12/22 Python
详解Django中间件执行顺序
2018/07/16 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
参观监狱心得体会
2014/01/02 职场文书
电工工作职责范本
2014/02/22 职场文书
新闻报道策划方案
2014/06/11 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
高效课堂教学反思
2016/02/24 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
python使用torch随机初始化参数
2022/03/22 Python