AngularJS实战之路由ui-view
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的更多相关文章
- [置顶] AngularJS实战之路由ui-sref-active使用
当我们使用angularjs的路由时,时常会出现一个需求,当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色) 接下来就看看Angular-UI-Router里的指令ui-sref-acti ...
- AngularJS实战之路由ui-view传参
angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路 ...
- AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...
- 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 ...
- [转]AngularJS ui-router (嵌套路由)
本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...
- 关于AngularJs中的路由学习总结
AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由 通常我们的URL形式为http://jtjds ...
- Ⅲ.AngularJS的点点滴滴-- 路由
路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...
- 《AngularJs实战》学习笔记(慕课网)
1. Controller使用过程中的注意点 不要试图去复用Controller, 一个控制器一般只负责一小块视图 不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要 ...
随机推荐
- 永久激活win和office
1.关闭自己安装的防护软件 2. 关闭电脑自带的防护软件 3.运行 KMSpico
- 6-完美解决Error:SSL peer shut down incorrectly
转载自: 完美解决Error:SSL peer shut down incorrectly 打开gradle文件夹下的gradle-wrapper文件 修改其中的配置文件将红色区域修改为http:// ...
- docker搭建lnmp(二)
上一篇利用 不同的命令来构建 nginx,mysql,php镜像 和 容器. 这样做比较麻烦,也很容易出错,当然可以写入 sh脚本来执行.但是可以通过 docker-compose 来达到效果,管理起 ...
- 创建smartfroms页格式
1.输入TCODE:spad 2.页格式:完全管理 ---> 设备类型 ---> 页格式 ---> 创建 3.比如:长:24.2cm 宽:11.5cm 则设置:纸宽:115MM 纸 ...
- grep与正则表达式的使用
正则表达式以及grep的使用 grep是一种文本过滤工具(模式:pattern)基本使用用法如下: grep [option] PATTERN FILE grep [OPTIONS] [-e PATT ...
- Luogu 3421 [POI2005]SKO-Knights - Exgcd
Description 给出一个骑士的 $N$种 中行走的方式 $(a_i, b_i)$, 可以使骑士的坐标$(-a,-b)$或$(+a,+b)$. 我们需要找出 第二个骑士的 两种行走方式 $(c_ ...
- UI设计师如何提升审美？
不得不承认,作为一名设计师,独特的审美能力是设计的灵感所在,不过很多刚刚从事UI设计的人,审美能力真的非常的一般,所以心中难免有这样的疑问,我的审美能通过后天的努力提升吗?关于这点,可以非常肯定的说, ...
- list,set等集合遍历时，不能remove集合中的元素。需要new一个Object或者list,set,里面add需要删除的元素，等集合遍历完了进行remove(Object)或者removeAll(list/set)操作
list,set等集合遍历时,不能remove集合中的元素.需要new一个Object或者list,set,里面add需要删除的元素,等集合遍历完了进行remove(Object)或者removeAl ...
- jquery纯数字验证
$(document).ready(function(){ //纯数字验证,只让输入数字,比如-号等都不然输入. $('#user-defined').unbind(); $('#user-de ...
- xcode如何运行下载的demo工程
1. 首先你需要改Bundle Identifier,修改成别人没注册过的. 2. 选中 “Automatically manage signing” 3. 在Team里面添加自己的个人帐号了.