1. 路由(ui-router)

1.1. 环境

1) angular.min.js

2) angular-ui-router-0.2.10.js

3) 确保确保包含ui.router为模块依赖关系.

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

1.1. 视图激活方式

1) $state.Go()：优先级较高的便利方式

2) ui-sref：点击包含此指令跳转

3) url：url导航

1.2. 多视图

Views：

使用views属性设置多个视图。如果在单一状态下不需要多个视图，则不需要此属性。提示：请记住，通常嵌套视图比多个兄弟视图更有用和更强大。

代码：准备四个页面  主页面和三个子页面

主页面

<!DOCTYPE html>

<html ng-app="app">

<head>

<title>多视图</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"

	type="text/css"></link>

</head>

<body>

<div class="container">

	<nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">柳絮飞祭奠</a>

    </div>

    <div>

        <ul class="nav navbar-nav">

            <li><a ui-sref="index2">onepage</a></li>

            <li><a ui-sref="index1">twopage</a></li>

        </ul>

    </div>

    </div>

</nav>

</div>

<div ui-view></div>

<div ui-view="index1"></div>

<div ui-view="index2"></div>

</body>

<script type="text/javascript"

	src="plugins/angular/angular.min-1.4.6.js"></script>

	<script type="text/javascript" src="plugins/angular/angular-ui-router-0.2.10.js"></script>

<script type="text/javascript">

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

	app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

			$stateProvider.state('index1', {

				url : '/index1',

				views:{

					"index1":{

				    templateUrl: '/CeShi/lx/uiroute/index1.html'

				},

					"index2":{

					templateUrl : '/CeShi/lx/uiroute/index2.html'

				}

				}

			}).state('index2', {

				url : '/index2',

				templateUrl: '/CeShi/lx/uiroute/index3.html'

			});

			$urlRouterProvider.otherwise('/index2');

}]).config(function($sceProvider){

	$sceProvider.enabled(false);

});

</script>

</html>

三个子页面index1.html,index2.html,index3.html分别为

<h1>我是视图一</h1>

<h1>我是视图二</h1>

<h1>我是视图三</h1>

效果为





1.3.嵌套视图

依旧四个页面一个主页面一个子页面两个嵌套页面



主页面

<!DOCTYPE html>

<html ng-app="app">

<head>

<title>嵌套视图</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link>

</head>

<body>

<div class="container">

	<nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">柳絮飞祭奠</a>

    </div>

    </div>

</nav>

</div>

<div ui-view></div>

</body>

<script type="text/javascript" src="../../plugins/angular/angular.min-1.4.6.js"></script>

	<script type="text/javascript" src="../../plugins/angular/angular-ui-router-0.2.10.js"></script>

<script type="text/javascript">

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

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){

			$stateProvider.state('index2', {

				url : '/index2',

				templateUrl : '/Angular/uiview/nested/index2.html'

			}).state('index2.one',{

	        	url:'/nested',

                templateUrl: '/Angular/uiview/nested/index1.html'

	        }).state('index2.two',{

	        	url:'/nested',

                templateUrl: '/Angular/uiview/nested/index3.html'

	        });

			$urlRouterProvider.otherwise('/index2');

}]).config(function($sceProvider){

	$sceProvider.enabled(false);

});

</script>

</html>

子页面

<div class="container">

	<nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

        <a class="navbar-brand" href="#">柳絮飞祭奠</a>

    </div>

    <div>

        <ul class="nav navbar-nav">

            <li class="active"><a ui-sref="index2.one">onepage</a></li>

            <li><a ui-sref="index2.two">twopage</a></li>

        </ul>

    </div>

    </div>

</nav>

</div>

<div ui-view></div>

嵌套页面

<h1>我是视图一</h1>

<h1>我是视图三</h1>

效果：



AngularJS实战之路由ui-view的更多相关文章

  1. [置顶] AngularJS实战之路由ui-sref-active使用

    当我们使用angularjs的路由时,时常会出现一个需求,当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色) 接下来就看看Angular-UI-Router里的指令ui-sref-acti ...

  2. AngularJS实战之路由ui-view传参

    angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路 ...

  3. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  4. AngularJS 的嵌套路由 UI-Router

    AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...

  5. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  6. [转]AngularJS ui-router (嵌套路由)

    本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...

  7. 关于AngularJs中的路由学习总结

    AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由  通常我们的URL形式为http://jtjds ...

  8. Ⅲ.AngularJS的点点滴滴-- 路由

    路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...

  9. 《AngularJs实战》学习笔记(慕课网)

    1. Controller使用过程中的注意点 不要试图去复用Controller, 一个控制器一般只负责一小块视图 不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要 ...

随机推荐

  1. linux查看本服务端口开放情况

    在Linux使用过程中,需要了解当前系统开放了哪些端口,并且要查看开放这些端口的具体进程和用户,可以通过netstat命令进行简单查询. 1.netstat命令各个参数说明如下: -t : 指明显示T ...

  2. ES5/6/7

    ECMAScript(js语言规范) ###ES5 1.   严格模式 运行模式: 正常(混杂)模式与严格模式 应用上严格模式: ‘strict mode’ 2.JSON对象 * JSON.strin ...

  3. vue内引入jsPlumb流程控制器（一）

    1. npm i jsplumb --save 注:jsplumb要全小写 2. 在main.js内 加: import jsPlumb from 'jsplumb' Vue.prototype.$j ...

  4. XSS 攻击的防御

    xss攻击预防,网上有很多介绍,发现很多都是只能预防GET方式请求的xss攻击,并不能预防POST方式的xss攻击.主要是由于POST方式的参数只能用流的方式读取,且只能读取一次,经过多次尝试,自己总 ...

  5. centos7下的glusterfs的安装与使用

    环境说明: 两台虚拟主机,IP分别为192.168.1.222和192.168.1.233,分别装上glusterfs. 一.下载glusterfs源码包 https://download.glust ...

  6. Struts2把数据封装到集合中之封装到map中

    struts框架封装数据可以封装到集合中也可以封装到map中,该篇博客主要讲解将数据封装到map中. 1. 封装复杂类型的参数(集合类型 Collection .Map接口等) 2. 需求:页面中有可 ...

  7. SQL Server 通过TSQL(存储过程)用MSXML去调用Webservice

    本文为转载:原文地址 在SQL SERVER 2008 R2 上亲测可用, 这个存储过程配合SoapUI使用效果更好:参考地址 前提设置:http://www.cnblogs.com/chenxizh ...

  8. python collections 里面的Counter 统计所有出现的字符数量

    from collections import Counter c_num = Counter('Hello world') # 统计出现的每个字符数量print(c_num) for key, va ...

  9. Oracle性能优化5-索引的不足

    索引的不足 1.索引开销 a.访问开销   反问集中导致热块的竞争(对最新数据的查询)   回表性能取决聚合因子   索引的访问开销,返回几条数据快,但是返回大量的数据很慢   全表扫描与全扫描   ...

  10. linux通过python设置系统默认编码

    import sys sys.reload() sys.getdefaultencoding() # 查看设置前系统默认编码 sys.setdefaultencoding('utf-8') sys.g ...