AngularJS-RequireJs实现动态加载JS和页面方案研究.doc

资源描述

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">  <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文件） 3、动态加载的内容： home.js [html] 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.js [html] view plain copy 在CODE上查看代码片派生到我的代码片 <div ng-controller="HomeViewController"> <button ui-sref="about">About</button> <h1>{{ title }}</h1> <br/> <form name = "registerForm" id = "registerForm" method="post" class="form-horizontal" novalidate > <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> <div> <div class="form-group" style = "margin-left:50px;margin-right:-250px;"> <label class="control-label col-md-1" for="merchantName">商户名称<span style="color:red"> *</span></label> <div class="col-md-2" show-errors> <input type="text" class="form-control" id="merchantName" name = "merchantName" ng-model="merhantBaseInfo.merchantName" required> <div class="help-block" ng-messages="registerForm.merchantName.$error" ng-if="registerForm.merchantName.$touched"> <span ng-message="required" >用户名不能为空</span> </div> </div> <label class="control-label col-md-1" for="merchantShortName">商户简称</label> <div class="col-md-2" > <input type="text" class="form-control" id="merchantShortName" name ="merchantShortName" ng-model="merhantBaseInfo.merchantShortName" > </div> <label class="control-label col-md-1" for="type">商户类型<span style="color:red"> *</span></label> <div class="col-md-2" show-errors> <select class="form-control" id="type" name = "type" ng-model="merhantBaseInfo.type" ng-options="type.name as type.desc for type in MerchantTypeArray" required > <option value="">-- 请选择 --</option> </select> <div class="help-block" ng-messages="registerForm.type.$error" ng-if="registerForm.type.$touched"> <span ng-message="required" >商户类型不能为空</span> </div> </div> </div> <div class="form-group" style = "margin-left:50px;margin-right:-250px;"> <label class="control-label col-md-1" for="comRegName">商户工商注册全名<span style="color:red"> *</span></label> <div class="col-md-5" show-errors> <input type="text" class="form-control" id="comRegName" name = "comRegName" ng-model="merhantBaseIRegName" required> <div class="help-block" ng-messages="registerFRegName.$error" ng-if="registerFRegName.$touched"> <span ng-message="required" >商户注册全名不能为空</span> </div> </div> <label class="control-label col-md-1" for="industry">所属行业<span style="color:red"> *</span></label> <div class="col-md-2" show-errors> <select class="form-control" id="industry" name = "industry" ng-model="merhantBaseInfo.industry" ng-options="industry.name as industry.desc for industry in IndustryArray" required> <option value="">-- 请选择 --</option> </select> <div class="help-block" ng-messages="registerForm.industry.$error" ng-if="registerForm.industry.$touched"> <span ng-message="required" >所属行业不能为空</span> </div> </div> </div> <div class="form-group" style = "margin-left:50px;margin-right:-250px;"> <label class="control-label col-md-1" for="coopMode">合作模式<span style="color:red"> *</span></label> <div class="col-md-2" show-errors> <select class="form-control" id="coopMode" name = "coopMode" ng-model="merhantBaseInfo.coopMode" ng-options="coopMode.name as coopMode.desc for coopMode in CoopModeArray" required> <option value="">-- 请选择 --</option> </select> <div class="help-block" ng-messages="registerForm.coopMode.$error" ng-if="registerForm.coopMode.$touched"> <span ng-message="required" >合作模式不能为空</span> </div> </div> <label class="control-label col-md-1" for="baseAcctBank">基本帐户开户银行名称</label> <div class="col-md-2"> <input type="text" class="form-control" id="baseAcctBank" name = "baseAcctBank" ng-model="merhantBaseInfo.baseAcctBank" > </div> <label class="control-label col-md-1" for="baseAcct">银行基本帐户账号</label> <div class="col-md-2" > <input type="text" class="form-control" id="baseAcct" name ="baseAcct" ng-model="merhantBaseInfo.baseAcct" > </div> </div> <div class="form-group" style = "margin-left:50px;margin-right:-250px;"> <label class="control-label col-md-1" for="org">组织机构代码</label> <div class="col-md-2" show-errors> <input type="text" class="form-control" id="org" name = "org" ng-model="merhantBaseInfo.org" > </div> <label class="control-label col-md-1" for="businessLicense">营业执照</label> <div class="col-md-2" > <input type="text" class="form-control" id="businessLicense" name = "businessLicense" ng-model="merhantBaseInfo.businessLicense" > </div> <label class="control-label col-md-1" for="taxId">纳税人代码</label> <div class="col-md-2" > <input type="text" class="form-control" id="taxId" name = "taxId" ng-model="merhantBaseInfo.taxId" > </div> </div> <div class="form-group" style = "margin-left:50px;margin-right:-250px;"> <label class="control-label col-md-1" for="officePhone">公司电话</label> <div class="col-md-2" > <input type="text" class="form-control" id="officePhone" name ="officePhone" ng-model="merhantBaseInfo.officePhone" > </div> <label class="control-label col-md-1" for="address">地址</label> <div class="col-md-2" > <input type="text" class="form-control" id="address" name = "address" ng-model="merhantBaseInfo.address" > </div> <label class="control-label col-md-1" for="websiteUrl">公司网址</label> <div class="col-md-2" > <input type="text" class="form-control" id="websiteUrl" name = "websiteUrl" ng-model="merhantBaseInfo.websiteUrl" > </div> </div> <div class="form-group" style = "margin-left:50px;margin-right:-250px;"> <label class="control-label col-md-1" for="scale">企业规模</label> <div class="col-md-2"> <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" > <option value="">-- 请选择 --</option> </select> </div> <label class="control-label col-md-1" for="legalPerson">企业法人</label> <div class="col-md-2"> <input type="text" class="form-control" id="legalPerson" name = "legalPerson" ng-model="merhantBaseInfo.legalPerson" > </div> <label class="control-label col-md-1" for="legalPersonId">法人证件号码</label> <div class="col-md-2"> <input type="text" class="form-control" id="legalPersonId" name = "legalPersonId" ng-model="merhantBaseInfo.legalPersonId" > </div> </div> <div class="form-group" style = "margin-left:50px;margin-right:-250px;"> <label class="control-label col-md-1" for="province">合作区域<span style="color:red"> *</span></label> <div class="col-md-2" show-errors> <select type="text" id = "province" name

展开阅读全文