angular.js 为我们封装好了一个路由工具 ngRoute,靠url改变去驱动视图。
angularUI 也为我们封装了一个独立的路由模块 ui-router,它是一种靠状态 state 来驱动视图。
ui-router的优势是：一个页面可以嵌套多个视图,多个视图去控制某一个视图。
1.引入
安装了bower之后
在bower.json里加入ui-router依赖：
@H_404_12@"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
@H_404_12@<!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
@H_404_12@<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
@H_404_12@//tab1.html <h1> tab 1 </h1> //tab2.html <h1> tab 2 </h1> //tab3.html <h1> tab 3 </h1>(4)app.js
@H_404_12@//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区域显示的就是编译好的模板内容了。
