详解基于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确定对象类型方法
Mar 30 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
jsonp原理及使用
Oct 28 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
前端JavaScript大管家 package.json
Nov 02 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
原生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/05/18 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP7变量处理机制修改
2021/03/09 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
canvas绘制多边形
2017/02/24 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
优秀毕业生求职信范文
2014/01/02 职场文书
开工仪式策划方案
2014/05/23 职场文书
2015年校长新年寄语
2014/12/08 职场文书
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers