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. AngularJS——第9章 模块加载

    第9章 模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> ...

  2. Head First Servlets & JSP 学习笔记 第一章 —— 前言和体系结构

    URL,Uniform Resource Locatiors,统一资源定位符. http:// www.wickedlysmart.com :80 /beeradivice/select /beer1 ...

  3. Python中list,tuple,dict,set的区别和用法(转)

    原文地址:http://www.cnblogs.com/soaringEveryday/p/5044007.html Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个 ...

  4. 各个JSON技术的比较(Jackson,Gson,Fastjson)的对比

    JSON技术的调研报告 一 .各个JSON技术的简介和优劣 1.json-lib json-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包, 包括 ...

  5. WebApi中Swagger的使用(超级简单)

    Swagger解释 Swagger是一种Rest API的简单但强大的表示方式,她是标准的与语言无关,这种表示方式不但人可读,而且机器可读. 可以作为Rest API的交互式文档,也可以作为Rest ...

  6. storage封装

    storage.js /* storage 主要放项目中的storage相关操作:存取等 */ var storage = { /** 对本地数据进行操作的相关方法,如localStorage,ses ...

  7. 从django的序列化到rest-framework 序列化

    1.利用Django的view实现返回json数据 from django.views.generic import View from goods.models import Goods class ...

  8. c#Loading 页SplashScreenManager的使用

    一.新建一个加载界面: SplashScreenManager控件只是作为加载界面的统一管理器,我们要使用加载界面,需要自行创建加载界面,两种方法如下: 1.点击SplashScreenManager ...

  9. git回退文件修改

    假设git仓库某个文件的提交信息如下: [cxy@localhost-live mate-power-manager]$ git log -n3 SPECS/mate-power-manager.sp ...

  10. collectionView 防止cell复用的方法

    collectionView 防止cell复用的方法 一: //在创建collectionView的时候注册cell(一个分区) UICollectionViewCell *cell=[collect ...