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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
vue路由传参三种基本方式详解
Dec 09 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
基于PHP文件操作的详细诠释
2013/06/21 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python3 操作符重载方法示例
2017/11/23 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Django获取应用下的所有models的例子
2019/08/30 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python调用Redis的示例代码
2020/11/24 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
珍惜水资源建议书
2014/03/12 职场文书
环保建议书100字
2014/05/14 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js