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

AngularJS+RequireJs实现动态加载JS和页面的方案研究1、入口页面存放地址：src/main/webapp/WEB-INF/view/workflow/workflow.jsphtml view plain copy 在CODE上查看代码片派生到我的代码片 link href=/static/css/bootstrap/3.3.5/bootstrap.min.css rel=stylesheet link href=/static/css/sweetalert/sweetalert.css rel=stylesheet link href=/static/css/angularCommon.css rel=stylesheet script data-main=/static/js/workflow/app.js src=/static/js/bower_components/requirejs/require.js 这里是公共头部 !- 按钮测试 - 这里是公共尾部 根据js内容动态显示 在上面引入了requirejs2、app.jshtml 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文件）3、动态加载的内容：home.jshtml view plain copy 在CODE上查看代码片派生到我的代码片define(app, function(app) app.controller(HomeViewController, $scope,function($scope) document.getElementById(test).onclick = function() swal($scope.title); $scope.title = Home Home Home Home; ); ); home-view.jshtml view plain copy 在CODE上查看代码片派生到我的代码片 About title 温馨提示:带 *为必填项 商户名称 * 用户名不能为空 商户简称 商户类型 * - 请选择 - 商户类型不能为空 商户工商注册全名 * 商户注册全名不能为空 所属行业 * - 请选择 - 所属行业不能为空 合作模式 * - 请选择 - 合作模式不能为空 基本帐户开户银行名称 银行基本帐户账号 组织机构代码 营业执照 纳税人代码 公司电话 地址 公司网址 企业规模 - 请选择 - 企业法人 法人证件号码 合作区域 * -请选择- 合作区域不能为空 -请选择- -请选择- 备注 about.js:html view plain copy 在CODE上查看代码片派生到我的代码片define(app, function(app) app.controller(AboutViewController, $scope,function($scope) document.getElementById(test).onclick = function() swal($scope.title); $scope.title = Abo