Angular路由：ui-router

ui-router是AngularJs的一个客户端路由框架。AngularJs ngRoute模块中的路由是通过URL路由来管理视图的，ui-router则是通过状态(state)来管理视图，并且可以绑定路由和其它的行为。状态被绑定到命名、嵌套和并行视图，大大增强了视图管理的能力。

传统的路由ngRoute有以下缺点：

视图不能嵌套。
单个页面下不支持多个视图。
无法通过url进入到指定页面，必须通过路由进入。

安装ui-router

ui-router同ngRoute一样也是一个单独的模块，需要下载安装。可以去GitHub上下载：https://github.com/angular-ui/ui-router/tree/legacy。我是下载的release版本，直接将其保存至angular-ui-router.js文件中。然后在index.html页面中进行引用，记住要放在angular.js后面。

<script src="js/angular.js"></script>
<script src="js/angular-ui-router.js"></script>

添加模块依赖

在使用ui-router的模块中添加ui-router依赖，这样才能使用。

angular.module("app",[
    "ui.router"//添加ui-router模块依赖
]).config(["$stateProvider","$urlRouteProvider",function($stateProvider,$urlRouteProvider) {
    //在这里配置状态
}])

页面布局

1、嵌套的状态和视图

ui-router主要的用途就是用在嵌套的状态和视图中。首先需要在index.html页面中的body使用ui-view指令，它同ng-view类似都是为视图进行占位。关于ui-view指令具体请查看：ui-view指令详解，ui-sref是<a>标签专用的状态的连接指令，将a标签连接到某个状态。这样点击<a>标签的时候，就会自动跳转到相应的状态。关于ui-sref指令具体请查看：ui-sref指令详解。

<body ng-app="app">
<div ui-view></div>
<!-- 在这里添加导航 --> <a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body>

然后为状态"state1","state2"分别添加关联的视图page1.html和page2.html，并在视图中再一次使用了ui-view和ui-sref指令嵌套状态和视图。其实这个和在index.html添加ui-view是一样的操作，但我们成功的进行了状态和视图的嵌套。

//page1.html
<h1>State 1</h1>
<hr/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>

//page2.html
<h1>State 2</h1>
<hr/>
<a ui-sref="state2.list">Show List</a>
<div ui-view></div>

//page1Child.html
<h3>List of State 1 Items</h3>
<ul>
    <li ng-repeat="item in items">{{ item }}</li>
</ul>

//page2Child.html
<h3>List of State 2 Things</h3><ul>    <li ng-repeat="thing in things">{{ thing }}</li></ul>

状态配置

创建app.js文件，加入下面的代码，并在index.html中进行引用。在应用模块中我们通过$stateProvider和$urlRouterProvider对状态和路由进行配置。将状态，路由，视图和控制器很好的对应了起来。

//app.js
angular.module("app",[
    "ui.router",//添加ui-router模块依赖
    "controllers"//控制器模块
]).config(["$stateProvider","$urlRouterProvider",$urlRouterProvider) {
    //在这里配置状态
    $stateProvider
        .state('state1',{
            url: "/state1",            templateUrl: "views/page1.html"
        })
        .state('state1.list',{
            url: "/list",            templateUrl: "views/page1Child.html",            controller: "page1ChildController"
        })
        .state('state2',{
            url: "/state2",            templateUrl: "views/page2.html"
        })
        .state('state2.list',            templateUrl: "views/page2Child.html",            controller: "page2ChildController"
        });
    // 将未匹配的url重定向到state1状态中。
    $urlRouterProvider.otherwise("/state1");
}])

$stateProvdier和$urlRouterProvider是ui-router模块的两个服务，专门进行状态和路由配置。$stateProvider.state()方法进行状态配置，第一个参数是状态的名字，第二个参数是配置对象，重要的属性有url：路由名称，由自己命名，templateUrl：视图路径，controller：对应的控制器名称。具体请参考：$stateProvider详解。$rulRouterProvider类似于ngRoute的$routeProvider对$location.url()进行监视，发现变化后就匹配路由。具体请参考：$urlRouterProvider详解。

添加控制器

为了便于扩展，我们将控制器放入单独的模块中。创建controllers.js文件，加入下面的代码。然后在app.js中引用控制器模块。

angular.module("controllers",[])
        .controller("Page1Controller",["$scope",function($scope) {
    }])
    .controller("Page2Controller",function($scope) {
    }])
    .controller("page1ChildController",function($scope) {
        $scope.listItems = ["Tom","Jack","GAMELoft9"];
    }])
    .controller("page2ChildController",function($scope) {
        $scope.ListThings = ["robot","cat","icecream"];
    }]);

这样一个完整的嵌套视图路由就完成了。效果如下图所示：

完整的demo在：http://download.csdn.net/detail/gameloft9/9471247

2、多视图和命名视图

多视图和命名视图下面这篇文章已经讲的很好了，这里给出链接：http://bubkoo.com/2014/01/01/angular/ui-router/guide/multiple-named-views/。

参考文章：AngulerJS路由:ng-router与ui-router

原文链接：https://www.f2er.com/angularjs/149063.html