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 ...
随机推荐
- docker运行环境安装-centos（一）
在这里我们使用的是docker的社区版Docker CE,针对的是未安装docker的新的主机,如果安装过docker的早期版本,先卸载它们及关联的依赖资源,安装的版本为docker 18.03. 1 ...
- 基于vue实现百度离线地图
基于vue实现百度离线地图 1. 百度地图API文件获取 有网络 的情况下,需引入百度地图API文件.如下: <script type="text/javascript" s ...
- RSAProtectedConfigurationProvider加密web.config
上一篇文章介绍了用 DataProtectionConfigurationProvider加密web.config文件的方法,不过他有一个缺陷,加密的文件只有在本机才能解密,如果有多台服务器的话,则需 ...
- G1日志分析
1. 概述 来自对官方G1垃圾收集器的日志解释分析,官方地址:https://blogs.oracle.com/poonam/understanding-g1-gc-logs或https://blog ...
- error: Semantic Issue: Interface type cannot be statically allocated
转自:http://hongmin118.iteye.com/blog/1333524 error: Semantic Issue: Interface type cannot be statical ...
- VS编译duilib项目时候的错误解决方法整理
@1:找不到Riched20.lib 用everything等软件搜索下磁盘.找到所在的文件夹加入到vs的库文件夹就可以.我得是C:\Program Files (x86)\Microsoft SDK ...
- android studio - 修改logcat颜色字体
修改logcat 颜色 (1) 在Android Studio 菜单栏 打开 Preferences -> Editer -> Colors & Fonts -> Andr ...
- flink on yarn部分源码解析
转发请注明原创地址:https://www.cnblogs.com/dongxiao-yang/p/9403427.html flink任务的deploy形式有很多种选择,常见的有standalone ...
- eclipse中使用weblogic作为服务器控制台中文乱码
使用WebLogic时控制台输出中文乱码解决方法: 1.找到weblogic安装目录,当前项目配置的domain 2.找到bin下的setDomainEnv.cmd文件 3.打开文件,从文 ...
- DOCTYPE 与浏览器模式分析
DOCTYPE 的诞生 DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD).通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的位置, ...