javascript
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"],?
??????? "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文件）
轉載于:https://www.cnblogs.com/ndos/p/8331744.html
總結
以上是生活随笔為你收集整理的AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ORACLE使用GV_$TEMP_SPA
- 下一篇： javascript等号判断相等流程