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

网络编程 2024/11/15 佚名

3 2 1

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

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

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

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

<script src="/UploadFiles/2021-04-02/require.min.js">

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="/UploadFiles/2021-04-02/echarts.js">

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