angular.js ui-route 可以实现路由嵌套

angular.js 为我们封装好了一个路由工具 ngRoute,靠url改变去驱动视图。
angularUI 也为我们封装了一个独立的路由模块 ui-router,它是一种靠状态 state 来驱动视图。

ui-router的优势是：一个页面可以嵌套多个视图,多个视图去控制某一个视图。

1.引入

安装了bower之后

在bower.json里加入ui-router依赖：

"dependencies": {
    "angular": "~1.2.12-build.2226","angular-route": "~1.2.12-build.2226"
  }

命令行运行 bower install

就成功安装了ui.route

2.目录结构

main.html
mainTab.html
tab1.html
tab2.html
tab3.html
app.js

(1)main.html

<!DOCTYPE html>
<html>
<head lang="en">
    <Meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="myApp">
    <h1>首页</h1>
    <div ui-view=""></div>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

定义一个angular模块：myApp
留一个div里面放置视图。用ui-view告诉ui.route插件这里要显示视图。

(2)mainTab.html

<div>
    <span><a ui-sref=".tab1" href="">tab 1</a></span>
    <span><a ui-sref=".tab2" href="">tab 2</a></span>
    <span><a ui-sref=".tab3" href="">tab 3</a></span>
</div>
<div>
    <div ui-view=""></div>
</div>

三个基本标签，给他们href属性，让他们可点击。
分别添加ui-sref属性，告知ui.route要路由的状态。
并在底部添加一个div区，用来显示加载进来的视图。

main页为mainTab预留ui-view视图，mainTab为tab1,tab2,tab3预留视图，实现了路由嵌套。

(3)tab1.html tab2.html tab3.html

//tab1.html
<h1>  tab  1  </h1>
//tab2.html
<h1>  tab  2  </h1>
//tab3.html
<h1>  tab  3  </h1>

(4)app.js

//main主页的模块myApp依赖模块ui.router
var app=angular.module('myApp',['ui.router']);
app.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider){
    //默认路由到mainTab
    $urlRouterProvider.when('','/mainTab');
    $stateProvider.state('mainTab',{
        url: '/mainTab',templateUrl: 'mainTab.html'
        //mainTab.tab1 即mainTab/tab1 二级嵌套
    }).state('mainTab.tab1',{
            url: '/tab1',templateUrl: 'tab1.html'
    }).state('mainTab.tab2',{
        url: '/tab2',templateUrl: 'tab2.html'
    }).state('mainTab.tab3',{
        url: '/tab3',templateUrl: 'tab3.html'
    })
}]);

3.运行

tab切换时触发ui-router的路由，ui-router会通过配置好的路由规则找寻相应的模板配置(这里假设我们路由配置的都是templateUrl的方式)，得到url后会去发起ajax请求拿模板，拿到模板再会填充到ui-view内容区，最后做compile、link处理(省去其他细节)，这时候ui-view区域显示的就是编译好的模板内容了。

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