Angular1.5.8路由参数的使用-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Angular1.5.8路由参数的使用

简介: 在Angular 1.5.8中,经常会涉及到页面的跳转,很多页面的跳转都需要带参数,在JSP项目中,可以使用 window.location.href = 'http://hostname:port?param_1=xxx&param_2=xxx#/...

在Angular 1.5.8中,经常会涉及到页面的跳转,很多页面的跳转都需要带参数,在JSP项目中,可以使用
window.location.href = 'http://hostname:port?param_1=xxx&param_2=xxx#/path/a/b/c'的形式传参,再通过以下方式将参数设置到页面的全局变量中,在js代码获取全局的变量值

<c:forEach items="${requestScope.paramList}" var="paramObj">
     <input type="hidden" value="${paramObj['value']}" id="rootIndex_${paramObj['name']}" />
</c:forEach>

但这种方式,没办法很好地做到前后端分离

Angular提供了参数传递和接收的方法:

1. 路由配置

"index": "A140100231",
"name": "路由名称",
"key": "xxxxx",
"icon": "xxxxx",
"type": "$state",
"value": "xxxxx",
"path": "/a/b/c?param_1&param_2&param_3&param_4",
"href": "templates/report/bjk/mtcourse_order_grade_report.html",
"showMenu": "true",
"services": [
]

2. 路由跳转带参数

在父页面的Controller中,可以使用$state.go()方法进行路由跳转,跳转到子页面

// 声明控制器
angular.module('ework-ui').controller('xxxxxxController', [
  '$scope', // 注入$scope
  '$state', // 注入$state, 用于路由方面的控制
  ...
  // 其他注入的参数
  xxxxxxController
])
function xxxxxxController (
  $scope,
  $state,
  ...
  // 其他注入的参数
) {
  // ....
  // 其他业务逻辑
  
  // 路由跳转
  $state.go('路由名称', {
    param_1: 'value',
    param_2: 'value',
    param_3: 'value',
    param_4: 'value'
  })
}

3. 页面接收参数

在子页面中,可以用$stateParams接收路由中的参数

// 声明控制器
angular.module('ework-ui').controller('xxxxxxController', [
  '$scope', // 注入$scope
  '$stateParams', // 注入$stateParams, 用于获取路由参数
  ...
  // 其他注入的参数
  xxxxxxController
])
function xxxxxxController (
  $scope,
  $stateParams,
  ...
  // 其他注入的参数
) {
  // ....
  // 其他业务逻辑
  
  // 路由参数获取
  var param_1 = $stateParams.param_1
  var param_2 = $stateParams.param_2
  var param_3 = $stateParams.param_3
  var param_4 = $stateParams.param_4
  // ...
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章