最近终于不忙了!!有时间沉淀一下之前学到的angular小编!!
angular路由想必大家已经不陌生了!(陌生的去看我之前那篇手把手教你配置angular路由!)
angular路由作为单页面应用,切换页面的时候都是一个页面,所以切换controller和按需加载控件js就成了大问题!!折腾了我半天啊,angular-route内置的办法也没有解决这个问题,最终我是用requireJs解决的这个问题!!上代码!
1.首先引入requireJs,并且在它的下面用闭包写配置 requirejs(['framework']),这句话的意思是首次进入页面,加载framework
rush:js;">
2.framework.js作为首次加载的js,起到至关重要的作用哈!!定义frameworkApp模块作为主模块,另外加载公共服务utilmodel和ngRoute路由,定义一个resolveController方法,回调函数是requireJs,一会儿会讲到!
rush:js;">
//引入模块
var frameworkApp = angular.module('FrameworkApp',['ngRoute','utilModule']);
//加载对应的controller
var resolveController = function (names,dependancies) {
//console.log(names)
//console.log(dependancies)
return {
loadController: ['$q','$rootS
cope',function ($q,$rootS
cope) {
var defer = $q.defer();
require(names,function () {
defer.resolve();
$rootS
cope.$apply();
});
return defer.promise;
}]
};
};
3.配置路由,用resolve方法完成回调,注意回调的是一个list,值是步骤一中定义的模块名称
rush:js;">
frameworkApp.con
fig(['$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(['standar
damountStatistic','highcharts','dateTimePicker'])
})
.when('/report',{
templateUrl: 'report.html',controller: 'ReportCtrl',resolve: resolveController(['standardReport','dateTimePicker'])
})
.when('/advancedReport',{
templateUrl: 'advanced-report.html',controller: 'advancedReportCtrl',resolve: resolveController(['standardAdvancedReport','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的话,是可以的!求大神讲解啊!!
rush:js;">
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。