本文介绍如何利用RequireJS实现AngularJS应用的按需加载。通过配置main.js和app.js，结合ui-router路由机制，动态加载module1和module2模块。示例展示了HTML结构、JS配置及模块代码，实现点击切换时动态加载对应JS文件，优化加载性能。
RequireJS实现AngularJS按需加载方案
此前曾介绍过使用ocLazyLoad进行AngularJS文件按需加载的方法。起初认为单一方案即可满足需求，但近期查阅资料后，发现利用RequireJS实现AngularJS按需加载也是一种可行方案。具体实施步骤如下：
项目的整体目录结构如下图所示：
项目结构与入口配置
1. index.html作为入口页面，其核心代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>require angularjs</title>
</head>
<body>
<a href="#module1" rel="external nofollow" >module1</a><br/>
<a href="#module2" rel="external nofollow" >module2</a>
<div style="height: 30px;width: 100px">{{str}}</div>
<div id="container" ui-view></div>
<script data-main="main.js" src="require.js" id="main"></script>
</body>
</html>
2. 在页面中，首先引入require.js，随后加载main.js。main.js主要用于配置RequireJS的相关参数，具体代码如下：
var config = {
baseUrl: './', //依赖相对路径
paths: { //如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出
domReady:'domReady',
angular: '../node_modules/angular/angular',
app:'app',
router:'../node_modules/angular-ui-router/release/angular-ui-router'
},
shim: { //引入没有使用requirejs模块写法的类库。例如underscore这个类库，本来会有一个全局变量'_'。这里shim等于快速定义一个模块，把原来的全局变量'_'封装在局部，并导出为一个exports，变成跟普通requirejs模块一样
'router': {
deps: ['angular'], //依赖什么模块
},
'angular': {
exports: 'angular'
}
}
};
require.config(config);
// deps:['webapp']
require(['domReady','app','angular'],function(){
angular.bootstrap(document, ['webapp'])//这里会去执行app.js这个文件
})
核心模块代码实现
3. 接着查看app.js文件的内容：
/**
* Created by Administrator on 2016/7/28.
*/
define(['router'], function () {
var app = angular.module('webapp', ['ui.router']);
app.config(
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('module1');//如果没有指定路由,会默认访问module1
$stateProvider.
state('module1', {
url:"/module1",
// controller: 'ctr1', //这里如果写了controller,那么在加载module1.js时,js文件里面的console.log()会运行两次
templateUrl: 'module1/module1.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'module1/module1'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
.state("module2",{
url:"/module2",
// controller: 'ctr2',
templateUrl: 'module1/module2.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'module1/module2'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
});
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register = {
//得到$controllerProvider的引用
controller : $controllerProvider.register,
//同样的，这里也可以保存directive／filter／service的引用
directive: $compileProvider.directive,
filter: $compileProvider.register,
service: $provide.service
};
})
return app;
});
4. module1.js的代码实现如下：
define(['app'],function(app){
app.register
.controller('ctr1', function($scope){
$scope.str = 'home page';
console.log('page1')
})
})
5. module2.js的代码如下：
define(['app'],function(app){
app.register
.controller('ctr2',function($scope){
$scope.str = 'local page';
console.log('page2')
})
})
6. module1.html模板代码如下：
<div ng-controller="ctr1">页面显示内容为tp1
<div id="navigator" style="width: 100%;height: 40px;line-height: 40px">
<a href="http://www.cnblogs.com/" rel="external nofollow" >博客园首页</a>
<a href="http://www.cnblogs.com/Ricky-Huang/" rel="external nofollow" >Ricky的首页</a>
<a href="http://i.cnblogs.com/EditPosts.aspx?opt=1" rel="external nofollow" >新随笔</a>
<a href="http://msg.cnblogs.com/send/Ricky_Huang" rel="external nofollow" >联系我</a>
<a href="http://www.cnblogs.com/Ricky-Huang/rss" rel="external nofollow" >订阅他</a>
<a href="http://i.cnblogs.com/" rel="external nofollow" >管理</a>
</div>
</div>
7. module2.html模板代码如下：
<div ng-controller="ctr2">
这是tp2
{{str}}
</div>
运行效果与注意事项
完成上述配置后，运行index.html文件，页面效果及控制台输出如下图所示（右侧图片展示控制台信息）：
点击module2链接可实现正常切换，且控制台日志证实JS文件已动态加载。
注意：module1.js、module1.html、module2.js和module2.html这四个文件均位于module文件夹内。
以上内容为本文分享的全部知识，希望对读者学习有所帮助，欢迎继续支持本站。