reloadOnSearch：boolean，如果为false，那么当一个search/query参数改变时不会触发相同的状态，用于当你修改$location.search()的时候不想重新加载页面。默认为true。
data：object，任意对象数据，用于自定义配置。继承父级状态的data属性。换句话说，通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。
params：url里的参数值，通过它可以实现页面间的参数传递。
ui-sref
一种将链接（<a>标签）绑定到一个状态的指令。点击该链接将触发一个可以带有可选参数的状态转换。
代码：
<a ui-sref="app.index">首页</a> <!-- 这里是正常的跳转 --> <a ui-sref="app.index({id:yourId})">你的主页</a> <!-- 这里是带参数对象的跳转，名称是id，值是yourId -->
简单的使用代码(ui-router的单视图)：
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <ol> <li><a ui-sref="app">app</a></li> <li><a ui-sref="test">test</a></li> </ol> <div ui-view></div> <script type="text/ng-template"> this is page 1 for app. </script> <script type="text/ng-template"> this is page 1 for test. </script> </div>
angular.module('Demo', ['ui.router']) .config(["$stateProvider","$urlRouterProvider",routeConfig]) .controller("testCtrl", angular.noop) function routeConfig($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise("/app"); $stateProvider .state("app",{ url:"/app", templateUrl:"'page1.html'" }) .state("test",{ url:"/test", templateUrl:"'page3.html'" }) }
使用代码(ui-router的多视图)：
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <ol> <li><a ui-sref="app.page1">app</a></li> <li><a ui-sref="test.page1({id:1})">test</a></li> </ol> <div ui-view></div> <script type="text/ng-template"> <div ui-view="nav@"></div> <div ui-view></div> </script> <script type="text/ng-template"> <ol> <li><a ui-sref="app.page1">app.page1</a></li> <li><a ui-sref="app.page2">app.page2</a></li </ol> </script> <script type="text/ng-template"> <ol> <li><a ui-sref="test.page1({id:1})">test.page1</a></li> <li><a ui-sref="test.page2">test.page2</a></li </ol> </script> <script type="text/ng-template"> this is page 1 for app. </script> <script type="text/ng-template"> this is page 2 for app. </script> <script type="text/ng-template"> this is page 1 for test. </script> <script type="text/ng-template"> this is page 2 for test. </script> </div>
angular.module('Demo', ['ui.router']) .config(["$stateProvider","$urlRouterProvider",routeConfig]) .controller("testCtrl", angular.noop) function routeConfig($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise("/app/page1"); $stateProvider .state("app",{ url:"/app", views:{ "":{ templateUrl:"'layout.html'" }, "nav":{ templateUrl:"'nav1.html'" } } }) .state("app.page1",{ url:"/page1", templateUrl:"'page1.html'" }) .state("app.page2",{ url:"/page2", templateUrl:"'page2.html'" }) .state("test",{ url:"/test", views:{ "":{ templateUrl:"'layout.html'" }, "nav":{ templateUrl:"'nav2.html'" } } }) .state("test.page1",{ url:"/page1?:id", templateUrl:"'page3.html'", controller:["$stateParams",function($stateParams){ console.log($stateParams.id);// 1 这里实现传参 }], params:{ id:null } }) .state("test.page2",{ url:"/page2", templateUrl:"'page4.html'" }) }
注意：需要引入angular-ui-router[.min].js