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. git使用时遭遇the authenticity of host can't be established

    修改/etc/ssh/ssh_config文件的配置,以后则不会再出现此问题 最后面添加: StrictHostKeyChecking no UserKnownHostsFile /dev/null

  2. Using StructureMap DI and Generic Repository

    In this post, i will show how to use generic repository and dependency injection using structuremap. ...

  3. extjs入门

    http://blog.csdn.net/xiebaochun/article/details/36414437

  4. PAT (Advanced Level) 1002. A+B for Polynomials (25)

    为0的不要输出. #include<iostream> #include<cstring> #include<cmath> #include<algorith ...

  5. Nexus搭建私服 学习

    为什么要搭建nexus私服 因为有些公司不提供外网给项目组人员,因此就不能使用maven访问远程的仓库地址,所以,有必要再局域网里找一台有外网权限的机器.搭建nexus私服,然后开发人员连接到这台私服 ...

  6. Codeforces #377 Div2

    打得还不错的一场CF,题目质量也很高,今后还要继续努力 A题: 题意:给定一个数k,让其乘一个最小的数,使乘得以后的数要不被10整除,要不减去r以后被10整除,求这个最小的数 #include < ...

  7. 多机并行计算框架 和CoolHash数据库(可用于多机机器学习)

    http://my.oschina.net/fourinone/blog/289122 http://www.oschina.net/p/fourinone

  8. Sublime 2 配置

    在队友的推荐下,爱上了这款神一样的文本编辑器,熟练之后编辑效率真心是大幅提升啊. 一.Package Control Sublime拥有很强大的插件功能,而自带的缺少个管理工具,这个包可以用来很方便地 ...

  9. 无源RS232转RS485（转）

    源:无源RS232转RS485 RS232  -485转换器主要包括了电源.232电平转换.485电路三部分.本电路的232电平转换电路采用了NIH232或者也可以直接使用MAX232集成电路,485 ...

  10. HDU 5677 ztr loves substring

    Manacher+二维费用多重背包 二进制优化 这题是一眼标算....先计算出每个长度的回文串有几种,然后用二维费用的多重背包判断是否有解. 多重背包做的时候需要二进制优化. #include< ...