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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 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 adodb分页实现代码
2009/03/19 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
简述vue中的config配置
2018/01/23 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python time()的实例用法
2020/11/03 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
土木工程应届生求职信
2013/10/31 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
美术专业个人自我评价
2014/01/18 职场文书
七一建党节慰问信
2015/02/14 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
话题作文之关于呼唤
2019/11/29 职场文书