angular中的子路由用法
Angular ui-route的用法
引入angular和使用angular子路由时需要的依赖模块angular-ui-route.js。并且在html中将路由要插入的位置写上。而在js部分中和angular路由一样在控制台外面写
<body>
<div ui-view></div>
</body>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-ui-route.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module('app',['ui.router']);
app.config(function($stateProvider,$urlRouterProvider){ });
</script>
这是基本的情况,之后我们应该建立一个新的html来写
<div>
<a href="javascript:;" style="padding-right: 20px;">page1</a>
<a href="javascript:;" style="padding-right: 20px;">page2</a>
<a href="javascript:;" style="padding-right: 20px;">page3</a>
</div>
并且将这新写的html引入到刚开始的网页中
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.when('','PageTab'); $stateProvider.state('PageTab',{
url: '/PageTab',
templateUrl: 'PageTab.html'//所引入的路径
})
});
这样就形成了基本的路由了,之后我们还要在新建几个新的html来充当第二级路由。并且把第二个改成
<div>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab1">page1</a>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab2">page2</a>
<a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab3">page3</a>
<div ui-view></div>
</div>
这样子我们angular的子路由效果就形成了。
不足之处,望大家多多指出
angular中的子路由用法的更多相关文章
- angular中ng-class的一些用法
在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJ ...
- Angular中的$q的形象解释及深入用法
作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...
- Angular中的$cacheFactory的作用和用法
1.Angular中的$cacheFactory的作用: (1)put(key,value); 在缓存对象中插入一个键值对(key,value). (2)get(key); 在缓存对象中通过指定 ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
- angular中的promise
angular中的promise用法 标签(空格分隔): angular 前言 Promise其实是一个规范,用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码(多 ...
- Angular中Constructor 和 ngOnInit 的本质区别
在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...
- 【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例
目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...
- Angular中ui-grid的使用详解
Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格 ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
随机推荐
- linux 使用FIO测试磁盘iops 方法详解
FIO是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎, 包括:sync,mmap, libaio, posixaio, SG v3, splice, null, ...
- 收集整理的mybatis资料
这是个系列文章,讲的非常不错 mybatis 详解(一)------JDBC https://www.cnblogs.com/ysocean/p/7271600.html mybatis http ...
- angular路由介绍
AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).An ...
- Form表单——例子
Form Form的验证思路 前端:form表单 后台:创建form类,当请求到来时,先匹配,匹配出正确和错误信息. Django的Form验证实例: 创建project,进行基础配置文件配置 STA ...
- Oracle复习(有记录才能沉淀.......)
一.Oracle准备工作 1.安装Oracle Oracle数据库产品是免费的,我们可以从Oracle的官方网站(http://www.oracle.com)下载到程序安装包,Oracle在Windo ...
- C语言 · 图形输出
算法提高 图形输出 时间限制:1.0s 内存限制:512.0MB 编写一程序,在屏幕上输出如下内容: X | X | X ---+---+--- | | ---+---+--- O ...
- Spider Studio 社区信息
Spider Studio (采集工作站) 产品页面: http://www.gdtsearch.com/products.spiderstudio.htm QQ群: 45995410 - 有人驻场解 ...
- DRBD(Distributed Replicated Block Device) 分布式块设备复制 进行集群高可用方案
DRBD是一个用软件实现的.无共享的.服务器之间镜像块设备内容的存储复制解决方案. 外文名 DRBD drbdadm 高级管理工具 drbdsetup 置装载进kernel的DRBD模块 drbdme ...
- Goroutine并发调度模型深度解析之手撸一个协程池
golanggoroutine协程池Groutine Pool高并发 并发(并行),一直以来都是一个编程语言里的核心主题之一,也是被开发者关注最多的话题:Go语言作为一个出道以来就自带 『高并发』光环 ...
- C++ 引用本质的详解
//引用本质的理解① #include<iostream> using namespace std; int GetA(){ ; return a; } int & GetB(){ ...