详解基于angular路由的requireJs按需加载js
最近终于不忙了！！有时间沉淀一下之前学到的angular东东！！
创新互联专注于企业成都全网营销推广、网站重做改版、西安网站定制设计、自适应品牌网站建设、H5开发、商城建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为西安等各大城市提供网站开发制作服务。
angular路由想必大家已经不陌生了！（陌生的去看我之前那篇手把手教你配置angular路由！）
angular路由作为单页面应用，切换页面的时候都是一个页面，所以切换controller和按需加载控件js就成了大问题！！折腾了我半天啊，angular-route内置的办法也没有解决这个问题，最终我是用requireJs解决的这个问题！！上代码！
1.首先引入requireJs，并且在它的下面用闭包写配置 requirejs(['framework'])，这句话的意思是首次进入页面，加载framework
2.framework.js作为首次加载的js，起到至关重要的作用哈！！定义frameworkApp模块作为主模块，另外加载公共服务utilmodel和ngRoute路由，定义一个resolveController方法，回调函数是requireJs，一会儿会讲到！
//引入模块
var frameworkApp = angular.module('FrameworkApp',['ngRoute', 'utilModule']);
//加载对应的controller
var resolveController = function (names, dependancies) {
//console.log(names)
//console.log(dependancies)
return {
loadController: ['$q', '$rootScope', function ($q, $rootScope) {
var defer = $q.defer();
require(names, function () {
defer.resolve();
$rootScope.$apply();
});
return defer.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的话，是可以的！求大神讲解啊！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
当前文章：详解基于angular路由的requireJs按需加载js
标题路径：http://azwzsj.com/article/jdeieg.html
