快捷導(dǎo)航

詳解基于angular路由的requireJs按需加載js

更新時間：2017年01月20日 11:33:00 作者：lemon678

本篇文章主要介紹了詳解基于angular路由的requireJs按需加載js，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近終于不忙了?。∮袝r間沉淀一下之前學(xué)到的angular東東??！

angular路由想必大家已經(jīng)不陌生了?。吧娜タ次抑澳瞧职咽纸棠闩渲胊ngular路由?。?br />

angular路由作為單頁面應(yīng)用，切換頁面的時候都是一個頁面，所以切換controller和按需加載控件js就成了大問題??！折騰了我半天啊，angular-route內(nèi)置的辦法也沒有解決這個問題，最終我是用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，起到至關(guān)重要的作用哈?。《xframeworkApp模塊作為主模塊，另外加載公共服務(wù)utilmodel和ngRoute路由，定義一個resolveController方法，回調(diào)函數(shù)是requireJs，一會兒會講到！

//引入模塊 
var frameworkApp = angular.module('FrameworkApp',['ngRoute', 'utilModule']); 
//加載對應(yīng)的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方法完成回調(diào)，注意回調(diào)的是一個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引進來，不過到是發(fā)現(xiàn)，在require生效之前引入echarts的話，是可以的！求大神講解?。?！

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解基于angular路由的requireJs按需加載js

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具