最近终于不忙了！！有时间沉淀一下之前学到的angular东东！！

angular路由想必大家已经不陌生了！（陌生的去看我之前那篇手把手教你配置angular路由！）

angular路由作为单页面应用，切换页面的时候都是一个页面，所以切换controller和按需加载控件js就成了大问题！！折腾了我半天啊，angular-route内置的办法也没有解决这个问题，最终我是用requireJs解决的这个问题！！上代码！

1.首先引入requireJs，并且在它的下面用闭包写配置 requirejs(['framework'])，这句话的意思是首次进入页面，加载framework

 

    <script src="js/lib/require.min.js"></script><script>(function () {var jsDir = '/js/';var jsLibDir = '/js/lib/';var jsComponentDir = '/components/';var paths = {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=" + (new Date()).getTime()//urlArgs: 'v=1.47.1&t=20160719'});requirejs(['framework']);}());</script>

2.framework.js作为首次加载的js，起到至关重要的作用哈！！定义frameworkApp模块作为主模块，另外加载公共服务utilmodel和ngRoute路由，定义一个resolveController方法，回调函数是requireJs，一会儿会讲到！

 

 

        //引入模块var frameworkApp = angular.module('FrameworkApp',['ngRoute', 'utilModule']);//加载对应的controllervar 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的话，是可以的！求大神讲解啊！！

 

	<!-- start build --><script src="js/lib/echarts.js"></script><script src="js/lib/require.min.js"></script>