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

AngularJS+RequireJs实现动态加载JS和页面的方案研究1、入口页面存放地址：src/main/webapp/WEB-INF/view/workflow/workflow.jsp[html]viewplaincopy在CODE上查看代码片派生到我的代码片!DOCTYPEhtmlhtmllang=zhheadmetacharset=UTF-8title/titlelinkhref=%=request.getContextPath()%/static/css/bootstrap/3.3.5/bootstrap.min.cssrel=stylesheetlinkhref=%=request.getContextPath()%/static/css/sweetalert/sweetalert.cssrel=stylesheetlinkhref=%=request.getContextPath()%/static/css/angularCommon.cssrel=stylesheetscriptdata-main=%=request.getContextPath()%/static/js/workflow/app.jssrc=%=request.getContextPath()%/static/js/bower_components/requirejs/require.js/script/headbodydivh1这里是公共头部/h1/divdivng-controller=baseCtrl!--buttonng-click=baseClick()按钮测试/button--divui-view/div/divdivh1这里是公共尾部/h1buttonid=test根据js内容动态显示/button/div/body/html在上面引入了requirejs2、app.js[html]viewplaincopy在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){varregisterRoutes=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}));};varapp=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(测试按钮)}});returnangularAMD.bootstrap(app);});在这里引入了一些需要的模块，其中就一些模块是笔者我自己写的。有的是第三方插件的这里特别注意，由于SpringMVC会拦截.jsp结尾的文件。所以动态加载的页面笔者都写到js文件中。如上面的about-view.js和home-view.js.其要动态加载的js文件分别为about.js和home.js。如果不使用SpringMVc。那么动态加载的页面就可以不用写到js文件中（笔者的工程中配置了拦截.jsp文件，不拦截.js文件）3、动态加载的内容：home.js[html]viewplaincopy在CODE上查看代码片派生到我的代码片define(['app'],function(app){app.controller('HomeViewController',['$scope',function($scope){document.getElementById(test).onclick=function(){swal($scope.title);}$scope.title=HomeHomeHomeHome;}]);});home-view.js[html]viewplaincopy在CODE上查看代码片派生到我的代码片divng-controller=HomeViewControllerbuttonui-sref=aboutAbout/buttonh1{{title}}/h1br/formname=registerFormid=registerFormmethod=postclass=form-horizontalnovalidatepclass=bg-warningstyle=margin-left:50px;margin-right:50px;iclass=glyphiconglyphicon-info-sign/ispanb温馨提示:带spanstyle=color:red*/span为必填项/b/span/pdivdivclass=form-groupstyle=margin-left:50px;margin-right:-250px;labelclass=control-labelcol-md-1for=merchantName商户名称spanstyle=color:red*/span/labeldivclass=col-md-2show-errorsinputtype=textclass=form-controlid=merchantNamename=merchantNameng-model=merhantBaseInfo.merchantNamerequireddivclass=help-blockng-messages=registerForm.merchantName.$errorng-if=registerForm.merchantName.$touchedspanng-message=required用户名不能为空/span/div/divlabelclass=control-labelcol-md-1for=merchantShortName商户简称/labeldivclass=col-md-2inputtype=textclass=form-controlid=merchantShortNamename=merchantShortNameng-model=merhantBaseInfo.merchantShortName/divlabelclass=control-labelcol-md-1for=type商户类型spanstyle=color:red*/span/labeldivclass=col-md-2show-errorsselectclass=form-controlid=typename=typeng-model=merhantBaseInfo.typeng-options=type.nameastype.descfortypeinMerchantTypeArrayrequiredoptionvalue=--请选择--/option/selectdivclass=help-blockng-messages=registerForm.type.$errorng-if=registerForm.type.$touchedspanng-message=required商户类型不能为空/span/div/div/divdivclass=form-groupstyle=margin-left:50px;margin-right:-250px;labelclass=control-labelcol-md-1for=comRegName商户工商注册全名spanstyle=color:red*/span/labeldivclass=col-md-5show-errorsinputtype=textclass=form-controlid=comRegNamename=comRegNameng-model=merhantBaseInfo.comRegNamerequireddivclass=help-blockng-messages=registerForm.comRegName.$errorng-if=register