AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】

1、入口页面

存放地址：src/main/webapp/WEB-INF/view/workflow/workflow.jsp

[html] view plain copy 在CODE上查看代码片派生到我的代码片

<!DOCTYPE html>

<head>

</head>

<body>

<div>

<h1>这里是公共头部</h1>

</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文件）

转载于:https://www.cnblogs.com/ndos/p/8331744.html

AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】相关推荐

AngularJS+RequireJs实现动态加载JS和页面的方案研究
摘要:本文是笔者研究了几天的动态加载方案的成果,前台使用的是AngularJS+RequireJs+angular-ui-router+angularAMD.后台使用了SpringMVC+Spring ...
JavaScript动态加载js文件
/********************************************************************** JavaScript动态加载js文件* 说明:* 之前没 ...
php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
ExtJS4.x动态加载js文件
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...
js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...
动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...
如何通过JavaScript动态加载js
在Web开发时,有可能会遇到这么一种情况:我们需要通过一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载.于是,我们有了通过js动态加 ...
4种动态加载JS的方法
要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write(& ...
转：JS动态加载JS
JS动态加载JS 1.直接document.write <script language="javascript"> document.write("< ...

AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】

AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】相关推荐

最新文章

热门文章