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

最新推荐文章于 2021-12-23 09:24:16 发布
最新推荐文章于 2021-12-23 09:24:16 发布
阅读量6.8k 收藏 5
点赞数 1
分类专栏： AngularJs 文章标签： 动态加载requirejS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Evankaka/article/details/52502776
版权

      摘要：本文是笔者研究了几天的动态加载方案的成果，前台使用的是AngularJS+RequireJs+angular-ui-router+angularAMD。后台使用了SpringMVC+Spring。

1、入口页面

存放地址：src/main/webapp/WEB-INF/view/workflow/workflow.jsp

<!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

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

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

<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>



about.js:

define(['app'], function(app)
{
	app.controller('AboutViewController',
    ['$scope',function($scope) {
		document.getElementById("test").onclick = function(){
			swal($scope.title);
        }
	    $scope.title = "About About About About";
        }
    ]);
});
其对应的页面内容about-view.js: 

<div ng-controller="AboutViewController">
<button ui-sref="home">Home</button>
<h1>{{ title }}</h1>
<form   name = "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><span ng-show = "contractInfo.status == 'INVALID'||contractInfo.status == 'END'" ><b> </b></span></p>
                       <p  style = "margin-left:50px;margin-right:50px;" ng-show = "contractInfo.status == 'INVALID'||contractInfo.status == 'END'"><b>已失效或终止的合同不能再修改内容!</b></p>
                       <p  style = "margin-left:50px;margin-right:50px;" ng-show = "contractInfo.status == 'EFFECTIVE'"><b>已生效的合同只能修改部分内容!</b></p>
                       <div>
                               <div class="form-group"  >
                                   <label class="control-label col-md-2 " for = "merchantId">商户<span style="color:red"> *</span></label>
									<div class="col-md-3" show-errors>
										 <select  class="form-control" id="merchantId" name = "merchantId" ng-model="contractInfo.merchantId"  ng-options="merchantNameAndId.merchantId as merchantNameAndId.merchantName for merchantNameAndId in merchantNameArray"   required >
                                            <option value="">-- 请选择 --</option>
                                         </select>
                                         <div class="help-block" ng-messages="registerForm.merchantId.$error" ng-if="registerForm.merchantId.$touched">
							                <span ng-message="required" >商户不能为空</span>
					                     </div>
									</div>
									<label class="control-label col-md-2" for="contractNo">合同编号</label>
									<div class="col-md-3" >
										<input  type="text" class="form-control" id="contractNo" name = "contractNo" ng-model="contractInfo.contractNo"  >
									</div>
								</div>
								<div class="form-group" >
									<label class="control-label col-md-2" for="signDate">合同签订日期<span style="color:red"> *</span></label>
									<div class="col-md-3" show-errors>
                                        <div class="input-group" readonly= "readonly">
                                           <input type="text" class="form-control" id="signDate" name = "signDate" ng-model="contractInfo.signDate" is-open="signDateOpened" ng-click = "signDateOpened = true" datepicker-options="dateOptions"  current-text="今天"  clear-text="清除" close-text="关闭" readonly ="readonly"   date-format  uib-datepicker-popup required>
                                           <span class="input-group-addon" ng-click = "signDateOpened = true"><i class="glyphicon glyphicon-calendar"></i></span>
                                        </div>
                                        <div class="help-block" ng-messages="registerForm.signDate.$error" ng-if="registerForm.signDate.$touched">
							                <span ng-message="required" >合同签订日期不能为空</span>
					                	</div>
									</div>
									<label class="control-label col-md-2" for="signPerson">合同签署人<span style="color:red"> *</span></label>
									<div class="col-md-3" show-errors>
										<input type="text" class="form-control" id="signPerson" name ="signPerson"  ng-model="contractInfo.signPerson"   required >
                                        <div class="help-block" ng-messages="registerForm.signPerson.$error" ng-if="registerForm.signPerson.$touched" >
							                <span ng-message="required" >合同签署人不能为空</span>
					                	</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-2" for="effectDate">合同生效日期<span style="color:red"> *</span></label>
									<div class="col-md-3" show-errors>
                                        <div class="input-group" >
										    <input type="text" class="form-control" id="effectDate" name = "effectDate" ng-model="contractInfo.effectDate" is-open="effectDateOpened" ng-click = "effectDateOpened = true" datepicker-options="dateOptions"  current-text="今天"  clear-text="清除" close-text="关闭" readonly ="readonly"   date-format uib-datepicker-popup required>
                                            <span class="input-group-addon" ng-click = "effectDateOpened = true"><i class="glyphicon glyphicon-calendar"></i></span>
                                        </div>
                                        <div class="help-block" ng-messages="registerForm.effectDate.$error" ng-if="registerForm.effectDate.$touched">
							                <span ng-message="required" >合同生效日期不能为空</span>
					                	</div>
									</div>
									<label class="control-label col-md-2" for="expiryDate">合同失效日期<span style="color:red"> *</span></label>
									<div class="col-md-3" show-errors>
                                        <div class="input-group" >
										   <input type="text"  class="form-control" id="expiryDate" name = "expiryDate" ng-model="contractInfo.expiryDate"  is-open="expiryDateOpened" ng-click = "expiryDateOpened = true" datepicker-options="dateOptions"  current-text="今天"  clear-text="清除" close-text="关闭" readonly ="readonly"  date-format uib-datepicker-popup required>
                                            <span class="input-group-addon" ng-click = "expiryDateOpened = true"><i class="glyphicon glyphicon-calendar"></i></span>
                                        </div>                                        
                                        <div class="help-block" ng-messages="registerForm.expiryDate.$error" ng-if="registerForm.expiryDate.$touched">
							                <span ng-message="required" >合同失效日期不能为空</span>
					                	</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-2" for="autoResignFlag">到期自动续签<span style="color:red"> *</span></label>
									<div class="col-md-3" show-errors>
										 <select  class="form-control" id="autoResignFlag" name = "autoResignFlag" ng-model="contractInfo.autoResignFlag" ng-change = "changeAutoResignFlag()" ng-options="yesNo.name as yesNo.desc for yesNo in YesNoArray"  required >
                                         </select>
                                         <div class="help-block" ng-messages="registerForm.autoResignFlag.$error" ng-if="registerForm.autoResignFlag.$touched">
							                <span ng-message="required" >到期自动续签不能为空</span>
					                     </div>
									</div>
									<label class="control-label col-md-2" for="autoResignYears">自动续签期限</label>
									<div class="col-md-3" >
										<input type="text" class="form-control" id="autoResignYears" name = "autoResignYears" ng-model="contractInfo.autoResignYears" placeholder = "单位为月"   >
                                       <div class="help-block" ng-messages="registerForm.autoResignYears.$error" ng-if="registerForm.autoResignYears.$touched">
							                <span ng-message="required" >自动续签期限不能为空</span>
					                	</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-2" for="fundTyps">涉及款项列表</label>
									<div class="col-md-3" >
										<input type="text" class="form-control" id="fundTyps" name = "fundTyps" ng-model="contractInfo.fundTyps" >
									</div>
									<label class="control-label col-md-2" for="specialInstallReq">有特殊分期要求<span style="color:red"> *</span></label>
									<div class="col-md-3"  show-errors>
										<select  class="form-control" id="specialInstallReq" name = "specialInstallReq" ng-model="contractInfo.specialInstallReq"  ng-options="yesNo.name as yesNo.desc for yesNo in YesNoArray"  required>
                                        </select>
                                        <div class="help-block" ng-messages="registerForm.specialInstallReq.$error" ng-if="registerForm.specialInstallReq.$touched">
							                <span ng-message="required" >特殊分期要求不能为空</span>
					                	</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-2" for="remark">备注</label>
									<div class="col-md-8">
										<textarea class="form-control" cols="4" id="remark" name="remark" ng-model="contractInfo.remark" rows="2" style = "resize: none;"></textarea>
									</div>
								</div>
                               <div class="form-group" style = "text-align:center">
                                    <button class="btn btn-primary" type="button" ng-click="okContractEdit()" ng-show = "contractEditable"  >保存修改</button>
                                    <button class="btn btn-warning" type="button" ng-click="cancelContractEdit()"ng-show = "contractEditable" >取消修改</button>
                               </div>
					  </div>
                      <div>                                   
			      </form>
</div>

4、效果展示：

首先进入主页


看看其加载的js文件，可以看到只加载 了home.js和home-view.js文件

再点击about按钮，加载about页面，可以看到加载了about.js和about-view.js文件


然后是页面



Evankaka
关注
专栏目录
AngularJs、RequireJs、AngularAMD、ui-router搭建的JS文件动态加载
YuanLicc的博客
03-27 2243
如今页面的复杂度极高，需要加载的脚本文件极多，降低了用户体验，所以写了这个动态加载脚本的demo，欢迎交流： 1. 主页：requireJs 入口：data-main="mian.js"，如下： <!DOCTYPE HTML> <head> <meta charset="utf-8"> <link rel="stylesheet" href...
AngularJS+RequireJs实现动态加载JS和页面
09-11
AngularJS+RequireJs实现动态加载JS和页面，这是笔者在网上找到的一份方案源码。笔者在这个基础上自己搭建了一个动态加载的方案，具体看这里http://blog.csdn.net/evankaka/article/details/52502776
AMD和RequireJS----优化Web应用前端(按需动态加载JS)
hsany330的专栏
03-12 1447
RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。 一、AMD 介绍 前端开发在近一两年发展的非常快，JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些
RequireJS 动态加载依赖文件插件
Challenge Next Challenge
09-22 4115
在使用requirejs的define时候，有时候需要根据一些条件判断去加载某些文件，比如在移动版下加载某个插件，在PC版下加载另一个插件，网上常见的方法一般是的define里面再去用require方法加载，但这样有个问题，就是如果后面还有文件依赖这个插件，require方法是不能保证在下面的文件使用时保证这个插件加载完毕的。 参考了angularAMD的ngload插件和requirejs-p
AngularJS+RequireJS集成环境
weixin_34319817的博客
05-24 101
整个项目搭建流程 index开始页面 引入requireJS文件 和main.Js主要文件 <--index.html--> 　<div ui-view ></div><script src="assets/requirejs/require.js"></script> <script src="main.js">&...
Angular JS + Require JS 实现按需加载
dingyo4930的博客
09-02 188
先看下目录结构，为了方便配置将所有文件放在同一文件夹下，实际使用过程中建议归类文件： 1.index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>require angul...
AngularJS+RequireJs实现动态加载JS和页面的方案研究.pdf
12-31
通过使用AngularJS和RequireJS，可以实现动态加载JS和页面。AngularUI Router允许定义多个状态（states）和对应的视图，每个状态都可以关联一个或多个JavaScript模块。当导航到新的状态时，AngularJS会根据配置加载...
探索angularjs+requirejs全面实现按需加载的套路
11-24
在进行有一定规模的项目时，通常希望实现以下目标：1、支持复杂的页面逻辑（根据业务规则动态展现内容，例如：权限，数据状态等）；2、坚持前后端分离的基本原则（不分离的时候，可以在后端用模版引擎直接生成好页面...
rjs:弹簧 + angularjs + requirejs + r.js
06-25
Spring提供稳定且功能丰富的服务器端服务，AngularJS处理动态的前端交互，RequireJS负责前端的模块化和异步加载，而r.js则用于构建和优化整个项目，确保最佳的用户体验。 在"rjs-master"这个压缩包中，可能包含了...
angularjs+requirejs+UIRouter搭建的简单demo
12-12
在本文中，我们将深入探讨如何使用AngularJS、RequireJS和UIRouter这三种强大的JavaScript库来构建一个高效且模块化的Web应用程序。"angularjs+requirejs+UIRouter搭建的简单demo"是一个实例，它展示了如何将这三个...
angular按需加载js
11-21
angular+require+angular-ui-router+angular-async-loader 根据需求加载js的一个demo
requirejs整合angularjs
09-17
reuqirejs整合angularjs实现的一个用户管理的小demo，使用了springmvc + shiro + angularjs实现基本功能，requirejs负责异步加载
基于angular路由的requireJs按需加载js
123的博客
11-27 5177
最近终于不忙了！！有时间沉淀一下之前学到的angular东东！！ angular路由想必大家已经不陌生了！（陌生的去看我之前那篇手把手教你配置angular路由！） angular路由作为单页面应用，切换页面的时候都是一个页面，所以切换controller和按需加载控件js就成了大问题！！折腾了我半天啊，angular-route内置的办法也没有解决这个问题，最终我是用requireJs解决的...
【angularjs学习笔记】利用angularjs和requirejs构建模块化单页面应用
leason的博客
10-21 4309
概要描述 angularJS描述:angularJS是可以用来构建WEB应用的，WEB应用中的一种端对端的完整解决方案。通过开发者呈现一个更高层次的抽象来简化应用的开发。最适合的就是用它来构建一个CRUD应用，它提供了非常方便的且统一高效的解决方案，其数据绑定、基本模版标识符、表单验证、路由、深度链接、组件重用、依赖注入、以及HTML标记等，最受欢迎的莫过于它的双向数据绑定。 requireJS描述
RequireJS加载js文件
小新正在敲代码
07-24 5522
RequireJS的目标是鼓励代码的模块化，它使用了不同于传统//This sets the baseUrl to the "scripts" directory, and loads a script that will have a module ID of 'main' <script data-main="scripts/main.js" src="scripts/require.js"><
Angular 懒加载js文件 404
Rao的博客
12-23 824
现象描述 angular 启用懒加载后，js文件被分为一个一个的小文件，并使用hash命令 过了一段时间后，点击按钮后无反应，使用F12 查看是文件加载404 原因说明 查了一段时间后，是因为前端更新了版本，导致原来的js文件找不到了 ...
require 动态加载_Javascript 5种动态库
weixin_39640395的博客
11-26 1113
要解决的问题复用其他人的工作减少 executable 的体积不共享源代码的前提下复用解决方案exectuable不会携带所有的算法实现。它会构建在executor提供的builtin api的基础上。同时也会利用第三方的 dynamic library 依赖 executor 的 dynamic linker 动态链接进来使用。这个动态链接其他人的工作的机制在很多种机器中都有提供。构成execu...
使用requireJS按需加载
qq_18980295的博客
04-05 806
一、requirejs与常规加载js的区别常用加载js文件的弊端1：加载js文件，浏览器停止页面渲染。文件过长，浏览器响应失效2：由于js文件之间存在依赖关系，因此必须严格保证加载顺序3：RequireJS是一个Javascript的模块加载器 通过模块加载器可以有效的解决这些问题： 1.JS文件的依赖关系。 2.通过异步加载优化script标签引起的阻塞问题 3.可以
AngularJS+RequireJS实现按需加载的策略与实践
这可以通过AngularJS的路由功能实现，结合RequireJS的`define`和`require`函数来动态加载子页面所需的模块。 步骤三，如果子页面内容进一步复杂，需要拆分为更小的组件，这时可以利用AngularJS的指令系统，创建可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值