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. Android -----paint cap join 理解 ，paint画笔形状设置

    引自:http://www.2cto.com/kf/201501/370215.html 网上查了很多资料,对paint的里面的枚举类cap join讲的不是很透彻.在这里自己做一个比较深入的研究. ...

  2. 请教<context:component-scan/>和<mvc:annotation-driven/>的区别20

    http://www.iteye.com/problems/66133 FileSystemXmlApplicationContext

  3. 推荐！国外程序员整理的Java资源大全

    http://www.importnew.com/14429.html 本文由 ImportNew - 唐尤华 翻译自 github akullpp.欢迎加入翻译小组.转载请见文末要求. 构建 这里搜 ...

  4. 如何理解java的引用传递

    1. 数组的引用传递 public class TestArray { public static void changeAry1(int[] ary){ int[] ary1 = {9,9,9}; ...

  5. Linux 最简单的驱动程序hello world

    图片驱动位置:kernel3-10/driver/misc/mediatek/imgsensor/src/mt8127/kd_sensorlist.c 例子:kernel-3.10/driver/mi ...

  6. PHP 实现冒泡法排序

    <?php $nums = array(10,0,20,30,50,40,80); function stor($numbers){ $length = count($numbers); for ...

  7. iOS KVC setValuesForKeysWithDictionary的使用

    Key Value Coding Key Value Coding是cocoa的一个标准组成部分,它能让我们可以通过name(key)的方式访问property, 不必调用明确的property ac ...

  8. linux 驱动入门5

    慢慢的开始转驱动,目前比较有时间,一定要把驱动学会.哎.人生慢慢路,一回头.已经工作了八九年了.努力.在买套房.改退休了.学驱动.个人认为首先要熟悉驱动框架.慢慢来.心急吃不了热豆腐. 看网上都说的设 ...

  9. mysql 查找重复的数据

    Select Name,Count(*) From A Group By Name Having Count(*) > 1   Name是字段

  10. c#中怎么求百分比

    string Scorepercent = (lowScoreNum*1.0/ ScoreNum).ToString("P");//百分比 ToString("P&quo ...