UI-Router被认为是AngularUI为开发者提供的最实用的一个模块，它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染，而不是仅仅只改变路由（传统AngularJS应用实用的方式）。该模块为开发者提供了很多最视图（view）额外的控制。开发者可以创建嵌套分层的视图、在同一个页面使用多个视图、让多个视图控制某个视图等更多的功能。即使是非常复杂的web应用，UI-Router也可以极佳地驾驭。

使用时需要用ui-view指令指定，如:<div ui-view></div>

需要下载 ui-route文件

然后再页脚引入

<script type="text/javascript" src="../js/angular-ui-route.js"></script>

接下来，将UI-Router作为web应用的依赖，注入到主程序：

var app = angular.module('app', ['ui.router']);

与集成的ngRoute服务不同的是，UI-Router可以将视图嵌套，因为它基于的是操作状态而仅非URL。与传统做法使用ng-view不同的是，在ngRoute里需要使用ui-view服务。当在ui-router中处理路由和状态时，开发者的重心是当前的状态是什么以及在哪一个页面里。

<body ng-controller=“ctrl”>
<div ui-view>

</div>
</body>

和ngRoute一样，为特定状态指定的模板将会放在<div ui-view></div>元素中。在这些模板中也可以包含自己的ui-view,这就是在同一个路由下实现嵌套视图的方法。要定义一个路由，与传统的方法相同：使用.config方式，但使用的不是$routeProvider而是$stateProvider。

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when('', 'PageTab');
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html'
}).state('PageTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
}).state('PageTab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
}).state('PageTab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html'
})
})

基本流程大概就是这样了

分享我自己写的一个小案例。

点击page1，下面内容就会有相应的page1.

点击page2，下面内容就会有相应的page2.

点击page3，下面内容就会有相应的page3.

html文件：

tab1.html

创建如下的html页面

<div>page1</div>

tab2.html

创建如下的html页面

<div>page2</div>

tab3.html

创建如下的html页面

<div>page3</div>

PageTab.html

创建如下的html页面

<div>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab1">page1</a>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab2">page2</a>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab3">page3</a>

<div ui-view>

</div>

</div>

请注意：这儿的<div ui-view></div>，要存放的是子页面的内容。它们就是路由配置中需要被展示的页面.

接下来创建main.html

maim.html里面要引入所需要的插件

还有如何实现他们之间的切换

上面PageTab.html中，我们写了ui-sref这个属性。说白了这个属性就是关联的意思。用了’.‘这个符号

<!DOCTYPE html>
<html ng-app="app">

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
display: inline-block;
width: 100px;
height: 60px;
background: red;
color: white;
line-height: 60px;
text-align: center;
text-decoration: none;
}
</style>
</head>

<body>
<div ui-view>

</div>
</body>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-ui-route.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ui.router']);//声明AngularJS模块, 并把ui-router传入AngularJS主模块
app.config(function($stateProvider, $urlRouterProvider) {//声明了把 $stateProvider 和 $urlRouteProvider 路由引擎作为函数参数传入，这样我们就可以为这个应用程序配置路由了.
$urlRouterProvider.when('', 'PageTab');//默认路径路由
$stateProvider.state('PageTab', {
url: '/PageTab',
templateUrl: 'PageTab.html'
}).state('PageTab.tab1', {
url: '/tab1',
templateUrl: 'tab1.html'
}).state('PageTab.tab2', {
url: '/tab2',
templateUrl: 'tab2.html'
}).state('PageTab.tab3', {
url: '/tab3',
templateUrl: 'tab3.html'
})
})
</script>

</html>

