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

前端之家收集整理的这篇文章主要介绍了AngularJS+RequireJs实现动态加载JS和页面的方案研究前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

摘要:本文是笔者研究了几天的动态加载方案的成果,前台使用的是AngularJS+RequireJs+angular-ui-router+angularAMD。后台使用了SpringMVC+Spring。

1、入口页面

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title></title>
  6. <link href="<%=request.getContextPath()%>/static/css/bootstrap/3.3.5/bootstrap.min.css" rel="stylesheet">
  7. <link href="<%=request.getContextPath()%>/static/css/sweetalert/sweetalert.css" rel="stylesheet" >
  8. <link href="<%=request.getContextPath()%>/static/css/angularCommon.css" rel="stylesheet" >
  9. <script data-main="<%=request.getContextPath()%>/static/js/workflow/app.js" src="<%=request.getContextPath()%>/static/js/bower_components/requirejs/require.js"></script>
  10. </head>
  11. <body>
  12. <div>
  13. <h1>这里是公共头部</h1>
  14. </div>
  15. <div ng-controller = "baseCtrl">
  16. <!-- <button ng-click = "baseClick()">按钮测试</button> -->
  17. <div ui-view></div>
  18. </div>
  19. <div>
  20. <h1>这里是公共尾部</h1>
  21. <button id = "test">根据js内容动态显示</button>
  22. </div>
  23. </body>
  24. </html>
在上面引入了requirejs

2、app.js

  1. require.config({
  2. paths: {
  3. "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"
  4. },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"]
  6. }
  7. });
  8. define(["angular","angularAMD","angular-ui-router","sweetalert","uiBootstrap","angular-messages","angular-locale_zh-cn","commonFunction","commonValueAndUrl","workFlowCommonModule"],function (angular,angularAMD) {
  9. var registerRoutes = function($stateProvider,$urlRouterProvider) {
  10. $urlRouterProvider.otherwise("/home");
  11. $stateProvider.state("home",angularAMD.route({
  12. url: "/home",templateUrl: "../static/js/workflow-view/home-view.js",controllerUrl: "../static/js/workflow/home.js"
  13. }))
  14. .state("about",angularAMD.route({
  15. url: "/about",templateUrl: "../static/js/workflow-view/about-view.js",controllerUrl: "../static/js/workflow/about.js"
  16. }))
  17. ;
  18. };
  19. var app = angular.module("app",["ui.router",'ui.bootstrap','ngMessages','commonModule']);
  20. app.config(["$stateProvider","$urlRouterProvider",registerRoutes]);
  21. app.controller('baseCtrl',function($scope,$uibModal,sendAjaxFactory) {
  22. $scope.baseClick = function () {
  23. swal("测试按钮")
  24. }
  25. });
  26. return angularAMD.bootstrap(app);
  27. });

在这里引入了一些需要的模块,其中就一些模块是笔者我自己写的。有的是第三方插件

