AngularJS+RequireJs实现动态加载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="merhantBaseInfo.comRegName" required> 

                                        <div class="help-block" ng-messages="registerForm.comRegName.$error" ng-if="registerForm.comRegName.$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 = "province" class="form-control" ng-model="merhantBaseInfo.province"  ng-change = "changeProvince()" ng-options="province.areaId as province.areaName for province in AllProvinceArray"   required> 

                                            <option value="">---请选择---</option> 

                                        </select> 

                                        <div class="help-block" ng-messages="registerForm.province.$error" ng-if="registerForm.province.$touched"> 

                                            <span ng-message="required" >合作区域不能为空</span> 

                                        </div> 

                                    </div> 

                                    <div class="col-md-2"> 

                                         <select type="text" class="form-control" ng-model="merhantBaseInfo.city" ng-change="changeCity()" ng-options="city.areaId as city.areaName for city  in nowCityArray"> 

                                            <option value="">---请选择---</option> 

                                         </select> 

                                    </div> 

                                    <div class="col-md-2"> 

                                         <select type="text" class="form-control" ng-model="merhantBaseInfo.district" ng-change="area=''" ng-options="district.areaId as district.areaName for district  in nowDistrictArray"> 

                                             <option value="">---请选择---</option> 

                                         </select> 

                                    </div> 

                                </div> 

                                <div class="form-group" style = "margin-left:50px;margin-right:-250px;"> 

                                    <label class="control-label col-md-1" for="remark">备注</label> 

                                    <div class="col-md-8"> 

                                        <textarea class="form-control" cols="4" id="remark" name="remark" ng-model="merhantBaseInfo.remark" rows="2" style = "resize: none;"></textarea> 

                                    </div> 

                                </div> 

                            </div> 

                       <div>                        

                  </form> 

</div>