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. python+mysql抓取百度新闻的标题存到数据库

    #!usr/bin/python# -*- coding:utf-8 -*-import urllib2 import re import MySQLdb class BaiDuNews: def _ ...

  2. （转）在Java中如何遍历Map对象

    在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...

  3. openwrt串口的使用

    从 RT5350 的芯片手册上可以得知, RT5350 一共有两个串口, 分别为 UART Lite. UART Full, UART Lite 就是我们惯称为的串口 1,作为系统调试串口,通过这个串 ...

  4. 高并发数据库之MySql性能优化

    1.慢查询 SHOW VARIABLES LIKE '%quer%'

  5. 【翻译】go语言中的map实战

    业余时间翻译,水平很差,如有瑕疵,纯属无能. 原文链接 http://blog.golang.org/go-maps-in-action go语言中的map实战 1. 简介 哈希表是计算机科学中最重要 ...

  6. Linux下的强大工具之一sed（转）,Shell必备

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

  7. (中等) POJ 3280 Cheapest Palindrome，DP。

    Description Keeping track of all the cows can be a tricky task so Farmer John has installed a system ...

  8. Arduino线程库ProtoThreads

    参考: Arduino线程库ProtoThreads 一个“蝇量级” C 语言协程库

  9. UCOSII在STM32F1上的移植

    UCOSII在STM32F1上的移植 首先准备好一份STM32F1的工程.UCOSII源码. 在准备好的工程中新建一个"UCOSII"文件夹(或者取其它名字也行): UCOSII文 ...

  10. mysqladmin: connect to server at 'localhost' failed error: 'Access denied for user 'root'@'localhost' (using password: YES)'

    就当作自己忘记Mysql密码把,忘记密码的解决方法 一.mysql登录错误mysqladmin: connect to server at 'localhost' failederror: 'Acce ...