Angular路由传参方式和以及坑点

背景：

公司的项目是一个比较古老的系统，之前用的Angular、Bootstrap、Jquery混合一起研发的，一言难尽。

1. 最近有个小需求是让我在表格列表点击对应类型打开对应的路由页面。
2. 看代码的路由跳转是采用的 < a >标签，
3. 查看了资料这种路由跳转的传参方式要先在路由地址后面定义要接收的参数名：

.state("app.operate", {
			url: "/operate/:id", // 注意此时写入的接收的参数名
			controller: "operationBug".
		})

4. html页面路由跳转传参方式：

// 这样写有一个坑点，发布到测试环境的时候不知道为啥参数带不过去。

<a href="javascript:;"  ui-sref="app.operate({id: 123})">紧急发布</a>

换成go的路由跳转方式：

$scope.go = function(id) {
	$state.go('app.operate', {id: id}, {reload: true})
}

5. 接收参数的方式是：

 // 在控制器里先定义rootScope,然后就可以获取参数
 app.controller("operationBug", ["rootScope" , function ($rootScope) {
		console.log($rootScope.$stateParams.id)
	}])

坑点：

当不需要传参的时候路由跳转方式写法是：

<a href="javascript:;"  ui-sref="app.operate">紧急发布</a>

但是此时跳转路由会出现视频中的两次路由加载问题，引起两次页面的接口调用和渲染。

原因是： 路由跳转了两次，第一次是携带参数的跳转，第二次是不携带参数的跳转。

解决方案是： 改成携带参数的路由跳转，再次跳转对应的controller就不会执行两次了。

<a href="javascript:;"  ui-sref="app.operate({id: 123})">紧急发布</a>