--@angularJS--一个简单的UI-Router路由demo
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的更多相关文章
- 如何使用AEditor制作一个简单的H5交互页demo
转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...
- 一个简单的MariaDB认证插件demo
代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的 ...
- [安卓基础] 005.创建一个简单的UI
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Angularjs ui router,路由嵌套 父controller执行问题
解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...
- 一个简单的IM系统(Demo附源码)-- ESFramework 4.0 快速上手(08)
前面的文章已经介绍完了基于ESFramework/ESPlus进行二次开发的所有要点,现在,我们可以开始小试牛刀了. 本文将介绍使用ESFramework的Rapid引擎开发的两个最简单的Demo,E ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- 聊聊UDP、TCP和实现一个简单的JAVA UDP小Demo
最近真的比较忙,很久就想写了,可是一直苦于写点什么,今天脑袋灵光一闪,觉得自己再UDP方面还有些不了解的地方,所以要给自己扫盲. 好了,咱们进入今天的主题,先列一下提纲: 1. UDP是什么,UDP适 ...
- 【Spring Boot】创建一个简单的Spring Boot的 Demo
走进Spring Boot 文章目录 走进Spring Boot 环境搭建 新建Spring Boot项目 开始创建项目 配置JDK版本 和 Initializr Service URL 配置Proj ...
- 一个简单的物料防错DEMO
前言 快2个月没写过博客了,就算是记流水账似的文章都没时间写,主要是太忙了:太多的bug要修复.太多由于bug引起的异常问题要解决.还有新的项目要开发,不忙怎么行呢?最近利用业余时间在鼓捣一个PDA的 ...
- 也谈SSO,一个简单实用的单点登录Demo
关于SSO(单点登录),百度百科解释如下 : “SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要 ...
随机推荐
- spider JAVA如何判断网页编码 (转载)
原文链接 http://www.cnblogs.com/nanxin/archive/2013/03/27/2984320.html 前言 最近做一个搜索项目,需要爬取很多网站获取需要的信息.在爬取网 ...
- android Service Activity三种交互方式(付源码)(转)
android Service Activity三种交互方式(付源码) Android应用服务器OSBeanthread android Service Binder交互通信实例 最下边有源代码: ...
- 定时且周期性的任务研究I--Timer
很多时候我们希望任务可以定时的周期性的执行,在最初的JAVA工具类库中,通过Timer可以实现定时的周期性的需求,但是有一定的缺陷,例如:Timer是基于绝对时间的而非支持相对时间,因此Timer对系 ...
- MC34063+MOSFET扩流 12V-5V 折腾出了高效率电路(转)
源:http://www.amobbs.com/thread-5484710-1-1.html 从网上找到一些MC34063扩流降压电路图,一个个的试,根本达不到我的基本要求,全都延续了34063的降 ...
- git 以及 github 使用系列
本人打算开始写一个有关git 使用,以及github 使用的系列文章了,一来可以自己总结,二来github用好了,可以存放自己的一些知识框架吧. 1.准备 : 有一个 github上的账号, wind ...
- jQuery学习笔记—— .html(),.text()和.val()的使用
本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法.jQuery中为我 ...
- /system改成可写
读写: mount -o remount,rw /dev/block/mtdblock0 /system 只读mount -o remount,ro /dev/block/mtdblock0 /sys ...
- 创建git密钥的时候提示 too many arguments
这个时候只要这样做就ok了, 给邮箱包两层引号,如下: " 'zhangsanfeng@qq.com' " 妥妥的!
- 【安卓手机通用】android adb shell 命令大全
浏览:3116 | 更新:2013-10-17 17:05 | 标签:安卓 android 一.[什么是shell] Linux系统的shell作为操作系统的外壳,为用户提供使用操作系统的接口.它是命 ...
- C# DateTime变量不能赋null值
使用定时器的时候: DateTime aimtime=DateTime.Now.AddSeconds(1); CheckTimer() { if(DateTime.Now.CompareTo(aimt ...