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. CentOS Linux防火墙配置及关闭

    CentOS 配置防火墙操作实例(启.停.开.闭端口): 注:防火墙的基本操作命令: 查询防火墙状态: [root@localhost ~]# service   iptables status< ...

  2. atitit.面向过程的编程语言异常处理 c语言 asp vbs 的try catch 实现

    atitit.面向过程的编程语言异常处理 c语言 asp vbs 的try catch 实现 1. 返回值法.and全局ERROR 变量法 1 2. 抛出异常Err.Raise 1 3. 实现try  ...

  3. id ,NSObject, id<NSObject>区别

    转自:http://blog.csdn.net/happytengfei/article/details/11473931 我们经常会混淆以下三种申明(我是没有留意过):    1. id foo1; ...

  4. android自定义控件(1)-自定义控件属性

    那么还是针对我们之前写的自定义控件:开关按钮为例来说,在之前的基础上,我们来看看有哪些属性是可以自定义的:按钮的背景图片,按钮的滑块图片,和按钮的状态(是开还是关),实际上都应该是可以在xml文件中直 ...

  5. shell脚本之函数的使用

    把代码封装成函数,相当于造了一个“轮子”,之后就直接重复使用即可. 函数的创建 shell中函数的创建有2种方式 1.使用function关键字 语法 function test { ... } 2. ...

  6. 改变placeholder的样式

    input::-webkit-input-placeholder{ font-size:12px; color:#d2d2d2 }

  7. SpringBoot 整合 Security5

    https://my.oschina.net/yunduansing/blog/2032475 https://blog.csdn.net/SWPU_Lipan/article/details/805 ...

  8. Android中<uses-sdk>属性和target属性分析

    1. 概要 <uses-sdk> 用来描述该应用程序可以运行的最小和最大API级别,以及应用程序开发者设计期望运行的平台版本.通过在manifest清单文件中添加该属性,我们可以更好的控制 ...

  9. DelphiXE8FMX工程实现无边框托动(发送消息)

    1.引用单元 uses Winapi.Windows, FMX.Platform.Win, Winapi.Messages; 2.发送消息 //发送系统消息SendMessage(FmxHandleT ...

  10. 整合quickx到普通cocos2dx

    quickx是对cocos2dx的lua扩展,它做了一些C++的扩展,同时还在lua做了一些封装, 让用lua开发cocos2dx更快,中文站http://quick.cocoachina.com/. ...