AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】
1、入口页面
存放地址：src/main/webapp/WEB-INF/view/workflow/workflow.jsp
[html] view plain copy 在CODE上查看代码片派生到我的代码片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<link href="<%=request.getContextPath()%>/static/css/bootstrap/3.3.5/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/static/css/sweetalert/sweetalert.css" rel="stylesheet" >
<link href="<%=request.getContextPath()%>/static/css/angularCommon.css" rel="stylesheet" >
<script data-main="<%=request.getContextPath()%>/static/js/workflow/app.js" src="<%=request.getContextPath()%>/static/js/bower_components/requirejs/require.js"></script>
</head>
<body>
<div>
<h1>这里是公共头部</h1>
</div>
<div ng-controller = "baseCtrl">
<!-- <button ng-click = "baseClick()">按钮测试</button> -->
<div ui-view></div>
</div>
<div>
<h1>这里是公共尾部</h1>
<button id = "test">根据js内容动态显示</button>
</div>
</body>
</html>
在上面引入了requirejs
2、app.js
[html] view plain copy 在CODE上查看代码片派生到我的代码片
require.config({
paths: {
"angular": "../angular/1.5.3/angular.min",
"angular-messages":"../angular/1.5.3/angular-messages.min",
"angular-locale_zh-cn":"../angular/1.5.3/angular-locale_zh-cn",
"angular-ui-router": "../bower_components/angular-ui-router/release/angular-ui-router",
"angularAMD": "../bower_components/angularAMD/angularAMD",
"ngload": "../bower_components/angularAMD/ngload",
"sweetalert": "../sweetalert/sweetalert.min",
"uiBootstrap": "../angular-ui-bootstrap/1.2.4/ui-bootstrap-tpls-1.2.4.min",
"commonFunction":"../angularCommon/commonFunction",
"commonValueAndUrl":"../angularCommon/commonValueAndUrl",
"workFlowCommonModule":"../angularCommon/workFlowCommonModule"
},
shim: {
"angular": { exports: "angular" },
"workFlowCommonModule": ["angular"],
"angular-messages": ["angular"],
"angular-locale_zh-cn": ["angular"],
"commonValueAndUrl": ["commonFunction"],
"angular-ui-router": ["angular"],
"uiBootstrap": ["angular-ui-router"],
"angularAMD": ["angular"],
"ngload": ["angularAMD"]
}
});
define(["angular", "angularAMD", "angular-ui-router","sweetalert","uiBootstrap","angular-messages","angular-locale_zh-cn","commonFunction","commonValueAndUrl","workFlowCommonModule"], function (angular, angularAMD) {
var registerRoutes = function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider.state("home", angularAMD.route({
url: "/home",
templateUrl: "../static/js/workflow-view/home-view.js",
controllerUrl: "../static/js/workflow/home.js"
}))
.state("about", angularAMD.route({
url: "/about",
templateUrl: "../static/js/workflow-view/about-view.js",
controllerUrl: "../static/js/workflow/about.js"
}))
;
};
var app = angular.module("app", ["ui.router",'ui.bootstrap','ngMessages','commonModule']);
app.config(["$stateProvider", "$urlRouterProvider", registerRoutes]);
app.controller('baseCtrl',function($scope,$uibModal,sendAjaxFactory) {
$scope.baseClick = function () {
swal("测试按钮")
}
});
return angularAMD.bootstrap(app);
});
在这里引入了一些需要的模块，其中就一些模块是笔者我自己写的。有的是第三方插件的
这里特别注意，由于SpringMVC会拦截.jsp结尾的文件。所以动态加载 的页面笔者都写到js文件中。如上面的about-view.js和home-view.js.其要动态加载的js文件分别 为about.js和home.js。如果不使用SpringMVc。那么动态加载的页面就可以不用写到js文件中（笔者 的工程中配置了拦截.jsp文件，不拦截.js文件）
AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】的更多相关文章
- AngularJS+RequireJs实现动态加载JS和页面的方案研究【中】
3.动态加载的内容: home.js [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.co ...
- AngularJS+RequireJs实现动态加载JS和页面的方案研究【下】
about.js: [html] view plain copy 在CODE上查看代码片派生到我的代码片 define(['app'], function(app) { app.controller( ...
- [AngularJS] 使用AngularAMD动态加载Controller
[AngularJS] 使用AngularAMD动态加载Controller 前言 使用AngularJS来开发Single Page Application(SPA)的时候,可以选用AngularU ...
- [AngularJS] 使用AngularCSS动态加载CSS
[AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...
- [AngularJS] 使用AngularAMD动态加载Service
[AngularJS] 使用AngularAMD动态加载Service 前言 「使用AngularAMD动态加载Controller」:这篇文章里介绍如何使用AngularAMD来动态加载Contro ...
- 使用jQuery动态加载js脚本
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...
- 使用jQuery动态加载js脚本文件的方法
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...
- JavaScript动态加载js文件
/********************************************************************* * JavaScript动态加载js文件 * 说明: * ...
- 动态加载js和css
开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...
随机推荐
- ASP.NET：Application,Session,Cookie,ViewState和Cache之间的区别（转）
在ASP.NET中,有很多种保存信息的对象.例如:Application,Session,Cookie,ViewState和Cache等,那么它们有什么区别呢?每一种对象应用的环境是什么? 为了更清楚 ...
- JS对Date的扩展，将 Date 转化为指定格式的String
/** * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q) 可以用 1-2 个占位符 * ...
- Spark累加器
spark累计器 因为task的执行是在多个Executor中执行,所以会出现计算总量的时候,每个Executor只会计算部分数据,不能全局计算. 累计器是可以实现在全局中进行累加计数. 注意: 累加 ...
- 汉诺塔的python 动画演示
1.简介 古代有一座汉诺塔,塔内有3个座A.B.C,A座上有n个盘子,盘子大小不等,大的在下,小的在上,如图所示.有一个和尚想把这n个盘子从A座移到C座,但每次只能移动一个盘子,并且自移动过程中,3个 ...
- Python抓取远程文件获取真实文件名
用urllib下载远程文件并转存到hdfs服务器,在下载时,下载地址中不一定包含文件名,需要从连接信息中获取. 1 file_url = request.form.get('file_url') 2 ...
- (转)DB2性能优化 – 如何通过调整锁参数优化锁升级
原文:http://blog.51cto.com/5063935/2074306 1.概念描述 所谓的锁升级(lock escalation),是数据库的一种作用机制,为了节约内存的开销, 其会将为数 ...
- CentOS 6.4下安装JIRA6.3.6破解汉化
JIRA产品非常完善且功能强大,安装配置简单,多语言支持.界面十分友好,和其他系统如CVS.Subversion(SVN).VSS.LDAP.邮件服务整合得相当好,文档齐全,可用性以及可扩展性方面都十 ...
- Prinzipien der Computer Zusammensetzung
1.Die Einfuerung der Computer System 1.1 Computer Zusammensetzung und Computer Architektur Unter Com ...
- 【angular5项目积累总结】优秀组件以及应用实例
1.手机端 图片预览组件 组件:sideshow 效果图:(预览图全屏 且可以左右移动) code: <div class="row ui-app-s ...
- 用INFORMATION_SCHEMA逻辑MySQL的索引
分库分表的场景下,变更目前还不知道有哪个表变更索引失败,是不是所有的表都变更成功了,所以可以从INFORMATION_SCHEMA通过罗列索引个数,或者查看索引行,就可以知道是不是所有的都变更成功了: ...