AngularJS+RequireJs实现动态加载JS和页面的方案研究Word下载.docx
- 文档编号:20357713
- 上传时间:2023-01-22
- 格式:DOCX
- 页数:15
- 大小:19.26KB
AngularJS+RequireJs实现动态加载JS和页面的方案研究Word下载.docx
《AngularJS+RequireJs实现动态加载JS和页面的方案研究Word下载.docx》由会员分享,可在线阅读,更多相关《AngularJS+RequireJs实现动态加载JS和页面的方案研究Word下载.docx(15页珍藏版)》请在冰豆网上搜索。
src="
/static/js/bower_components/requirejs/require.js"
/script>
/head>
body>
div>
h1>
这里是公共头部<
/h1>
/div>
divng-controller="
baseCtrl"
--<
buttonng-click="
baseClick()"
按钮测试<
/button>
-->
divui-view>
这里是公共尾部<
buttonid="
test"
根据js内容动态显示<
/body>
/html>
在上面引入了requirejs
2、app.js
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:
{exports:
["
],
]
}
});
define(["
"
"
],function(angular,angularAMD){
varregisterRoutes=function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("
/home"
);
$stateProvider.state("
home"
angularAMD.route({
url:
templateUrl:
../static/js/workflow-view/home-view.js"
controllerUrl:
../static/js/workflow/home.js"
}))
.state("
about"
/about"
../static/js/workflow-view/about-view.js"
../static/js/workflow/about.js"
;
};
varapp=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("
测试按钮"
)
});
returnangularAMD.bootstrap(app);
在这里引入了一些需要的模块,其中就一些模块是笔者我自己写的。
有的是第三方插件的
这里特别注意,由于SpringMVC会拦截.jsp结尾的文件。
所以动态加载的页面笔者都写到js文件中。
如上面的about-view.js和home-view.js.其要动态加载的js文件分别为about.js和home.js。
如果不使用SpringMVc。
那么动态加载的页面就可以不用写到js文件中(笔者的工程中配置了拦截.jsp文件,不拦截.js文件)
3、动态加载的内容:
home.js
define(['
app'
],function(app)
{
HomeViewController'
['
$scope'
function($scope){
document.getElementById("
).onclick=function(){
swal($scope.title);
$scope.title="
HomeHomeHomeHome"
;
]);
home-view.js
divng-controller="
HomeViewController"
buttonui-sref="
About<
{{title}}<
br/>
formname="
registerForm"
id="
method="
post"
class="
form-horizontal"
novalidate>
pclass="
bg-warning"
style="
margin-left:
50px;
margin-right:
iclass="
glyphiconglyphicon-info-sign"
/i>
span>
b>
温馨提示:
带<
spanstyle="
color:
red"
*<
/span>
为必填项<
/b>
/p>
divclass="
form-group"
-250px;
labelclass="
control-labelcol-md-1"
for="
merchantName"
商户名称<
/label>
col-md-2"
show-errors>
inputtype="
text"
form-control"
id="
name="
ng-model="
merhantBaseInfo.merchantName"
required>
help-block"
ng-messages="
registerForm.merchantName.$error"
ng-if="
registerForm.merchantName.$touched"
spanng-message="
required"
用户名不能为空<
merchantShortName"
商户简称<
name="
merhantBaseInfo.merchantShortName"
type"
商户类型<
selectclass="
merhantBaseInfo.type"
ng-options="
type.nameastype.descfortypeinMerchantTypeArray"
required>
optionvalue="
--请选择--<
/option>
/select>
registerForm.type.$error"
registerForm.type.$touched"
商户类型不能为空<
comRegName"
商户工商注册全名<
col-md-5"
merhantBaseIRegName"
registerFRegName.$error"
registerFRegName.$touched"
商户注册全名不能为空<
industry"
所属行业<
merhantBaseInfo.industry"
industry.nameasindustry.descforindustryinIndustryArray"
registerForm.industry.$error"
registerForm.industry.$touched"
所属行业不能为空<
coopMode"
合作模式<
merhantBaseInfo.coopMode"
coopMode.nameascoopMode.descforcoopModeinCoopModeArray"
registerForm.coopMode.$error"
registerForm.coopMode.$touched"
合作模式不能为空<
baseAcctBank"
基本帐户开户银行名称<
merhantBaseInfo.baseAcctBank"
baseAcct"
银行基本帐户账号<
merhantBaseInfo.baseAcct"
org"
组织机构代码<
merhantBaseInfo.org"
businessLicense"
营业执照<
merhantBaseInfo.businessLicense"
taxId"
纳税人代码<
merhantBaseInfo.taxId"
officePhone"
公司电话<
merhantBaseInfo.officePhone"
address"
地址<
merhantBaseInfo.address"
websiteUrl"
公司网址<
merhantBaseInfo.websiteUrl"
scale"
企业规模<
selecttype="
merhantBaseInfo.scale"
scale.nameasscale.descforscaleinScaleArray"
legalPerson"
企业法人<
merhantBaseInfo.legalPerson"
legalPersonId"
法人证件号码<
col
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AngularJS RequireJs 实现 动态 加载 JS 页面 方案 研究