关于angular文件按需加载做个总结；
声明：使用ui-router配置路由，angular v1.5.11；
第一种：oclazyload.js
文件结构为：
所有的**.controller.js都在scripts下，css在styles下
index.html需引入app.js,主要内容为定义的angular.module,以及路由配置：
//数组添加方法，判断是否包含指定参数，有则返回true
Array.prototype.contains = function(obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
};
};
return false;
};//封装函数，返回一个数组，指定要懒加载的文件
var loadMyCtrl = function(obj){
var arr1 = ['account_change', 'prepayment', 'repayment', 'repayment_account', 'repayment_info', 'repayment_plan', 'voicemail'];
if(arr1.contains(obj)){
return ['$ocLazyLoad', function($ocLazyLoad){
return $ocLazyLoad.load(['scripts/'+obj+'.controller.js','styles/'+obj+'.css']);
}]
}else{
return ['$ocLazyLoad', function($ocLazyLoad){
return $ocLazyLoad.load(['scripts/'+obj+'.controller.js']);
}]
}
};//部分代码，路由配置时添加resolve属性（详细请自行百度）app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('contract', {
url: '/contract',
templateUrl: 'app/contract/contract.html',
controller: 'contractController',
controllerAs: 'contract',
resolve: {
loadMyCtrl: loadMyCtrl('contract')
}
})
.state('contract_list', {
url: '/contract_list',
templateUrl: 'app/contract_list/contract_list.html',
controllerAs: 'contract_list',
controller: 'contract_listController',
title: '合同列表',
resolve: {
loadMyCtrl: loadMyCtrl('contract_list')
}
})................这种方法编写比较简单，程序会先编写所有路由的resolve属性，每个执行一遍loadMyCtrl函数返回对应的路由需要预加载的文件路径。所有路由的resolve属性，每个执行一遍loadMyCtrl函数返回对应的路由需要预加载的文件路径。注意：oclazyload.js在angularjs后引入
第二种：require.js
扫描二维码关注公众号，回复：
3681821 查看本文章
文件结构：
这里所有文件都是自定义文件；
下面是index.html 引入的文件：bower为类似于npm的包管理工具，输入下载指令后自动下载到bower_components文件夹下<script src="../bower_components/requirejs/require.js"></script> <script src="app/main.js"></script><script src="../bower_components/requirejs/require.js"></script> <script src="app/main.js"></script>==================对这个编辑器绝望了====分割线=================//main.js内容require.config({
baseUrl: 'app',
paths: {
'app': 'app',
'angular': '../bower_components/angular/angular.min',
'router': '../bower_components/angular-ui-router/release/angular-ui-router.min'
},
shim: {
'angular': {
exports: 'angular'
},
// 'app': {
// exports: 'app'
// },
'router': {
deps: ['angular']
},
'app': {
deps: ['router']
}
}
})
// 初始化myModule模块
require(['app'], function() {
angular.bootstrap(document, ['app'])
})
exports: 'app'
// },
'router': {
deps: ['angular']
},
'app': {
deps: ['router']
}
}
})
// 初始化myModule模块
require(['app'], function() {
angular.bootstrap(document, ['app'])
})
//app.js内容define([], function() {
var app = angular.module('app', ['ui.router']);
app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {//这段代码在这里是必须加 app.register = {
//得到$controllerProvider的引用
controller: $controllerProvider.register,
//同样的，这里也可以保存directive／filter／service的引用
directive: $compileProvider.directive,
filter: $filterProvider.register,
service: $provide.service
};
})
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("list", {
url: "/list",
controller: 'listCtrl',
templateUrl: 'app/list/list.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'list/list.controller'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
.state("show", {
url: "/show",
controller: 'showCtrl',
templateUrl: 'app/show/show.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'show/show.controller'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
}])
return app;
})； $urlRouterProvider) {
$stateProvider
.state("list", {
url: "/list",
controller: 'listCtrl',
templateUrl: 'app/list/list.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'list/list.controller'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
.state("show", {
url: "/show",
controller: 'showCtrl',
templateUrl: 'app/show/show.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'show/show.controller'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
}])
return app;
})； //控制器controller.js内容define(['app'],function(app){
app.register.controller('listCtrl', function($scope){
$scope.title = 'listlist'
console.log(1111)
})
})； app.register.controller('listCtrl', function($scope){
$scope.title = 'listlist'
console.log(1111)
})
})；html内容就不用展示了吧！ 以上；；；写了demo；这里放上链接：