简单来说一下ui-route的更多相关文章

  1. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. WeX5的简单介绍及UI的简单讲解

    WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...

  3. C#简单三层结构设计UI、BLL、DAL、Model实际项目应用例子

    C#简单三层结构设计UI.BLL.DAL .Model实际项目应用例子 在实际项目中,程序设计都有他的层次结构,比如MVC.MVP.普通的三层结构等等,不过现在用三层结构的相比可能少了,但是也有一些小 ...

  4. 语义分割(semantic segmentation) 常用神经网络介绍对比-FCN SegNet U-net DeconvNet，语义分割,简单来说就是给定一张图片,对图片中的每一个像素点进行分类；目标检测只有两类,目标和非目标，就是在一张图片中找到并用box标注出所有的目标.

    from:https://blog.csdn.net/u012931582/article/details/70314859 2017年04月21日 14:54:10 阅读数:4369 前言 在这里, ...

  5. vue 简单实现父组件向子组件传值，简单来说就是子组件肆意妄为的调用父组件里后台返回的值

    首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...

  6. 线段树之成段更新（ 需要用到延迟标记,简单来说就是每次更新的时候不要更新到底,用延迟标记使得更新延迟到下次需要更新or询问到的时候）

    HDU  1698 链接:  http://acm.hdu.edu.cn/showproblem.php?pid=1698 线段树功能:update:成段替换 (由于只query一次总区间,所以可以直 ...

  7. Android中ListView嵌套GridView的简单消息流UI(解决宽高问题)

    最近搞一个项目,需要用到类似于新浪微博的消息流,即每一项有文字.有九宫格图片,因此这就涉及到ListView或者ScrollView嵌套GridView的问题.其中GridView的高度问题在网上都很 ...

  8. Android 最简单的测试UI卡顿

    就两个类: public class BlockDetectByPrinter { private static final String START = ">>>> ...

  9. 简单来说一下java中的泛型，ssh中dao层使用会简化代码量

    原来仅仅是听老师说泛型特别好用,但是后来一直弄android用的泛型就比較少了.但是感觉它真的非常重要,于是花了一下午的时间写了个demo.好,老规矩.上代码: 首先,sysout是个工具,可是用着不 ...

随机推荐

  1. 【2017-05-21】WebForm内置对象：Session、Cookie，登录和状态保持

    1.Request -获取请求对象 string s =Request["key"]; 2.Response  -  响应请求对象 Response.Redirect(" ...

  2. Tomcat Server处理一个http请求过程

    假设来自客户端的请求为: http://localhost:8080/lizhx/lizhx_index.jsp 请求被发送到本机端口8080,被在那里侦听的Coyote HTTP/1.1 Conne ...

  3. (转)Amoeba for MySQL 非常好用的mysql集群软件

    Amoeba for MySQL Amoeba for MySQL致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当query 路由功能,专注 分布式数据库 proxy ...

  4. 挂载mount

    mount 1 挂载mount 基本概念 挂载:将额外文件系统与根文件系统现存的目录建立起关联关系,进而使得此目录做为其它文件访问入库的行为 卸载:为解除关联关系的过程 注意:挂载点下原有的文件在挂载 ...

  5. 初码-Azure系列-文章目录

    系统迁移 初码-Azure系列-记一次MySQL数据库向Azure的迁移 初码-Azure系列-迁移PHP应用至Azure的一些实践记录和思考 初码-Azure系列-记一次从阿里云到Azure的迁移和 ...

  6. Struts2结合Ajax实现登录

    前言:Struts2作为一款优秀的MVC框架,和Ajax结合在一起,用户就会有良好的体验,本篇博文我们来模拟一个简单的登录操作,实现Ajax的异步请求,其中Struts2进行的是链接处理,Action ...

  7. 【JAVAEE学习笔记】hibernate02：实体规则、对象状态、缓存、事务、批量查询和实现客户列表显示

    一.hibernate中的实体规则 实体类创建的注意事项 1.持久化类提供无参数构造 2.成员变量私有,提供共有get/set方法访问.需提供属性 3.持久化类中的属性,应尽量使用包装类型 4.持久化 ...

  8. MySQL目录结构和简单指令

    1.MySQL目录结构 了解每个软件的安装目录下,每个文件夹下文件的类型和功能是有必要的,这可以方便我们直接进行软件配置和某些参数的修改. 2.简单指令 进入cmd后可以直接操作的命令 1)启动MyS ...

  9. java(5)循坏结构

    一. while循环 1.循环的优点? 减少重复代码的编写:程序会更加的简洁 2.语法 while(表达式){ // 1.表达式是[循环条件],结果必须是boolean类型 //2.{}中的代码,即[ ...

  10. 关于jQuery表单下拉selected设置无效的解决方案

    表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 研究发现是浏览器兼容的问题 一,解决浏览器缓存问题,在HTML ...