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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
php结合js实现多条件组合查询
May 28 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 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使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
基于php编程规范(详解)
2017/08/17 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
理解JSON:3分钟课程
2011/10/28 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
pytorch中的transforms模块实例详解
2019/12/31 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
python右对齐的实例方法
2020/07/05 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
SQL SERVER面试资料
2013/03/30 面试题
计算机专业学生的自我评价
2013/12/15 职场文书
即兴演讲稿
2014/01/04 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
质量承诺书格式
2014/05/20 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
实习介绍信模板
2015/01/30 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis