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

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