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中修改参数的取值。

 
时间: 2024-12-26 06:48:15

angularjs ui-router传值的相关文章

Angularjs ui router,路由嵌套 父controller执行问题

路由路径设置:structured.text   :structured是第一层路由,text是第二层路由: 问题如下,当$state.transitionTo路由到第二层是,structured的controller也会执行一次,导致页面控件重新加载刷新. $state.transitionTo( "structured.text", { args : $stateParams }, { reload: false} ); 查了github看到 https://github.com/

Angularjs中UI Router全攻略

摘自:Angularjs中UI Router全攻略 温馨提示:想要了解 angular-ui-router的同学,从上往下读一遍,能带随着coding那就更好了,保证你对angular-ui-router基本全部掌握. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofi

[转]AngularJS 使用 UI Router 实现表单向导

本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单.这项技术可以用在你想要简化用户操作的大表单上. 我们看到这项技术已经应用在了许多的网页上.比如购物车,注册表单,入职流程以及许多多步表单,让用户更容易在线填写表单. 下面我们将构建它: 使用UI Rout

Angularjs中UI Router用法小记录

今天自己参考已有的项目代码学习了下UI Router的用法,写了个小demo,验证了下自己的想法,现把使用情况记录一下. 1.入口文件index.html,引入项目所需的js文件,标注ng-app,创建ui-view元素,为后面的嵌套做容器准备. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8">

ngRoute 和 ui.router 的使用方法和区别

在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比. ngRoute 使用方法 1) 引入 angular-route lib 无论是 ngRoute 还是 ui.router ,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入. 1 <script src="lib/angular-route.js"></sc

使用angularjs ui grid 动态加载列名

来个开场白吧: 我是做.net开发的,来到新公司后,缺一个前端开发,SO,我就不得不挠着头干活呀......之前也就写写js,jq,刚看到前端架构的时候一脸懵逼...心里就有三个字:什么鬼!什么angularjs,angularjs ui grid,bootstrap,阿西吧.. 木有办法,总不能又跳槽吧.熟悉了一两天业务和代码后,经理说:"开干!". 首先,做的第一个功能就是使用angularjs ui grid 动态加载列.(这里不得不吐槽一点,ui grid的官方文档实例太少了,

angular : $location &amp; $state(UI router)的关系

次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, oldUrl) { log("$locationChangeStart from " + oldUrl) log("$locationChangeStart to " + newUrl) }); 接着是 ui router $state $rootScope.$on(&q

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

AngularJS学习之 ui router

1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view=""></ui-view>/*login页面,dashboard.html将会嵌入此处*/ 3.在app.js页面设置 .config(function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise('/login')

AngularJS+ui.bootstrap实现图片轮播

原地址:http://blog.csdn.net/yateswang/article/details/47751477 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href=&qu