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. 生日蛋糕(DFS)

    题意: Description 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体.   设从下往上数第i(1 <= i <= M)层蛋糕 ...

  2. 总结自己的Git常用命令

    总结自己的Git常用命令 使用git也有一段时间了,把自己常用的命令用自己的描述记录起来,方便自己备忘也方便其他人参考. 目录: 最基本的命令: git clone 拷贝并跟踪远程的master分支. ...

  3. C/C++ strtok函数

    一.头文件:#include <string.h> 二.函数原型:char * strtok (char *str, const char * delimiters); 三.参数:str, ...

  4. DWR 整合之Struts2.3.16

    DWR 能够和任何框架结合. DWR 和 Struts 整合有 2 个层次.最基础的层次就是同时使用这两个框架,这是非常容易的,但是这样就不允许在 DWR 和 Struts 之间共享 Action 了 ...

  5. CSS中关于margin的理解误区

    思考一 在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离. 但是实际是:相对于自身原来的位置偏移. 举个例子: <!DOCTYPE HTML ...

  6. Python异常处理体系

    1.Python内建异常体系结构 The class hierarchy for built-in exceptions is: BaseException  +-- SystemExit  +-- ...

  7. JAVA中SSL证书认证通讯

    JAVA中SSL证书认证通讯 SSL通讯服务端 /******************************************************************** * 项目名称 ...

  8. codeforce 611B New Year and Old Property

    暴力搞 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> u ...

  9. 关于python 函数参数

    函数参数:必选参数.默认参数.可选参数.关键字参数 1.默认参数 默认参数可以简化函数的调用.设置默认参数时,有几点要注意: 一是必选参数在前,默认参数在后,否则Python的解释器会报错: 二是如何 ...

  10. 推荐几个web中常用js图表插件

    作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart elycharts jquery ...