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


Posted in Javascript onJanuary 20, 2017

最近终于不忙了!!有时间沉淀一下之前学到的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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
跟我学习javascript的this关键字
May 28 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 #Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 #Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 #Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 #Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 #Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 #Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 #Javascript
You might like
php mail to 配置详解
2014/01/16 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python3处理HTTP请求的实例
2018/05/10 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
消防工作实施方案
2014/06/09 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
SQLServer之常用函数总结详解
2021/08/30 SQL Server
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