1、index.html:

<!DOCTYPE HTML>
<html ng-app="routerApp">
<head>
    <title>UI-Router路由demo</title>
    <meta charset="utf-8">    
    <link rel="stylesheet" href="../framework/bootstrap-3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="../framework/ng-grid-2.0.12/ng-grid.css">
    <script src="../framework/jquery-1.9.1.js"></script>
    <script src="../framework/angular-1.3.0.14/angular.js"></script>
    <script src="../framework/angular-1.3.0.14/angular-animate.min.js"></script>
    <script src="../framework/angular-ui-router.js"></script>

<script src="../framework/ui-bootstrap-tpls-0.11.0.js"></script>

<script src="../framework/ng-grid-2.0.12/ng-grid.debug.js"></script>
    <link rel="stylesheet" href="css/app.css">
    <script src="js/app.js"></script>
    <script src="js/animations.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>

</head>
<body>
<div class="container">
<div>aaaaaaaaaaaaaaa</div>
    <div ui-view></div><!--子模板页都会自动加载到这个ui-view层中-->
<div>bbbbbbbbbbbbbbb</div>
</div>
</body>
</html>

2、app.js：

var myModule = angular.module("routerApp",['ui.router']);

myModule.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/index');//默认的触发路径是/index
    $stateProvider
        .state('index',{//index是状态名
            url:'/index',//触发模板加载的路径
            templateUrl:'tpls/test.html'
        })
        .state('addbook',{
            url:'/addbook',
            templateUrl:'tpls/test1.html'//没有嵌套，直接在父页面的ui-view=''处加载模板页
        })
        .state('bookdetail',{
            url:'/bookdetail',
            templateUrl:'tpls/test2.html'
        });
}]);

注意一点：在服务器端运行该脚本的时候，一定要在url路径前加上/#号，写成这样才有效：http://127.0.0.1/angularjs/uiRouter/#/addbook

--@angularJS--一个简单的UI-Router路由demo的更多相关文章

  1. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  2. 一个简单的MariaDB认证插件demo

    代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...

  3. [安卓基础] 005.创建一个简单的UI

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  4. Angularjs ui router,路由嵌套 父controller执行问题

    解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...

  5. 一个简单的IM系统（Demo附源码）－－ ESFramework 4.0 快速上手（08）

    前面的文章已经介绍完了基于ESFramework/ESPlus进行二次开发的所有要点,现在,我们可以开始小试牛刀了. 本文将介绍使用ESFramework的Rapid引擎开发的两个最简单的Demo,E ...

  6. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  7. 聊聊UDP、TCP和实现一个简单的JAVA UDP小Demo

    最近真的比较忙,很久就想写了,可是一直苦于写点什么,今天脑袋灵光一闪,觉得自己再UDP方面还有些不了解的地方,所以要给自己扫盲. 好了,咱们进入今天的主题,先列一下提纲: 1. UDP是什么,UDP适 ...

  8. 【Spring Boot】创建一个简单的Spring Boot的 Demo

    走进Spring Boot 文章目录 走进Spring Boot 环境搭建 新建Spring Boot项目 开始创建项目 配置JDK版本 和 Initializr Service URL 配置Proj ...

  9. 一个简单的物料防错DEMO

    前言 快2个月没写过博客了,就算是记流水账似的文章都没时间写,主要是太忙了:太多的bug要修复.太多由于bug引起的异常问题要解决.还有新的项目要开发,不忙怎么行呢?最近利用业余时间在鼓捣一个PDA的 ...

  10. 也谈SSO，一个简单实用的单点登录Demo

    关于SSO(单点登录),百度百科解释如下 : “SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要 ...

随机推荐

  1. linux操作命令实验

    实验内容:文件操作与用户操作实验 实验设备(环境):电脑.Vmware WorkStation 实验步骤: 一.创建新用户bob 目的:练习useradd命令 二.为新用户bob设置口令 目的:练习p ...

  2. vc6 pbo 文件为空的解决方法

    使用Profile调试vc6应用程序的性能时,将生成pbo文件,今天在vc IDE中增加了命令行启动参数,导致profile无法生成pbo文件,进而无法生成性能报告. 解决方法: 去掉IDE中的命令行 ...

  3. urllib2修改header

    python网络访问的标准模块 urllib与urllib2并不是升级版的关系,具体可见谷歌文章:difference between urllib and urllib2urllib2的官方文档:h ...

  4. LCD12864 液晶显示-汉字及自定义显示（串口）

    在网上找了许久,发现FPGA用串口驱动LCD12864程序很少,基本上没有.刚开始窃喜,中间郁闷,最后还是高兴,为什么这样说呢!头一回在没有参考程序的情况下,完全是照时序图写(自信),中间调试过程遇到 ...

  5. 转 Encoding is Not Encryption 编码和加密的区别

    昨天跟别人聊天的时候,别人把base64说成了加密. 我并不是扣字眼,但是做为一个IT技术人员我认为分辨加密和编码的区别算是一个常识. It's unfortunate that the words  ...

  6. hibernate--session的CRUD方法, delete, load,get,update,saveorupdate, clear, flush

    删除方法: 新建的对象立马被删除 @Test public void testDelete() { Teacher t = new Teacher(); t.setName("t1" ...

  7. sed基本用法

    sed命令基本用法sed是一个非交互式文本编辑器,它可以对文本文件和标准输入进行编辑,标准输入可以是来自键盘输入.文件重定向.字符串.变量.来自管道的文本等等.sed从文本的一个文本行或标准输入中读取 ...

  8. linux分区-df

    转自:http://baike.baidu.com/link?url=tyonI3NCB3F-ytIQz72PY-8uAaUQgfFFXbyKAea1e2NiB_t5AsE0MLOLc2LcqOiS ...

  9. HCSR04超声波传感器驱动

    HC_SR04是一款使用较为广泛的超声波测距模块,模块图如下 该模块具有四个引脚,分别为VCC GND TRIG ECHO,其中VCC GND为供电脚 TRIG为测距触发引脚,ECHO为测距输入引脚 ...

  10. realvnc的卸载

    我安装了realvnc5.3.2后,采用如下方式卸载: (1)用如下命令查询当前安装的realvnc包的全名: rpm -qa realvnc-vnc-server (2) rpm -e 查询到的安装 ...