详解基于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 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
vue.js实现三级菜单效果
Oct 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简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
毕业生个人投资创业计划书
2014/01/04 职场文书
工地宣传标语
2014/06/18 职场文书
另类冲刺标语
2014/06/24 职场文书
遗失说明具结保证书
2015/02/26 职场文书
自荐信模板大全
2015/03/27 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS