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中的子路由用法的更多相关文章

  1. angular中ng-class的一些用法

    在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJ ...

  2. Angular中的$q的形象解释及深入用法

    作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...

  3. Angular中的$cacheFactory的作用和用法

    1.Angular中的$cacheFactory的作用:    (1)put(key,value); 在缓存对象中插入一个键值对(key,value). (2)get(key); 在缓存对象中通过指定 ...

  4. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

  5. angular中的promise

    angular中的promise用法 标签(空格分隔): angular 前言 Promise其实是一个规范,用类似then().then()这样的链式调用形式来处理因为异步带来意大利面条式的代码(多 ...

  6. Angular中Constructor 和 ngOnInit 的本质区别

    在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正. 本文出处:The e ...

  7. 【响应式编程的思维艺术】 （5）Angular中Rxjs的应用示例

    目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...

  8. Angular中ui-grid的使用详解

    Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格 ...

  9. Angular 个人深究（一）【Angular中的Typescript 装饰器】

    Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...

随机推荐

  1. linux 使用FIO测试磁盘iops 方法详解

    FIO是测试IOPS的非常好的工具,用来对硬件进行压力测试和验证,支持13种不同的I/O引擎, 包括:sync,mmap, libaio, posixaio, SG v3, splice, null, ...

  2. 收集整理的mybatis资料

    这是个系列文章,讲的非常不错 mybatis 详解(一)------JDBC  https://www.cnblogs.com/ysocean/p/7271600.html mybatis  http ...

  3. angular路由介绍

    AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).An ...

  4. Form表单——例子

    Form Form的验证思路 前端:form表单 后台:创建form类,当请求到来时,先匹配,匹配出正确和错误信息. Django的Form验证实例: 创建project,进行基础配置文件配置 STA ...

  5. Oracle复习（有记录才能沉淀.......）

    一.Oracle准备工作 1.安装Oracle Oracle数据库产品是免费的,我们可以从Oracle的官方网站(http://www.oracle.com)下载到程序安装包,Oracle在Windo ...

  6. C语言 · 图形输出

    算法提高 图形输出   时间限制:1.0s   内存限制:512.0MB      编写一程序,在屏幕上输出如下内容: X | X | X ---+---+--- | | ---+---+--- O ...

  7. Spider Studio 社区信息

    Spider Studio (采集工作站) 产品页面: http://www.gdtsearch.com/products.spiderstudio.htm QQ群: 45995410 - 有人驻场解 ...

  8. DRBD(Distributed Replicated Block Device) 分布式块设备复制 进行集群高可用方案

    DRBD是一个用软件实现的.无共享的.服务器之间镜像块设备内容的存储复制解决方案. 外文名 DRBD drbdadm 高级管理工具 drbdsetup 置装载进kernel的DRBD模块 drbdme ...

  9. Goroutine并发调度模型深度解析之手撸一个协程池

    golanggoroutine协程池Groutine Pool高并发 并发(并行),一直以来都是一个编程语言里的核心主题之一,也是被开发者关注最多的话题:Go语言作为一个出道以来就自带 『高并发』光环 ...

  10. C++ 引用本质的详解

    //引用本质的理解① #include<iostream> using namespace std; int GetA(){ ; return a; } int & GetB(){ ...