详解基于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 相关文章推荐
再谈javascript面向对象编程
Mar 18 Javascript
js精度溢出解决方案
Dec 02 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
Vue中qs插件的使用详解
Feb 07 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如何抛出异常处理错误
2011/03/02 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
jQuery中prev()方法用法实例
2015/01/08 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
简单了解three.js 着色器材质
2020/08/03 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
python判断计算机是否有网络连接的实例
2018/12/15 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python操作excel让工作自动化
2019/08/09 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
在校生自我鉴定
2014/01/23 职场文书
文员求职信
2014/07/15 职场文书
2015年环保局工作总结
2015/05/22 职场文书
英语读书笔记
2015/07/02 职场文书
学校运动会简讯
2015/07/20 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL