angularJS1 url中携带参数的获取方法


Posted in Javascript onOctober 09, 2018

index.html 从此界面跳转到a.html界面

<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>form demo</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="js/angular.min.1.6.0.js"></script>
  </head>

  <body ng-app="app" ng-controller="myctrl">

    <button ng-click="jump()" >点击跳转下一页</button>
    <br /><br />
    <a ng-href="a.html?name=xie&age=25&gender=nv" rel="external nofollow" >点击跳转下一页</a>
    </div>
  </body>

  <script>
    var app = angular.module('app', []);
    app.controller('myctrl', function($scope, $window) {
      $scope.jump = function() {
        $window.location.href = 'a.html?name=xie&age=25&gender=nv';
      }
    });
  </script>

</html>

a.html 跳转到的目标界面,在此界面获取url携带的参数:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <script src="js/angular.min.1.6.0.js"></script>
    <title></title>
  </head>
  <body ng-app="myapp" ng-controller="myctrl" >
    <p>a.html</p>


  </body>
  <script>
  //Url="http://168.33.222.69:8020/angularjs_demo/a.html?name=xie&age=25&gender=nv";
    var app=angular.module("myapp",[]);
    app.config(['$locationProvider', function($locationProvider) { 
     // $locationProvider.html5Mode(true); 
     $locationProvider.html5Mode({
     enabled: true,
     requireBase: false
    });
    }]);


    app.controller('myctrl', function($scope, $location) {


     console.log($location.search().name);
     console.log($location.search().age);
     console.log($location.search().gender);

    }); 

//打印结果:
//[Web浏览器] "xie" 
//[Web浏览器] "25" 
//[Web浏览器] "nv" 


  </script>
</html>

以上这篇angularJS1 url中携带参数的获取方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
对javascript继承的理解
Oct 11 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
AngularJS $http post 传递参数数据的方法
Oct 09 #Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 #Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 #Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 #Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 #Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 #Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 #Javascript
You might like
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
原生js实现水平方向无缝滚动
2017/01/10 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
使用JS动态显示文本
2017/09/09 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
详解Python中dict与set的使用
2015/08/10 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
医学生自荐信范文
2013/12/03 职场文书
读书小明星事迹材料
2014/05/03 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers