Angular ui-route的用法

引入angular和使用angular子路由时需要的依赖模块angular-ui-route.js。并且在html中将路由要插入的位置写上。而在js部分中和angular路由一样在控制台外面写

  1. <body>
  2.     <div ui-view></div>
  3. </body>
  4. <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  5. <script src="js/angular-ui-route.js" type="text/javascript" charset="utf-8"></script>
  6. <script type="text/javascript">
  7.     var app = angular.module('app',['ui.router']);
  8.     app.config(function($stateProvider,$urlRouterProvider){
  9.  
  10.     });
  11. </script>

这是基本的情况，之后我们应该建立一个新的html来写

  1. <div>
  2.     <a href="javascript:;" style="padding-right: 20px;">page1</a>
  3.     <a href="javascript:;" style="padding-right: 20px;">page2</a>
  4.     <a href="javascript:;" style="padding-right: 20px;">page3</a>
  5. </div>

并且将这新写的html引入到刚开始的网页中

  1. app.config(function($stateProvider,$urlRouterProvider){
  2.         $urlRouterProvider.when('','PageTab');
  3.  
  4.         $stateProvider.state('PageTab',{
  5.             url: '/PageTab',
  6.             templateUrl: 'PageTab.html'//所引入的路径
  7.         })
  8. });

这样就形成了基本的路由了，之后我们还要在新建几个新的html来充当第二级路由。并且把第二个改成

  1. <div>
  2.     <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab1">page1</a>
  3.     <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab2">page2</a>
  4.     <a href="javascript:;" style="padding-right: 20px;" ui-sref=".tab3">page3</a>
  5.     <div ui-view></div>
  6. </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. 【BLE】CC2541之主机端读取特征值

    本篇博文最后改动时间:2017年01月06日,11:06. 一.简单介绍 本文介绍怎样在SimpleBLECentralproject中,读取SimpleBLEPeripheralproject中的特 ...

  2. XMPP 基础 （转载）

    技术博客 http://www.cnblogs.com/ChenYilong/  新浪微博 http://weibo.com/luohanchenyilong Fullscreen XMPP   基础 ...

  3. action(二)

    RemoveSelf :消失 CCFiniteTimeAction* action = CCSequence::create( CCMoveBy::create( , ccp(,)), CCRotat ...

  4. win32环境下显示中文

    //编码转换 //#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) // string title = "成绩"; // GBK2UTF8 ...

  5. 每日英语：China Grapples With Genetically Modified Foods

    A Chinese agricultural official's unsupported claims about the carcinogenic risks of consuming genet ...

  6. spring-boot 集合mybatis 的分页查询

    spring-boot 集合mybatis 的github分页查询 一.依赖包 <!-- mysql 数据库驱动. --> <dependency> <groupId&g ...

  7. sql 记录

    INSERT INTO B([name],[info]) SELECT [name,'10'] FROM A 级联更新1:update tb1, tb2 set tb1.a=tb2.a,tb1.b=t ...

  8. 基于jQuery的图片异步加载和预加载实例

    如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...

  9. Codeforces461A Appleman and Toastman 贪心

    题目大意是Appleman每次将Toastman给他的Ni个数拆分成两部分后再还给Toastman,若Ni == 1则直接丢弃不拆分.而Toastman将每次获得的Mi个数累加起来作为分数,初始时To ...

  10. 用c++封装linux系统调用

    #include <pthread.h> #include <cstdlib> #include <ctime> #include <iostream> ...