今天总结一下 angularJS 传参的 3种方式：(配合 ui-router)
现在有两个页面，page1.html 和 page2.html， 现由 page1.html 向 page2.html 传递参数（name、age）
1）params: 传递静态参数 --> 应用场景：初始化传递 参数
第一步：在 路由中 进行配置，准备参数：
// *1. params 传递静态参数 .state('state2',{ url:"/page2", templateUrl: "views/page2.html", controller: 'page2Controller', params: { name:'jcy', age:'22' } })
第二步：page2Controller 中接收参数：
.controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){
// * 获取参数：
// $scope.paramsToPage2 = $stateParams;
// 或
$scope.paramsToPage2 = $state.params;
console.log($state.params);
}])
第三步：page2.html 中 应用参数：
<h1>Page2</h1> <hr/> <div> name：{{ paramsToPage2.name }} <br><br> age: {{ paramsToPage2.age }} <br><br> </div>
查看效果：
ok,成功；
2） ui-sref： 传递参数 --> 应用场景：点击页面上的 < a ui-sref="???"></a> 进行状态切换时，传递参数
第一步：page1.html 中配置 ，准备参数
<a ui-sref="state2{{name:'jcy', age:'22'}}">Page 2</a>
第二步：路由中配置，得到形式参数
说明一下： 在路由器中得到 形式参数，有三种方式
*1. 在 url 中，用形如 url: "/page2/:name/:age" 的方式
*2. 在 url 中，用形如 url:"/page2/{name}/{age}" 的方式
*3. 不在 url 中 配置接收形参的方式，取而代之，有 params 中，用 形如 params: {"name": null, "age":null} 的方式 ，声明 欲接收的 参数名；
重点 提一下，params 中声明的参数 的 key值，一定要与 ui-sref 中欲传递的参数 key值 相同；
// *2. 应用 ui-sref形式 传参，在 router 中的 3种配置方式 .state('state2',{ // url: "/page2/:name/:age", // 方式一: 会在地址栏 显示参数 // url:"/page2/{name}/{age}", // 方式二: 会在地址栏 显示参数 url:"/page2", // 方式三： 不会在地址栏里 显示参数， // 但是 必须在 params 中定义 与参数 key值 相同的同名变量 templateUrl: "views/page2.html", controller: "page2Controller", params: {"name": null, "age":null} // 配合 方式三，使用; (值不一定 非得是 null, 是什么都可以，只要key值不变，value都会被传过来的值 覆盖) })
第三步：page2Controller 中接收参数：
.controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){
// * 获取参数：
// $scope.paramsToPage2 = $stateParams;
// 或
$scope.paramsToPage2 = $state.params;
console.log($scope.paramsToPage2);
}])
第四步：page2.html 中 应用参数：
<h1>Page2</h1> <hr/> <div> name：{{ paramsToPage2.name }} <br><br> age: {{ paramsToPage2.age }} <br><br> </div>
查看效果：
ok,成功；
3） $state.go() 传递参数 -->应用场景：在 应用逻辑中进行 状态切换
举例： page1.html 中有个 button 按钮，注意, 不是 ui-sref 形式的按钮，just only a normal button，点击 button 实现 状态切换的效果
第一步：page1.html 中 的 html
<!-- 传递 两个参数：arg1为name, arg2为age -->
<button ng-click="toPage2('jcy','22')">Page 2</button>
第二步： 路由配置
.state('state1',{
url:"/page1",
templateUrl: "views/page1.html",
controller: 'page1Controller'
})
.state('state2',{
url:"/page2",
templateUrl: "views/page2.html",
controller: "page2Controller",
params: {"name": null, "age":null}
})
第三步：page1Controller 中 书写逻辑
.controller('page1Controller', ['$scope', '$state', function($scope, $state){
// * 传递参数：
// $state.go( state, {arg1:xxx, arg2；xxx, .....} ) 形式传递参数
// $state.go() 接收两个参数；第1个 ：是要切换到的 state; 第2个：是要传递的参数；
$scope.toPage2 = function(arg1, arg2){
$state.go('state2', {'name': arg1, 'age': arg2}); // 传递的参数 key值，一定要与 模板为page2.html的路由中的 params 中的参数 key 值相同
}
}])
第四步：page2Controller 中 接收参数
.controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){
// * 获取参数：
// $scope.paramsToPage2 = $stateParams;
// 或
$scope.paramsToPage2 = $state.params;
console.log($scope.paramsToPage2);
}])
第五步：page2.html 中 应用参数：
<h1>Page2</h1>
<hr/>
<div>
name：{{ paramsToPage2.name }} <br><br>
age: {{ paramsToPage2.age }} <br><br>
</div>
查看效果：
ok，打完收工；
个人总结，转载请注明出处， 谢谢；