ui-router

在AngularJS中，提供了一种内置的路由服务，ng-router，但该内置路由服务不能完成嵌套路由视图的开发，所以我们通常会使用angularUI提供的ui-router服务。

使用ui-router时，必须要在angularJS的库后再进行引入。

<script src="vendor/angular/angular.min.js" charset="utf-8"></script> 
<script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>

ui-view:该指令是将路由的视图展示到该标签内，不同的路由视图会将该标签内的内容替换掉

<div ui-view></div>

定义路由：
ui-router的定义方式与ng-router的方式大体相同，只是ui-router监控的是状态；
$stateProvider的state方法定义了路由的id和以JSON对象方式定义的路由地址、路由模板或路由模板地址和该路由使用的控制器

angular.module('app').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider.state('main',{
    url: '/main',  //路由路径
    templateUrl: 'view/main.html',  // 路由模板地址
    controller: 'mainCtrl'   //当前路由使用的控制器
})
// 当该无匹配路由时，自动跳转到main路由视图
$urlRouterProvider.otherwise('main');
}])

ui-router传参

当需要通过url地址传递参数时，只需在url属性的后加上/:参数名即可

$stateProvider.state('main',{
    url: '/main/:id',  //id为传递的参数
    templateUrl: 'view/main.html',
    controller: 'mainCtrl'  
})