基于angular路由的requireJs按需加载js

最近终于不忙了！！有时间沉淀一下之前学到的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']);
        //加载对应的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的话，是可以的！求大神讲解啊！！

 

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