您的位置：首页 > 产品设计 > UI/UE

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

2016-07-19 15:35 609 查看

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区域显示的就是编译好的模板内容了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航