Angular ui-route的用法
ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性，嵌套路由功能主要是依赖$stateProvider服务,$urlRouterProvider服务与 ui-view实现。
.
先创建一个叫PageTab的html文件
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular.min.js"></script>
<script src="../angular/angular-ui-route.js"></script>
<script>
var app = angular.module('app',['ui.router']);
app.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.when('','PageTab');
$stateProvider.state('PageTab',{
url:'/PageTab',
templateUrl:'PageTab.html'
}).state('PageTab.page1',{
url:'/page1',
templateUrl:'page1.html'
}).state('PageTab.page2',{
url:'/page2',
templateUrl:'page2.html'
}).state('PageTab.page3',{
url:'/page3',
templateUrl:'page3.html'
})
})
</script>
</head>
<body>
<div ui-view></div>
</body>
</html>
PageTab.html
<div>
<a href="#/page1" ui-sref=".page1">tab1</a>
<a href="#/page2" ui-sref=".page2">tab2</a>
<a href="#/page3" ui-sref=".page3">tab3</a>
<div ui-view></div>
</div>
然后再创建三个子页面
page1.html
<div>
page1
</div>
page2.html
<div>
page2
</div>
page3.html
<div>
page3
</div>
Angular ui-route的用法的更多相关文章
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 基于angular的route实现单页面cnodejs
Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...
- kendo ui template的用法
kendo ui template的用法: Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的H ...
- [mobile angular ui 1.2]桌面环境下如何自动隐藏左侧的sidebar？how to hide left sidebar on desktop browser by default?
使用mobile angular ui 1.2开发,在默认情况下,桌面浏览器中sidebar-left是默认打开的,怎么才能在程序初始打开时关闭sidebar-left呢? 目前我找到的唯一可行办法就 ...
- nodejs express route 的用法
express 中文社区:http://expressjs.jser.us/community.html nodejs express route 的用法 1. 首先是最基本的用法. 1 2 3 4 ...
- [译]发布ABP v0.19包含Angular UI选项
发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...
- Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
- [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks
In this tutorial we are going to learn how we can accidentally creating memory leaks in our applicat ...
- Angular @HostBinding()和@HostListener()用法
@HostBinding()和@HostListener()在自定义指令时非常有用.@HostBinding()可以为指令的宿主元素添加类.样式.属性等,而@HostListener()可以监听宿主元 ...
- angular中$q.all用法
$q.all是用于执行多个异步任务进行回调,它可以接受一个promise的数组,或是promise的hash(object).任何一个promise失败,都会导致整个任务的失败. 例1:接受一个pro ...
随机推荐
- C#代码覆盖率 -vsinstr和OpenCover
最近接触的项目涉及到C#开发的应用,测试过程中我们需要去分析C#的代码覆盖率,问了一些人,在网上也搜了一些,零碎的找到很多资料,但是都不是很完整,实际使用的过程中还是走了不少弯路.到现在为止,有两种可 ...
- Wpf 自定义控件(1)
1. 新建一个wpf工程,在工程下面新建 一个文件夹themes,在themes下新建两个资源字典文件generic.xaml和PrettySeekBar.xaml generic.xaml ...
- DirectShow中写push模式的source filter流程 + 源码(内附具体凝视)
尽管网上已有非常多关于DirectShow写source filter的资料.只是非常多刚開始学的朋友总说讲的不是非常清楚(可能当中作者省略了很多他觉得简 单的过程).读者总希望看到象第一步怎么做,第 ...
- CCNA2.0笔记_STP
STP介绍 STP的主要任务是阻止在第二层网络(网桥或交换机)上产生网络环路(通过将特定的端口选为 Blocking state),来实现无环的拓扑 ; STP交换机之间使用Trunk连接 ; Cis ...
- PL/SQL Developer导入、导出表结构和表数据
在表的所有者不能改变的情况下,可以使用导入导出表结构和表数据的方法,将表移动到你想要的所有者下(注:特别是建立表的时候如果以sysdba的身份登录的话,所有表的所有者都为sys,此时会对你用c#访问数 ...
- 逻辑漏洞-客户端验证的邮箱-Web渗透实例之中国教育部青少年普法网站逻辑漏洞
转载自:http://www.zmnhssn.com/?post=61 漏洞地址:https://user.qspfw.com 用户登陆界面 具体漏洞地址: 用户密码找回界面:https:// ...
- openssl基础
OpenSSL 是一个安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. OpenSSL is an open source ...
- jquery 改变checkbox的值
似乎没什么用... <script> $(document).ready(function(){ $("#comment").change(function(){ va ...
- 第二百二十节，jQuery EasyUI，Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
- 第二百零七节，jQuery EasyUI，MenuButton(菜单按钮)组件
jQuery EasyUI,MenuButton(菜单按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法 ...