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 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
js实现右键菜单功能
Nov 28 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 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
4.与数据库的连接
2006/10/09 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
PHP代码加密的方法总结
2020/03/13 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
美容师的职业规划书
2013/12/27 职场文书
英文推荐信格式范文
2014/05/09 职场文书
小学数学教研活动总结
2014/07/01 职场文书
委托书的写法
2014/09/16 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
运动会1000米加油稿
2015/07/21 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
德生BCL3000抢先使用感受和评价
2022/04/07 无线电