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

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

# angular路由js加载  # requirejs  # 动态加载js  # angularjs  # 路由加载js  # angularJS+requireJS实现controller及directive的按需加载示例  # 探索angularjs+requirejs全面实现按需加载的套路  # JavaScript模块化之使用requireJS按需加载  # 加载  # 回调  # 首次  # 半天  # 按需  # 的是  # 都是  # 我是  # 这个问题  # 这句话  # 错了  # 大神  # 看我  # 大功告成  # 大问题  # 讲到  # 至关重要  # 会儿  # 解决这个问题  # 忙了 

相关文章： 广东专业制作网站有哪些,广东省能源集团有限公司官网？  简历在线制作网站免费,免费下载个人简历的网站是哪些？  建站之星如何快速更换网站模板？  电商网站制作公司有哪些,1688网是什么意思？  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  建站之星安全性能如何？防护体系能否抵御黑客入侵？  内部网站制作流程,如何建立公司内部网站？  网站制作公司,橙子建站是合法的吗？  ,有什么在线背英语单词效率比较高的网站？  专业商城网站制作公司有哪些,pi商城官网是哪个？  linux top下的 minerd 木马清除方法  网页设计网站制作软件,microsoft office哪个可以创建网页？  建站上市公司网站建设方案与SEO优化服务定制指南  Python lxml的etree和ElementTree有什么区别  免费网站制作appp,免费制作app哪个平台好？  如何生成腾讯云建站专用兑换码？  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  如何获取PHP WAP自助建站系统源码？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  如何高效利用200m空间完成建站？  Android滚轮选择时间控件使用详解  建站之星后台密码如何安全设置与找回？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  宁波免费建站如何选择可靠模板与平台？  制作网站的公司有哪些,做一个公司网站要多少钱？  武汉网站制作费用多少,在武汉武昌，建面100平方左右的房子，想装暖气片，费用大概是多少啊？  如何通过FTP服务器快速搭建网站？  建站之星Pro快速搭建教程：模板选择与功能配置指南  音乐网站服务器如何优化API响应速度？  宿州网站制作公司兴策,安徽省低保查询网站？  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  5种Android数据存储方式汇总  如何设计高效校园网站？  宝塔面板创建网站无法访问？如何快速排查修复？  如何通过宝塔面板实现本地网站访问？  代购小票制作网站有哪些,购物小票的简要说明？  安徽网站建设与外贸建站服务专业定制方案  较简单的网站制作软件有哪些,手机版网页制作用什么软件？  表情包在线制作网站免费,表情包怎么弄？  如何通过西部数码建站助手快速创建专业网站？  常州企业网站制作公司,全国继续教育网怎么登录？  建站主机默认首页配置指南：核心功能与访问路径优化  建站主机与虚拟主机有何区别？如何选择最优方案？  北京制作网站的公司,北京铁路集团官方网站？  如何自定义建站之星网站的导航菜单样式？  如何在阿里云虚拟服务器快速搭建网站？  天津个人网站制作公司,天津网约车驾驶员从业资格证官网？  建站主机选哪种环境更利于SEO优化？  如何制作一个表白网站视频,关于勇敢表白的小标题？  建站之星展会模版如何一键下载生成？