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. WCF实现RESTFul Web Service

    共同学习了前面一些概念,终于开始正题了哈.RESTful的Web Service调用直观,返回的内容容易解析.这里先会描述一个简单的场景--Web Service提供一个方法来搜索个人信息,传入人名, ...

  2. View坐标系详解(getTop(),getLeft(),getX(),getY(),getLocationOnScreen(), getLocationInWindow())

    View 提供了如下 5 种方法获取 View 的坐标:1. View.getTop().View.getLeft().View.getBottom().View.getRight();2. View ...

  3. Django Model获取指定列的数据

    model一般都是有多个属性的,但是很多时候我们又只需要查询特定的某一个,这个时候可以用到values和values_list 利用values查询 from attendence.models im ...

  4. Ubuntu安装Nginx和正确卸载Nginx Nginx相关

    1.Ubuntu下安装Nginx比较简单 敲入下列命令即可: sudo apt-get update sudo apt-get install nginx 2.Ubuntu下卸载,稍不注意就会入坑 s ...

  5. hdu1978（记忆化搜索）

    #include<iostream> #include<stdio.h> #include<string.h> #include<queue> usin ...

  6. jar 打包命令详解

    原文: https://blog.csdn.net/marryshi/article/details/50751764 本文详细讲述了JAR命令的用法,对于大家学习和总结jar命令的使用有一定的帮助作 ...

  7. C语言 · 约数个数

    算法提高 约数个数   时间限制:1.0s   内存限制:512.0MB      输入一个正整数N,输出其约数的个数. 样例输入 12 样例输出 6 样例说明 12的约数包括:1,2,3,4,6,1 ...

  8. 脚本中出现“+ $'\r' : command not found

    脚本中的部分应该是从doc直接拷过来的,造成回车符“\r”出现问题 通过将脚本内容在linux下拷贝一次,就解决了这个问题!

  9. 三、thinkphp

    'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...

  10. string--C++ STL 学习

    C++STL提供了string基本字符系列容器来处理字符串,可以把string理解为字符串类,提供了添加删除\替换\查找和比较等丰富的方法. 使用string容器,需要包含头文件声明#include ...