详解基于angular路由的requireJs按需加载js
最近终于不忙了！！有时间沉淀一下之前学到的angular东东！！
angular路由想必大家已经不陌生了！（陌生的去看我之前那篇手把手教你配置angular路由！）
angular路由作为单页面应用，切换页面的时候都是一个页面，所以切换controller和按需加载控件js就成了大问题！！折腾了我半天啊，angular-route内置的办法也没有解决这个问题，最终我是用requireJs解决的这个问题！！上代码！
1.首先引入requireJs，并且在它的下面用闭包写配置requirejs(['framework'])，这句话的意思是首次进入页面，加载framework
<scriptsrc="js/lib/require.min.js"></script>
<script>
(function(){
varjsDir='/js/';
varjsLibDir='/js/lib/';
varjsComponentDir='/components/';
varpaths={
angular:jsLibDir+'angular.min',
angularRoute:jsLibDir+'angular-route.min',
jquery:jsLibDir+'jquery.min',
jQueryMD5:jsLibDir+'jquery.md5',
highcharts:jsLibDir+'highcharts',
radialProgress:jsLibDir+'radialProgress',
d3:jsLibDir+'d3.min',
echarts:jsLibDir+'echarts',
framework:jsDir+'framework',
angularUtil:jsDir+'angular-util',
standardDashboard:jsDir+'standard-dashboard',
standardConsole:jsDir+'standard-console',
standardAmountStatistic:jsDir+'standard-amount-statistic',
standardReport:jsDir+'standard-report',
standardAdvancedReport:jsDir+'standard-advanced-report',
standardExpertAnswer:jsDir+'standard-expert-answer',
standardService:jsDir+'standard-service',
standardStrategyInform:jsDir+'standard-strategy-inform',
standardMember:jsDir+'standard-member',
standardSchedule:jsDir+'standard-schedule',
standardChannel:jsDir+'standard-channel',
standardStrategyMerge:jsDir+'standard-strategy-merge',
standardIntegrate:jsDir+'standard-integrate',
standardPersonalCenter:jsDir+'standard-personal-center',
dateTimePicker:jsComponentDir+'dateTimePicker/date-time-picker',
fullCalendar:jsComponentDir+'fullCalendar/fullcalendar',
moment:jsComponentDir+'fullCalendar/moment'
};
requirejs.config({
paths:paths,
shim:{
angular:{
exports:'angular',
deps:['jquery']
},
angularRoute:{
deps:['angular']
},
jQueryMD5:{
deps:['jquery']
}
},
//urlArgs:"timeStamp="+(newDate()).getTime()
//urlArgs:'v=1.47.1&t=20160719'
});
requirejs(['framework']);
}());
</script>
2.framework.js作为首次加载的js，起到至关重要的作用哈！！定义frameworkApp模块作为主模块，另外加载公共服务utilmodel和ngRoute路由，定义一个resolveController方法，回调函数是requireJs，一会儿会讲到！
//引入模块
varframeworkApp=angular.module('FrameworkApp',['ngRoute','utilModule']);
//加载对应的controller
varresolveController=function(names,dependancies){
//console.log(names)
//console.log(dependancies)
return{
loadController:['$q','$rootScope',function($q,$rootScope){
vardefer=$q.defer();
require(names,function(){
defer.resolve();
$rootScope.$apply();
});
returndefer.promise;
}]
};
};
3.配置路由，用resolve方法完成回调，注意回调的是一个list，值是步骤一中定义的模块名称
frameworkApp.config(['$routeProvider','$controllerProvider','$provide','$compileProvider','$filterProvider',
function($routeProvider,$controllerProvider,$provide,$compileProvider,$filterProvider){
frameworkApp.register={
controller:$controllerProvider.register,
factory:$provide.factory,
service:$provide.service,
filter:$filterProvider.register,
directive:$compileProvider.directive
};
$routeProvider
.when('/',{
redirectTo:'/dashboard'
})
.when('/dashboard',{
templateUrl:'dashboard.html',
controller:'DashboardCtrl',
resolve:resolveController(['standardDashboard','d3','radialProgress','highcharts'])
})
.when('/console',{
templateUrl:'console.html',
controller:'ConsoleCtrl',
resolve:resolveController(['standardConsole'])
})
.when('/amountStatistic',{
templateUrl:'amount-statistic.html',
controller:'amountStatisticCtrl',
resolve:resolveController(['standardAmountStatistic','highcharts','dateTimePicker'])
})
.when('/report',{
templateUrl:'report.html',
controller:'ReportCtrl',
resolve:resolveController(['standardReport','dateTimePicker'])
})
.when('/advancedReport',{
templateUrl:'advanced-report.html',
controller:'advancedReportCtrl',
resolve:resolveController(['standardAdvancedReport','highcharts','dateTimePicker'])
})
.when('/expertAnswer',{
templateUrl:'expert-answer.html',
controller:'expertAnswerCtrl',
resolve:resolveController(['standardExpertAnswer'])
})
.when('/service',{
templateUrl:'service.html',
controller:'ServiceCtrl',
resolve:resolveController(['standardService'])
})
.when('/strategy-inform',{
templateUrl:'strategy-inform.html',
controller:'StrategyInformCtrl',
resolve:resolveController(['standardStrategyInform'])
})
.when('/member',{
templateUrl:'member.html',
controller:'MemberCtrl',
resolve:resolveController(['standardMember'])
})
.when('/schedule',{
templateUrl:'schedule.html',
controller:'ScheduleCtrl',
resolve:resolveController(['standardSchedule'])
})
.when('/channel',{
templateUrl:'channel.html',
controller:'ChannelCtrl',
resolve:resolveController(['standardChannel'])
})
.when('/strategy-merge',{
templateUrl:'strategy-merge.html',
controller:'StrategyMergeCtrl',
resolve:resolveController(['standardStrategyMerge'])
})
.when('/integrate',{
templateUrl:'integrate.html',
controller:'IntegrateCtrl',
resolve:resolveController(['standardIntegrate'])
})
.when('/personalCenter',{
templateUrl:'personal-center.html',
controller:'PersonalCenterCtrl',
resolve:resolveController(['standardPersonalCenter'])
})
.otherwise({
redirectTo:'/error'
});
}]);
4.大功告成啦~完成controller切换，和js按需加载！！！啦啦啦！
5.有一点我也没解决，在引入echarts的时候，用这种方法就报错了，换成highcharts就可以了，折腾半天啊也没把echarts引进来，不过到是发现，在require生效之前引入echarts的话，是可以的！求大神讲解啊！！
<!--startbuild--> <scriptsrc="js/lib/echarts.js"></script> <scriptsrc="js/lib/require.min.js"></script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。