angularjs ui-router传值
Posted 甜甜圈儿
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs ui-router传值相关的知识,希望对你有一定的参考价值。
首先我们了解一下ui-router.
ui-router引入状态机制,将路由抽象概括成一个个的状态。其中状态里包含多种属性 state,url,params等多种内容。
state:当前路由所处的状态
url:当前路由对应的url正则路径
params:传递的参数
当然了还有views,templates,abstract等属性,但由于和传参无关,因此不再介绍。
在ui-router中,state可以映射对应url,同样的url也可以映射到state。我们考虑的无非是使用
url或者state传值。
$stateProvider .state(‘home‘,{ url:‘/home‘, params: ‘‘ } )
如上所示案例,当前state是home,url地址是/home。
1、url传值
url:‘/home/:userID‘,
url:‘/home/{userID}‘
常见方法有:param或者{param}两种方式。如当我们设置url ‘/home/235’时,可以获取userID=235的参数信息。
2、state传值
ui-sref=‘home({userID:235})‘
$state.go(‘home‘,{userID:235})
常见的state传值的有以上两种,也可以归为一种,只是表面形式看起来不同而已。
url传值,state传值 个人感觉最大的区别时在于跳转的情境中。
如a页面将参数A传递到b页面,state传值想要正常打开b页面,只能从a页面进入,或者说从a页面的状态进入,否则便获取不到A参数。然而url传值则可以 不经过A页面直接获取到参数A。
3、params传参
我们也可以直接定义params里的参数列表
params:{
userID:XXX
}
但是此种传参的方法局限性比较大,适合需要设置初始化值的参数,后续可以在controller中修改参数的取值。
以上是关于angularjs ui-router传值的主要内容,如果未能解决你的问题,请参考以下文章
尽管ui-route和provider似乎工作正常,但我无法在angularjs中加载视图......这是一段代码
angularJS中的ui-router和ng-grid模块
为啥这个 angularjs ui-router 代码会使我的浏览器崩溃?
AngularJS:ui-router解析后无法访问控制器中的变量