iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >AngularJS在路由中如何传递参数
  • 778
分享到

AngularJS在路由中如何传递参数

2024-04-02 19:04:59 778人浏览 八月长安
摘要

这篇文章主要介绍angularjs在路由中如何传递参数,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:我们不仅可以在控制器中直接定义属性的值,比如:app.controlle

这篇文章主要介绍angularjs在路由中如何传递参数,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

具体如下:

我们不仅可以在控制器中直接定义属性的值,比如:

app.controller('listController',function($scope){
  $scope.name="ROSE";
});

AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参:

<!--首页html-->
<li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >用户</a></li>
//js
.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/user/:age',{
        templateUrl:'list.html',
        controller:'listController'})
 }]);
<!--list.html-->
<div>
  <div>
  <h2>HI,这里是list.html</h2>
  <h3>{{name}}</h3>
  <h4>{{params.age}}</h4>
</div>
</div>

AngularJs提供了一种让首页视图中将“18”传递到list.html视图的方法。那就是将该实参放到视图路由地址后面。如这里的<li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >用户</a></li> 。然后在JS的when方法中声明该一个变量用来匹配该实参。但是该实参是作为一个“键值”保存在$routeParams (数组)里面,我们必须在控制符中注入它(所谓注入其实就是把他里面的属性和值都共享出来?)。然后在控制器中声明并赋值,(也即是取出来)。如下:

.controller('listController',function($scope,$routeParams){
  $scope.name="ROSE";
  $scope.params=$routeParams;
});

以上是“AngularJS在路由中如何传递参数”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!

--结束END--

本文标题: AngularJS在路由中如何传递参数

本文链接: https://www.lsjlt.com/news/78840.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • AngularJS在路由中如何传递参数
    这篇文章主要介绍AngularJS在路由中如何传递参数,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:我们不仅可以在控制器中直接定义属性的值,比如:app.controlle...
    99+
    2022-10-19
  • Spring Boot/VUE中如何实现路由传递参数
    这篇文章将为大家详细讲解有关Spring Boot/VUE中如何实现路由传递参数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在路由时传递参数,一般有两种形式,一种是拼接...
    99+
    2022-10-19
  • VUE怎么实现路由传递参数
    本篇内容介绍了“VUE怎么实现路由传递参数”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在路由时传递参数,一般有两种形式,一种是拼接在url...
    99+
    2023-07-04
  • vue中路由参数传递的示例分析
    这篇文章主要为大家展示了“vue中路由参数传递的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中路由参数传递的示例分析”这篇文章吧。首先我的路由的...
    99+
    2022-10-19
  • Angularjs如何为ng-click事件传递参数
    这篇文章给大家分享的是有关Angularjs如何为ng-click事件传递参数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在angularjs开发中,我们需要为ng-click...
    99+
    2022-10-19
  • React中路由的参数传递路由的配置文件详解
    目录路由的参数传递配置动态路由路由的配置文件路由的参数传递 传递参数有二种方式(需要注意的是, 这两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组...
    99+
    2022-11-13
    React路由参数传递 React路由配置文件 React路由 React路由参数
  • Flutter路由传递参数及解析实现
    上一篇Flutter页面路由及404路由拦截实现介绍了使用路由来实现页面的跳转,从而简化页面之间的耦合,并可以实现路由拦截。在实际开发中,我们经常会需要在页面跳转的时候携带路由参数...
    99+
    2022-11-12
  • AngularJS如何利用路由传值
    小编给大家分享一下AngularJS如何利用路由传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下 1.导包&nbs...
    99+
    2022-10-19
  • 关于vue中路由的跳转和参数传递,参数获取
    目录vue中的路由讲三点html中通过<router-link>指令完成路由跳转第一种情况就是以path形式第二种情况就是以路由对象Object的形式最后谈谈$route...
    99+
    2022-11-13
  • React路由参数传递与嵌套路由的实现详细讲解
    目录1. 页面路由参数传递1.1 动态路由参数1.2 search字符串1.3 页面参数隐式传递2. 嵌套路由1. 页面路由参数传递 1.1 动态路由参数 描述: 以“/...
    99+
    2022-11-13
  • vue嵌套路由中params传递参数的示例分析
    这篇文章主要介绍vue嵌套路由中params传递参数的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在嵌套路由中,父路由向子路由传值除了query外,还有params,par...
    99+
    2022-10-19
  • vue路由如何传参
    在vue中实现路由传参的方法有:1.通过params实现传参;2.通过query实现传参;3.调用$router.push实现传参;具体方法如下:通过params实现路由传参使用路由属性中的name来匹配路由,在通过params传递参数,但...
    99+
    2022-10-20
  • vue嵌套路由-query传递参数的示例分析
    这篇文章主要介绍了vue嵌套路由-query传递参数的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在嵌套路由中我们经常会遇到父路由...
    99+
    2022-10-19
  • Vue通过路由实现页面间参数的传递
    目录在Vue项目开发中,页面之间传递参数有很多种方法1.路由传递2.sessionStorage/localStorage缓存的形式进行传递3.父子组件之间的传值 4.使用...
    99+
    2023-05-17
    vue路由实现页面参数传递 vue页面参数传递 vue路由参数传递
  • React中如何实现路由传参
    这篇文章将为大家详细讲解有关React中如何实现路由传参,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props、事件回调、...
    99+
    2023-06-25
  • Vue中如何实现路由传参
    本篇文章给大家分享的是有关Vue中如何实现路由传参,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。情景模拟:A页面中,有一些div是根据A中的b...
    99+
    2022-10-19
  • 在mapper中如何传递多个参数
    这篇文章将为大家详细讲解有关在mapper中如何传递多个参数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在mapper中如何传递多个参数方法1:顺序传参法public&...
    99+
    2022-10-19
  • vue路由传参-如何使用encodeURI加密参数
    目录使用encodeURI加密参数比如参数是一个对象obj解密方式是使用decodeURIvue路由加密传参传参页面接收页面使用encodeURI加密参数 在路由切换时页面需要使用地...
    99+
    2022-11-13
  • react路由如何实现传参
    这篇文章主要介绍react路由如何实现传参,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!第一种传参方式,动态路由传参通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示...
    99+
    2023-06-14
  • Vue路由参数的传递与获取方式详细介绍
    目录前言1. 通过动态路由参数传递2. 通过query字符串传递3. props 隐式传递前言 vue 页面路由切换时传参的方式有如下几种: 动态路由参数 它隐藏字段信息,相对于来说...
    99+
    2022-11-13
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作