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编程起步(第七课)
Feb 27 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
获取body标签的两种方法
Oct 13 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
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容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
python字符串下标与切片及使用方法
2020/02/13 Python
python和c语言哪个更适合初学者
2020/06/22 Python
python request 模块详细介绍
2020/11/10 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
触摸春天教学反思
2014/02/03 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python