Angular1.5.8路由参数的使用

在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
  // ...
}