这里特别注意,由于SpringMVC会拦截.jsp结尾的文件。所以动态加载 的页面笔者都写到js文件中。如上面的about-view.js和home-view.js.其要动态加载的js文件分别 为about.js和home.js。如果不使用SpringMVc。那么动态加载的页面就可以不用写到js文件中(笔者 的工程中配置了拦截.jsp文件,不拦截.js文件

3、动态加载的内容

home.js

  1. define(['app'],function(app)
  2. {
  3. app.controller('HomeViewController',['$scope',function($scope) {
  4. document.getElementById("test").onclick = function(){
  5. swal($scope.title);
  6. }
  7. $scope.title = "Home Home Home Home";
  8. }
  9. ]);
  10. });

home-view.js

  1. <div ng-controller="HomeViewController">
  2. <button ui-sref="about">About</button>
  3. <h1>{{ title }}</h1>
  4. <br/>
  5. <form name = "registerForm" id = "registerForm" method="post" class="form-horizontal" novalidate >
  6. <p class="bg-warning" style = "margin-left:50px;margin-right:50px;"><i class="glyphicon glyphicon-info-sign"></i><span > <b>温馨提示:带<span style="color:red">*</span>为必填项</b></span></p>
  7. <div>
  8. <div class="form-group" style = "margin-left:50px;margin-right:-250px;">
  9. <label class="control-label col-md-1" for="merchantName">商户名称<span style="color:red">*</span></label>
  10. <div class="col-md-2" show-errors>
  11. <input type="text" class="form-control" id="merchantName" name = "merchantName" ng-model="merhantBaseInfo.merchantName" required>
  12. <div class="help-block" ng-messages="registerForm.merchantName.$error" ng-if="registerForm.merchantName.$touched">
  13. <span ng-message="required" >用户名不能为空</span>
  14. </div>
  15. </div>
  16. <label class="control-label col-md-1" for="merchantShortName">商户简称</label>
  17. <div class="col-md-2" >
  18. <input type="text" class="form-control" id="merchantShortName" name ="merchantShortName" ng-model="merhantBaseInfo.merchantShortName" >
  19. </div>
  20. <label class="control-label col-md-1" for="type">商户类型<span style="color:red">*</span></label>
  21. <div class="col-md-2" show-errors>
  22. <select class="form-control" id="type" name = "type" ng-model="merhantBaseInfo.type" ng-options="type.name as type.desc for type in MerchantTypeArray" required >
  23. <option value="">-- 请选择 --</option>
  24. </select>
  25. <div class="help-block" ng-messages="registerForm.type.$error" ng-if="registerForm.type.$touched">
  26. <span ng-message="required" >商户类型不能为空</span>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="form-group" style = "margin-left:50px;margin-right:-250px;">
  31. <label class="control-label col-md-1" for="comRegName">商户工商注册全名<span style="color:red">*</span></label>
  32. <div class="col-md-5" show-errors>
  33. <input type="text" class="form-control" id="comRegName" name = "comRegName" ng-model="merhantBaseInfo.comRegName" required>
  34. <div class="help-block" ng-messages="registerForm.comRegName.$error" ng-if="registerForm.comRegName.$touched">
  35. <span ng-message="required" >商户注册全名不能为空</span>
  36. </div>
  37. </div>
  38. <label class="control-label col-md-1" for="industry">所属行业<span style="color:red">*</span></label>
  39. <div class="col-md-2" show-errors>
  40. <select class="form-control" id="industry" name = "industry" ng-model="merhantBaseInfo.industry" ng-options="industry.name as industry.desc for industry in IndustryArray" required>
  41. <option value="">-- 请选择 --</option>
  42. </select>
  43. <div class="help-block" ng-messages="registerForm.industry.$error" ng-if="registerForm.industry.$touched">
  44. <span ng-message="required" >所属行业不能为空</span>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="form-group" style = "margin-left:50px;margin-right:-250px;">
  49. <label class="control-label col-md-1" for="coopMode">合作模式<span style="color:red">*</span></label>
  50. <div class="col-md-2" show-errors>
  51. <select class="form-control" id="coopMode" name = "coopMode" ng-model="merhantBaseInfo.coopMode" ng-options="coopMode.name as coopMode.desc for coopMode in CoopModeArray" required>
  52. <option value="">-- 请选择 --</option>
  53. </select>
  54. <div class="help-block" ng-messages="registerForm.coopMode.$error" ng-if="registerForm.coopMode.$touched">
  55. <span ng-message="required" >合作模式不能为空</span>
  56. </div>
  57. </div>
  58. <label class="control-label col-md-1" for="baseAcctBank">基本帐户开户银行名称</label>
  59. <div class="col-md-2">
  60. <input type="text" class="form-control" id="baseAcctBank" name = "baseAcctBank" ng-model="merhantBaseInfo.baseAcctBank" >
  61. </div>
  62. <label class="control-label col-md-1" for="baseAcct">银行基本帐户账号</label>
  63. <div class="col-md-2" >
  64. <input type="text" class="form-control" id="baseAcct" name ="baseAcct" ng-model="merhantBaseInfo.baseAcct" >
  65. </div>
  66. </div>
  67. <div class="form-group" style = "margin-left:50px;margin-right:-250px;">
  68. <label class="control-label col-md-1" for="org">组织机构代码</label>
  69. <div class="col-md-2" show-errors>
  70. <input type="text" class="form-control" id="org" name = "org" ng-model="merhantBaseInfo.org" >
  71. </div>
  72. <label class="control-label col-md-1" for="businessLicense">营业执照</label>
  73. <div class="col-md-2" >
  74. <input type="text" class="form-control" id="businessLicense" name = "businessLicense" ng-model="merhantBaseInfo.businessLicense" >
  75. </div>
  76. <label class="control-label col-md-1" for="taxId">纳税人代码</label>
  77. <div class="col-md-2" >
  78. <input type="text" class="form-control" id="taxId" name = "taxId" ng-model="merhantBaseInfo.taxId" >
  79. </div>
  80. </div>
  81. <div class="form-group" style = "margin-left:50px;margin-right:-250px;">
  82. <label class="control-label col-md-1" for="officePhone">公司电话</label>
  83. <div class="col-md-2" >
  84. <input type="text" class="form-control" id="officePhone" name ="officePhone" ng-model="merhantBaseInfo.officePhone" >
  85. </div>
  86. <label class="control-label col-md-1" for="address">地址</label>
  87. <div class="col-md-2" >
  88. <input type="text" class="form-control" id="address" name = "address" ng-model="merhantBaseInfo.address" >
  89. </div>
  90. <label class="control-label col-md-1" for="websiteUrl">公司网址</label>
  91. <div class="col-md-2" >
  92. <input type="text" class="form-control" id="websiteUrl" name = "websiteUrl" ng-model="merhantBaseInfo.websiteUrl" >
  93. </div>
  94. </div>
  95. <div class="form-group" style = "margin-left:50px;margin-right:-250px;">
  96. <label class="control-label col-md-1" for="scale">企业规模</label>
  97. <div class="col-md-2">
  98. <select type="text" class="form-control" id="scale" name = "scale" ng-model="merhantBaseInfo.scale" ng-options="scale.name as scale.desc for scale in ScaleArray" >
  99. <option value="">-- 请选择 --</option>
  100. </select>
  101. </div>
  102. <label class="control-label col-md-1" for="legalPerson">企业法人</label>
  103. <div class="col-md-2">
  104. <input type="text" class="form-control" id="legalPerson" name = "legalPerson" ng-model="merhantBaseInfo.legalPerson" >
  105. </div>
  106. <label class="control-label col-md-1" for="legalPersonId">法人证件号码</label>
  107. <div class="col-md-2">
  108. <input type="text" class="form-control" id="legalPersonId" name = "legalPersonId" ng-model="merhantBaseInfo.legalPersonId" >
  109. </div>
  110. </div>
  111. <div class="form-group" style = "margin-left:50px;margin-right:-250px;">
  112. <label class="control-label col-md-1" for="province">合作区域<span style="color:red">*</span></label>
  113. <div class="col-md-2" show-errors>
  114. <select type="text" id = "province" name = "province" class="form-control" ng-model="merhantBaseInfo.province" ng-change = "changeProvince()" ng-options="province.areaId as province.areaName for province in AllProvinceArray" required>
  115. <option value="">---请选择---</option>
  116. </select>
  117. <div class="help-block" ng-messages="registerForm.province.$error" ng-if="registerForm.province.$touched">
  118. <span ng-message="required" >合作区域不能为空</span>
  119. </div>
  120. </div>
  121. <div class="col-md-2">
  122. <select type="text" class="form-control" ng-model="merhantBaseInfo.city" ng-change="changeCity()" ng-options="city.areaId as city.areaName for city in nowCityArray">
  123. <option value="">---请选择---</option>
  124. </select>
  125. </div>
  126. <div class="col-md-2">
  127. <select type="text" class="form-control" ng-model="merhantBaseInfo.district" ng-change="area=''" ng-options="district.areaId as district.areaName for district in nowDistrictArray">
  128. <option value="">---请选择---</option>
  129. </select>
  130. </div>
  131. </div>
  132. <div class="form-group" style = "margin-left:50px;margin-right:-250px;">
  133. <label class="control-label col-md-1" for="remark">备注</label>
  134. <div class="col-md-8">
  135. <textarea class="form-control" cols="4" id="remark" name="remark" ng-model="merhantBaseInfo.remark" rows="2" style = "resize: none;"></textarea>
  136. </div>
  137. </div>
  138. </div>
  139. <div>
  140. </form>
  141.  
  142. </div>



about.js:

  1. define(['app'],function(app)
  2. {
  3. app.controller('AboutViewController',function($scope) {
  4. document.getElementById("test").onclick = function(){
  5. swal($scope.title);
  6. }
  7. $scope.title = "About About About About";
  8. }
  9. ]);
  10. });
其对应的页面内容about-view.js:
  1. <div ng-controller="AboutViewController">
  2. <button ui-sref="home">Home</button>
  3. <h1>{{ title }}</h1>
  4. <form name = "registerForm" method="post" class="form-horizontal" novalidate >
  5. <p class="bg-warning" style = "margin-left:50px;margin-right:50px;"><i class="glyphicon glyphicon-info-sign"></i><span > <b>温馨提示:带<span style="color:red">*</span>为必填项</b></span><span ng-show = "contractInfo.status == 'INVALID'||contractInfo.status == 'END'" ><b></b></span></p>
  6. <p style = "margin-left:50px;margin-right:50px;" ng-show = "contractInfo.status == 'INVALID'||contractInfo.status == 'END'"><b>已失效或终止的合同不能再修改内容!</b></p>
  7. <p style = "margin-left:50px;margin-right:50px;" ng-show = "contractInfo.status == 'EFFECTIVE'"><b>已生效的合同只能修改部分内容!</b></p>
  8. <div>
  9. <div class="form-group" >
  10. <label class="control-label col-md-2 " for = "merchantId">商户<span style="color:red">*</span></label>
  11. <div class="col-md-3" show-errors>
  12. <select class="form-control" id="merchantId" name = "merchantId" ng-model="contractInfo.merchantId" ng-options="merchantNameAndId.merchantId as merchantNameAndId.merchantName for merchantNameAndId in merchantNameArray" required >
  13. <option value="">-- 请选择 --</option>
  14. </select>
  15. <div class="help-block" ng-messages="registerForm.merchantId.$error" ng-if="registerForm.merchantId.$touched">
  16. <span ng-message="required" >商户不能为空</span>
  17. </div>
  18. </div>
  19. <label class="control-label col-md-2" for="contractNo">合同编号</label>
  20. <div class="col-md-3" >
  21. <input type="text" class="form-control" id="contractNo" name = "contractNo" ng-model="contractInfo.contractNo" >
  22. </div>
  23. </div>
  24. <div class="form-group" >
  25. <label class="control-label col-md-2" for="signDate">合同签订日期<span style="color:red">*</span></label>
  26. <div class="col-md-3" show-errors>
  27. <div class="input-group" readonly= "readonly">
  28. <input type="text" class="form-control" id="signDate" name = "signDate" ng-model="contractInfo.signDate" is-open="signDateOpened" ng-click = "signDateOpened = true" datepicker-options="dateOptions" current-text="今天" clear-text="清除" close-text="关闭" readonly ="readonly" date-format uib-datepicker-popup required>
  29. <span class="input-group-addon" ng-click = "signDateOpened = true"><i class="glyphicon glyphicon-calendar"></i></span>
  30. </div>
  31. <div class="help-block" ng-messages="registerForm.signDate.$error" ng-if="registerForm.signDate.$touched">
  32. <span ng-message="required" >合同签订日期不能为空</span>
  33. </div>
  34. </div>
  35. <label class="control-label col-md-2" for="signPerson">合同签署人<span style="color:red">*</span></label>
  36. <div class="col-md-3" show-errors>
  37. <input type="text" class="form-control" id="signPerson" name ="signPerson" ng-model="contractInfo.signPerson" required >
  38. <div class="help-block" ng-messages="registerForm.signPerson.$error" ng-if="registerForm.signPerson.$touched" >
  39. <span ng-message="required" >合同签署人不能为空</span>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="form-group">
  44. <label class="control-label col-md-2" for="effectDate">合同生效日期<span style="color:red">*</span></label>
  45. <div class="col-md-3" show-errors>
  46. <div class="input-group" >
  47. <input type="text" class="form-control" id="effectDate" name = "effectDate" ng-model="contractInfo.effectDate" is-open="effectDateOpened" ng-click = "effectDateOpened = true" datepicker-options="dateOptions" current-text="今天" clear-text="清除" close-text="关闭" readonly ="readonly" date-format uib-datepicker-popup required>
  48. <span class="input-group-addon" ng-click = "effectDateOpened = true"><i class="glyphicon glyphicon-calendar"></i></span>
  49. </div>
  50. <div class="help-block" ng-messages="registerForm.effectDate.$error" ng-if="registerForm.effectDate.$touched">
  51. <span ng-message="required" >合同生效日期不能为空</span>
  52. </div>
  53. </div>
  54. <label class="control-label col-md-2" for="expiryDate">合同失效日期<span style="color:red">*</span></label>
  55. <div class="col-md-3" show-errors>
  56. <div class="input-group" >
  57. <input type="text" class="form-control" id="expiryDate" name = "expiryDate" ng-model="contractInfo.expiryDate" is-open="expiryDateOpened" ng-click = "expiryDateOpened = true" datepicker-options="dateOptions" current-text="今天" clear-text="清除" close-text="关闭" readonly ="readonly" date-format uib-datepicker-popup required>
  58. <span class="input-group-addon" ng-click = "expiryDateOpened = true"><i class="glyphicon glyphicon-calendar"></i></span>
  59. </div>
  60. <div class="help-block" ng-messages="registerForm.expiryDate.$error" ng-if="registerForm.expiryDate.$touched">
  61. <span ng-message="required" >合同失效日期不能为空</span>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="form-group">
  66. <label class="control-label col-md-2" for="autoResignFlag">到期自动续签<span style="color:red">*</span></label>
  67. <div class="col-md-3" show-errors>
  68. <select class="form-control" id="autoResignFlag" name = "autoResignFlag" ng-model="contractInfo.autoResignFlag" ng-change = "changeAutoResignFlag()" ng-options="yesNo.name as yesNo.desc for yesNo in YesNoArray" required >
  69. </select>
  70. <div class="help-block" ng-messages="registerForm.autoResignFlag.$error" ng-if="registerForm.autoResignFlag.$touched">
  71. <span ng-message="required" >到期自动续签不能为空</span>
  72. </div>
  73. </div>
  74. <label class="control-label col-md-2" for="autoResignYears">自动续签期限</label>
  75. <div class="col-md-3" >
  76. <input type="text" class="form-control" id="autoResignYears" name = "autoResignYears" ng-model="contractInfo.autoResignYears" placeholder = "单位为月" >
  77. <div class="help-block" ng-messages="registerForm.autoResignYears.$error" ng-if="registerForm.autoResignYears.$touched">
  78. <span ng-message="required" >自动续签期限不能为空</span>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="form-group">
  83. <label class="control-label col-md-2" for="fundTyps">涉及款项列表</label>
  84. <div class="col-md-3" >
  85. <input type="text" class="form-control" id="fundTyps" name = "fundTyps" ng-model="contractInfo.fundTyps" >
  86. </div>
  87. <label class="control-label col-md-2" for="specialInstallReq">有特殊分期要求<span style="color:red">*</span></label>
  88. <div class="col-md-3" show-errors>
  89. <select class="form-control" id="specialInstallReq" name = "specialInstallReq" ng-model="contractInfo.specialInstallReq" ng-options="yesNo.name as yesNo.desc for yesNo in YesNoArray" required>
  90. </select>
  91. <div class="help-block" ng-messages="registerForm.specialInstallReq.$error" ng-if="registerForm.specialInstallReq.$touched">
  92. <span ng-message="required" >特殊分期要求不能为空</span>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="form-group">
  97. <label class="control-label col-md-2" for="remark">备注</label>
  98. <div class="col-md-8">
  99. <textarea class="form-control" cols="4" id="remark" name="remark" ng-model="contractInfo.remark" rows="2" style = "resize: none;"></textarea>
  100. </div>
  101. </div>
  102. <div class="form-group" style = "text-align:center">
  103. <button class="btn btn-primary" type="button" ng-click="okContractEdit()" ng-show = "contractEditable" >保存修改</button>
  104. <button class="btn btn-warning" type="button" ng-click="cancelContractEdit()"ng-show = "contractEditable" >取消修改</button>
  105. </div>
  106. </div>
  107. <div>
  108. </form>
  109. </div>

4、效果展示:

首先进入主页


看看其加载的js文件,可以看到只加载 了home.js和home-view.js文件

再点击about按钮,加载about页面,可以看到加载了about.js和about-view.js文件


然后是页面

猜你在找的Angularjs相关文章