angularjs ui-view多视口多层嵌套路由配置
最近研究了一下ui-view多层嵌套，整理了一下
1.最简单的ui-view用法
html部分：
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">首页</a></li>
<li ui-sref-active="active"><a ui-sref="news">新闻</a></li>
<li ui-sref-active="active"><a ui-sref="center">个人中心</a></li>
</ul>
<div class="wrap" ui-view></div>
路由配置：
var app = angular.module('myApp',["ui.router"]);
app.config(["$stateProvider","$urlRouterProvider", function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("home", {
url: '/home',
templateUrl:'template/home.html',
controller:'homeCtrl'
})
.state("news", {
url: '/news',
templateUrl:'template/news.html',
controller:'newsCtrl'
})
.state("details",{
url:'/news/details',
templateUrl:'template/newsDetails.html',
controller:'detailsCtrl'
})
.state("center", {
url: '/center',
templateUrl:'template/setCenter.html',
controller:'centerCtrl'
});
$urlRouterProvider.otherwise('/home');
}]);
2.多视口
html部分：
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="home">首页</a></li>
<li ui-sref-active="active"><a ui-sref="home.news">新闻</a></li>
<li ui-sref-active="active"><a ui-sref="home.center">个人中心</a></li>
</ul>
<div class="warp">
<div class="main" ui-view="home"></div>
<div class="left" ui-view="left"></div>
<div class="right" ui-view="right"></div>
</div>
路由配置：
var app = angular.module('myApp',["ui.router","ui.bootstrap"]);
app.config(["$stateProvider","$urlRouterProvider", function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("home", {
url: '/home',
views:{
'home':{template:"<div class='body' ui-view='body'></div><div class='footer' ui-view='footer'></div>"},
'left':{template:"<span>left</span>"},
'right':{template:"<span>right</span>"},
'body@home':{templateUrl:'template_views/home.html'},
'footer@home':{template:"<span>首页底部</span>"}
}
})
.state('home.news',{
url:'/news',
views:{
'body@home':{templateUrl:'template_views/news.html'},
'footer@home':{template:"<span>新闻底部</span>"}
}
})
.state('home.newsDetails',{
url:"/news/details/:id",
views:{
'body@home':{
template:"<span>新闻详情</span>",
controller:function ($stateParams) {
alert('id:'+ $stateParams.id);
}
},
'footer@home':{template:"<span>新闻详情底部</span>"}
}
})
.state('home.center',{
url:'/center',
views:{
'body@home':{templateUrl:'template_views/setCenter.html'},
'footer@home':{template:"<span>个人中心底部</span>"}
}
});
$urlRouterProvider.otherwise('/home');
}]);
这里需要注意的是路由传参，这里把news.html内容贴出来
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="0" heading="推荐">
<div style="width: 100%;height: 500px;background-color:pink;">
<span class="mouseHand btn" ui-sref="home.newsDetails({id:1})">Justified content</span>
</div>
</uib-tab>
<uib-tab index="1" heading="热点">
<div style="width: 100%;height: 500px;background-color:#b9def0;" ui-sref="home.newsDetails({id:2})">Short Labeled Justified content</div>
</uib-tab>
<uib-tab index="2" heading="股票">
<div style="width: 100%;height: 500px;background-color:darkcyan;" ui-sref="home.newsDetails({id:3})">Long Labeled Justified content</div>
</uib-tab>
</uib-tabset>
ui-sref="home.newsDetails({id:1})"这样跳转的时候就把id传给了新闻详情；在新闻详情的控制器里就可以通过$stateParams.id得到传过来的id
3.多层ui-view嵌套
写了一个小demo，首先看一下结构
myExercise.html代码：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="lib/angular.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="lib/jquery-1.12.3.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/ocLazyLoad-master/dist/ocLazyLoad.js"></script>
<script src="js/myConfig.js"></script>
<script src="js/contentCtrl.js"></script>
<link rel="stylesheet" href="lib/bootstrap.css">
<link rel="stylesheet" href="css/base.css">
<title>ui-view三层嵌套</title>
</head>
<body>
<div ui-view class="wrap"></div>
</body>
</html>
ocLazyLoad.js是用来分步加载js,css等文件的，后面可以再路由配置里看到具体用法，有了这个对于项目初次加载的速度有很大提升，但是不需要的这里也可以不必引入； js文件夹结构
前两个控制器都是空的，没写什么逻辑就不展示了，先看一下myConfig.js，路由配置（多层嵌套精髓都在这里啦）：
var app = angular.module('myApp',["ui.router","oc.lazyLoad"]);
app.config(function ($stateProvider,$locationProvider, $urlRouterProvider,$ocLazyLoadProvider) {
$stateProvider
.state('content',{
url: '/',
views:{
"":{
template: '<div ui-view="header"></div><div ui-view="body"></div>',
controller:'contentCtrl'
},
"header@content":{templateUrl: 'myTemplate/header.html'}
}
})
.state('content.home',{
url:'home',
views:{
"body@content":{
templateUrl:'myTemplate/home.html',
controller:'homeCtrl'
}
},
resolve:{
deps: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load([
'js/homeCtrl.js',
'css/home.css'
]);
}]
}
})
.state('content.news',{
url:'news',
views:{
"body@content":{template:'<div ui-view></div>'}
}
})
.state('content.news.list',{
url:'/list',
templateUrl:'myTemplate/news.html'
})
.state('content.news.list.recommend',{
url:'/recommend',
templateUrl:'myTemplate/news-list-recommend.html'
})
.state('content.news.list.hot',{
url:'/hot',
templateUrl:'myTemplate/news-list-hot.html'
})
.state('content.news.list.sport',{
url:'/sport',
templateUrl:'myTemplate/news-list-sport.html'
})
.state('content.news.details',{
url:'/details/:type/:id',
templateUrl:'myTemplate/news-details.html',
controller:'newsDetailCtrl',
resolve:{
deps: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load([
'js/newsDetailCtrl.js',
'css/newsDetail.css'
]);
}]
}
})
.state('content.news.details.comment',{
url:'/details/comment',
templateUrl:'myTemplate/news-detail-comment.html'
})
.state('content.about',{
url:'about',
views:{
"body@content":{templateUrl:'myTemplate/about.html'}
}
});
$urlRouterProvider.otherwise('home');
});
结合路由配置，看一下template模板代码：
首先是header.html
<ul class="nav nav-tabs">
<li role="presentation" class="active" ui-sref-active="active"><a ui-sref="content.home">Home</a></li>
<li role="presentation" ui-sref-active="active"><a ui-sref="content.news.list.recommend">News</a></li>
<li role="presentation" ui-sref-active="active"><a ui-sref="content.about">About</a></li>
</ul>
news.html
<ul class="nav nav-tabs">
<li role="presentation" class="active" ui-sref-active="active"><a ui-sref="content.news.list.recommend">推荐</a></li>
<li role="presentation" ui-sref-active="active"><a ui-sref="content.news.list.hot">热门</a></li>
<li role="presentation" ui-sref-active="active"><a ui-sref="content.news.list.sport">体育</a></li>
</ul>
<div ui-view></div>
news-details.html
<span>{{type}}:新闻详情</span>
<a ui-sref=".comment">查看评论</a>
<div ui-view></div>
<!--news-list-recommend.html-->
<div>
推荐列表
<a ui-sref="^.^.details({type:'recommend',id:2})">点击查看新闻详情,通过相对路径跳转</a>
</div> <!--news-list-hot.html-->
<div>
热门列表
<a ui-sref="content.news.details({type:'hot',id:5})">点击查看新闻详情，通过绝对路径跳转</a>
</div> <!--news-list-sport.html-->
<div>
体育列表
<a ui-sref="content.news.details({type:'sport',id:7})">点击查看新闻详情</a>
</div>
模板就展示这几个了，其它的都是随便写的text文字了，随便写点东西就行，到这里就差不多完成了.
接下来展示一下newsDeatilCtrl.js
angular.module('myApp').controller('newsDetailCtrl',['$scope','$stateParams',function ($scope,$stateParams) {
$scope.type = $stateParams.type;
}]);
这里通过$stateParams来接收路由跳转传过来的参数。
好啦，到这里就大功告成了。
angularjs ui-view多视口多层嵌套路由配置的更多相关文章
- 使用ui-route实现多层嵌套路由
一.预期实现效果: https://liyuan-meng.github.io/uiRouter-app/index.html (项目地址:https://github.com/liyuan-meng ...
- VUE router-view 页面布局 （嵌套路由+命名视图）
嵌套路由 实际生活中的应用界面,通常由多层嵌套的组件组合而成.同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如: /user/foo/profile /user/foo/posts ...
- vue嵌套路由总结
嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一 ...
- vue路由-动态路由和嵌套路由
一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...
- vue嵌套路由 && 404重定向
第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...
- vue嵌套路由与404重定向实现方法分析
第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rout ...
- 07. vue-router嵌套路由
嵌套路由用法 1.嵌套路由功能分析 点击父级路由链接显示模板内容 模板内容中又有子级路由链接 点击子级路由链接显示子级模板内容 2.父路由组件模板 父级路由链接 父组件路由填充位 <p> ...
- AngularJS 的嵌套路由 UI-Router
AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...
- AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
随机推荐
- 爬虫常用库之pyquery 库
pyquery库是jQuery的Python实现,可以用于解析HTML网页内容,我个人写过的一些抓取网页数据的脚本就是用它来解析html获取数据的.他的官方文档地址是:http://packages. ...
- C# 程序运行中的流程控制
1.C#之流程控制语句:计算机程序执行的控制流程由三种基本的控制结构控制,即顺序结构,选择结构,循环结构. 1) 顺序结构:从上到下,按照书写顺序执行每一条语句,不会发生跳跃. 代码段1; // 先执 ...
- WebDriverAPI（4）
单击某个元素 采用元素id.click()方法即可 双击某个元素id.doubleClick 操作单选下拉列表 测试网页HTML代码 <html> <body> <sel ...
- centos 7 初始化脚本
#!/bin/bash # 时间: 2018-11-21 # 作者: HuYuan # 描述: CentOS 7 初始化脚本 # 加载配置文件 if [ -n "${1}" ];t ...
- Docker容器(三)
一.创建容器 容器是Docker另一个核心的概念,简单来说,容器是镜像的一个运行实例,所不同的是,镜像是静态的只读文件,而容器带有运行时需要的可写文件层 1.1. 新建容器 使用docker crea ...
- shell脚本批量部署ssh
日常运维工作中,需要给几十上百台服务器批量部署软件或者是重启服务器等操作, 这样大量重复性的工作一定很苦恼,本文给大家提供了最基本的批量操作的方法,虽然效率不高,对于初学者来说还是好理解.由于刚开始学 ...
- spring boot整合RabbitMQ（Direct模式）
springboot集成RabbitMQ非常简单,如果只是简单的使用配置非常少,springboot提供了spring-boot-starter-amqp项目对消息各种支持. Direct Excha ...
- [转] 用协议分析工具学习TCP/IP
一.前言 目前,网络的速度发展非常快,学习网络的人也越来越多,稍有网络常识的人都知道TCP/IP协议是网络的基础,是Internet的语言,可以说没有TCP/IP协议就没有互联网的今天.目前号称搞网的 ...
- 深入理解Java虚拟机：第2章 Java内存区域与内存溢出异常
目录 2.2 运行时数据区域 Java堆 方法区 虚拟机栈 本地方法栈 程序计数器 2.3 HotSpot虚拟机对象探秘 对象的创建 对象的内存布局 对象的访问定位 2.2 运行时数据区域 Jav ...
- 剑指offer63：数据流中的中位数
题目描述: 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值. ...