AngularJSRequireJs实现动态加载JS和页面方案研究.docVIP

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],