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

最新推荐文章于 2021-04-15 12:38:48 发布

小章鱼哥

最新推荐文章于 2021-04-15 12:38:48 发布

阅读量2.9k

点赞数

分类专栏： angular.js javascript

本文链接：https://blog.csdn.net/u014787301/article/details/51956363

版权

javascript 同时被 2 个专栏收录

107 篇文章 0 订阅

订阅专栏

angular.js

4 篇文章 0 订阅

订阅专栏

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

小章鱼哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular.js ui-route 可以实现路由嵌套

angular.js 为我们封装好了一个路由工具 ngRoute ,靠url改变去驱动视图。 angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图。ui-router的优势是：一个页面可以嵌套多个视图,多个视图去控制某一个视图。1.引入安装了bower之后在bower.json里加入ui-router依赖： "dependencies"
复制链接

扫一扫

专栏目录