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. Facebook API 入门

    Facebook 商业价值简介 Facebook 是一个社交网络服务网站,于 2004 年 2 月 4 日上线,到 2010 年 2 月 2 日, Facebook 正赶超雅虎将成为全球第三大网站,与 ...

  2. Android_WebServices_源代码分析

    本博文为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/38037989 在Android_WebServices_介绍一文中, ...

  3. Qt打开文件对话框

    项目中需要打开文件对话框,就查了一下,不得不说Qt的帮助文档做的真好,非常详细.要实现这个功能有两种方式,使用QFileDialog的静态方法,实例化QFileDialog对象. 基本算是照抄帮助文档 ...

  4. Scanner.findInLine()与while的使用莫名其妙的导致NoSuchElementException: No line found

    public static boolean parseHTML(Scanner sc, List<String> errorInfo) { String[] tags = new Stri ...

  5. Unity3D 5.0版本+注册工具分享

    Unity3D引擎5.0正式版本发布也有一段时间了.笔者今天下载了新版本顺便分享一下资源. 主要有两个资源,一个是5.0f4的官方客户端,另外一个是vs的调试插件.有需要的盆友就拿去.都在下面的连接地 ...

  6. linux - camera capture

    //cut a picture#include <stdio.h>#include <stdlib.h>#include <string.h>#include &l ...

  7. Centsos7修改密码

    CentOS 7.0 进入单用户模式修改Root密码 时间:2017-05-02 01:10来源:blog.csdn.net  作者:海哥_大大的Java 举报   点击:506次 一.启动时,随便按 ...

  8. 微信小程序 - mixins

    mixins 概念 可百度  参考 http://ask.seowhy.com/article/21007 大意和Python中的多重继承, java中的接口类似(java接口只是定义,实现需要子类自 ...

  9. JS关于浏览器尺寸的方法

    document.body.clientWidth BODY对象宽度.通配符未清零margin的时候,小于页面可见区域宽度document.body.clientHeight BODY对象高度.doc ...

  10. SQL on Hadoop 的真相（2）

    转自:http://blog.jobbole.com/87159/ 这是一组系列博客,目的是详尽介绍 SQL-on-Hadoop .该系列的第一篇会介绍一些存储引擎和在线事务处理(简称 OLTP )相 ...