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. C#获取局域网MAC地址

    效果: 说明:获取本局域网的MAC地址(非本机的MAC地址) 代码:   /// <summary>         /// 获取网卡物理地址         /// </summa ...

  2. redis储存中文，客服端读取出现乱码

    [root@cache03 ~]# redis-cli -h 192.168.1.112 -p 6379 192.168.1.112:6379> set chen 陈林 OK 192.168.1 ...

  3. 高性能爬虫——asynicio模块

      一 背景知识 爬虫的本质就是一个socket客户端与服务端的通信过程,如果我们有多个url待爬取,只用一个线程且采用串行的方式执行,那只能等待爬取一个结束后才能继续下一个,效率会非常低. 需要强调 ...

  4. Unicode Table

    Unicode Table http://www.tamasoft.co.jp/en/general-info/unicode.html   00 01 02 03 04 05 06 07 08 09 ...

  5. [C++]在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include StdAfx.h”

    问题现象:在写好的.cpp文件后,编译报错.提示"你建立的工程使用了预编译功能, cpp最前边要留一行这样的内容:#include "StdAfx.h"问题原因:网上说是 ...

  6. 非常多学ThinkPHP的新手会遇到的问题

    在模板传递变量的时候,非常多视频教程都使用$v.channel的方式.例如以下: <a href="{:U('Chat/set',array('id'=>$v.channel)) ...

  7. Linux下C语言编程中库的使用

    零.问题 1. 为什么要用到库? 2. 我要用一个库,但是,尼玛命令行上该怎么写呢?或者说库文件如何使用? 3. Linux的库在那些地方? 4. 什么是静态库,什么是动态库,二者有啥区别? 5. 常 ...

  8. C语言 · P1001（大数乘法）

    算法提高 P1001   时间限制:1.0s   内存限制:256.0MB      当两个比较大的整数相乘时,可能会出现数据溢出的情形.为避免溢出,可以采用字符串的方法来实现两个大数之间的乘法.具体 ...

  9. QT4.8.5 源码编译记录

    今天想将以前的虚拟机的 QT4.8.5 集成到一个虚拟机里面,所以就重新编译了一次 QT4.8.5的源码 走了一点点小弯路,特此记录. 一.交叉编译器,不能直接从原来的虚拟机里面拷贝,必须使用官网的交 ...

  10. Webpack实例教程及模块化规范

    Webpack 是当下最热门的前端资源模块化管理和打包工具.它能够将很多松散的模块依照依赖和规则打包成符合生产环境部署的前端资源. 通过 loader 的转换,不论什么形式的资源都能够视作模块,比方 ...