《AngularJS+RequireJs实现动态加载JS和页面的方案研究.docx》由会员分享，可在线阅读，更多相关《AngularJS+RequireJs实现动态加载JS和页面的方案研究.docx（23页珍藏版）》请在三一办公上搜索。
1、AngularJS+RequireJs实现动态加载JS和页面的方案研究 AngularJS+RequireJs实现动态加载JS和页面的方案研究 1、入口页面 存放地址：src/main/webapp/WEB-INF/view/workflow/workflow.jsp html 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=s
2、tylesheet 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内容动态显示 在上面引入了requirejs 2、app.js html view plain copy 在CODE上查看代码片派生到我的代码片 require.config( paths: angular: ./a
3、ngular/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_compone
4、nts/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:
5、 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-route
6、r,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
7、: /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
8、.bootstrap,ngMessages,commonModule); app.config($stateProvider, $urlRouterProvider, registerRoutes); app.controller(baseCtrl,function($scope,$uibModal,sendAjaxFactory) $scope.baseClick = function swal(测试按钮) ); return angularAMD.bootstrap(app); ); 在这里引入了一些需要的模块，其中就一些模块是笔者我自己写的。有的是第三方插件的 这里特别注意，由于Spri
9、ngMVC会拦截.jsp结尾的文件。所以动态加载 的页面笔者都写到js文件中。如上面的about-view.js和home-view.js.其要动态加载的js文件分别 为about.js和home.js。如果不使用SpringMVc。那么动态加载的页面就可以不用写到js文件中 3、动态加载的内容： home.js html view plain copy 在CODE上查看代码片派生到我的代码片 define(app, function(app) app.controller(HomeViewController, $scope,function($scope) document.getElem
10、entById(test).onclick = function swal($scope.title); $scope.title = Home Home Home Home; ); ); home-view.js html view plain copy 在CODE上查看代码片派生到我的代码片 About title 温馨提示:带 *为必填项 商户名称 * 用户名不能为空 商户简称 商户类型 * - 请选择 - 商户类型不能为空 商户工商注册全名 * 商户注册全名不能为空 所属行业 * - 请选择 - 所属行业不能为空 合作模式 * - 请选择 - 合作模式不能为空 基本帐户开户银行名称 银行基本帐户账号 组织机构代码 营业执照 纳税人代码 公司电话 地址 公司网址 企业规模 - - 企业法人 法人证件号码 合作区域 * select type=text id = province name = province class=form-contro
