详解基于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> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。