唯品秀博客
  • 温馨提示:唯品秀个人博客2016/11/16正式上线了!
  • 博客不定时更新、修复bug,若无法正常访问浏览,请稍后再试
  • 欢迎各位前端伙伴注册登录会员,共同分享前端技巧
  • 2018/04/24日最近更新:优化主导航高亮显示配置
首页 > 前端开发 > Js前端框架 > Angular1x配合ui-router和ocLazyLoad按需加载js

Angular1x配合ui-router和ocLazyLoad按需加载js

2017年03月22日 作者: 管理员 5951次浏览 条评论

随着公司规模不断地扩大,公司的产品线也可能会随之增加,如果使用的是 AngularJS 的体系,那么产品线之间的整合势必就会遇到这样一个问题——模块加载的问题。

这是个怎样的问题?

假设,我们将所有产品已整合成一个单页应用,显而易见,这个单页应用需要有个主路由来管理各个产品模块之间的切换,而这时问题就出现了。各个模块的代码如何引入,如果简单粗暴地在首页将各个模块的代码全部引入,那么首页就会加载很多无用的代码,从而造成首屏加载时间过长,首页加载时间超长我想没有一个用户能忍的吧,直接 GG 了。

那么,可不可以做到,首页只引入首屏需要显示的必要代码,而在必要的时候再去加载各个模块的代码,做到按需懒加载哪?

答案是,肯定的。

那是不是直接简单地在路由切换的 templateUrl 中,注入各自的模块代码就行了哪?

/*上述完全百度抄袭,可忽略,接下来让我用白话文讲解如何按需加载js。注:在做此项目时候并不是工程化构建模式开发的,所以不存在什么入口文件,仅单独探讨路由和按需加载js*/
/*在写这篇文章的时候我的心情是激动的,因为通过官方给的方式死活不能成功(应该是缺少了前置配置,直接仅仅路由+loader按官方配不能成功,地址:https://oclazyload.readme.io/docs/with-your-router),翻阅万篇文章千篇一律要不不清不楚,甚至好多自己都没尝试直接复制粘贴凑数的*/

1-首当其冲我们先要引入必备的这三个文件

1
2
3
  <script src="../Scripts/angular.min.js"></script>
  <script src="../Scripts/angular-route.js"></script>
  <script src="../Scripts/ocLazyLoad.min.js"></script>

注:因为后面两个都是angular的插件,这就会导致一个问题,如果相互之间版本级别相差太大,那么100%会挂,为此,此文件我会传入Github供大家下载,避免一个坑(我被踩了)

2-配置路由和loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
  var myApp = angular.module("ngRouteExample", ['ui.router','oc.lazyLoad']);
       //首先这里注入路由和loader插件
  myApp.controller('indexCtrl', function($scope, $stateParams,$ocLazyLoad){
      //这里在此教程中本身是可以不要的,但我其他文件中有用
  });
  myApp.config(function ($stateProvider, $locationProvider,$urlRouterProvider, $ocLazyLoadProvider) {
     /*这里就是开始配置路由,第1,2个参数是路由需要的,第3+4个就是ui-router+loader需要的*/
       $urlRouterProvider.otherwise('/home');
     /*上:主路由跳转,也就是一级路由下如果点击到链接下没有模板,那么就跳到指定的模板*/
         $urlRouterProvider.when('/sale', '/sale/unexecuted');
     /*上:二级路由默认跳转,同上,关于前面这个地址问题,我目前是把所有的模板页都放在一个文件的,后面这个地址就是路由地址,*/
         $stateProvider
            .state("share", {
     /*state就是结合ui-router的写法,也许你在其他地方见过when的方式,那个是古老的ng-router,已经被淘汰,
       ng-router严重不足之处就是不能进行路由嵌套,也就是说只能设置一级路由,然并卵*/

                url:"/share",
    /*路由地址,所谓路由地址你可以认为就是页面跳转后你看到的那个地址比如说我博客地址www.weipxiu.com,
      那么现在这个地址最终解析出来的就是www.weipxiu.com#/share,
      也就是说这个地址可以说是自定义的,为了方便取和模板页一样名字。
      请注意,ui-router解析时候是带#号(www.weipxiu.com#/share),不是直接/
     */

                  controller: 'AppCtrl',
                  templateUrl: 'share.html',//需要加载进来的模板页面地址
              resolve: {
                  loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){//这两行就是loader的使用,此行写法固定
                      return $ocLazyLoad.load('./js/AppCtrl.js');//后面这个就是进入这个模板时候要加载进来的js
                  }]
              }
            })
    });
</script>

N1VAGSKW%}(PM~JL3D~WN%A

3-对应的html写法如下:
CCP6JQ8M)7IOUUT]GYAW~MA

4-按需想要加载进来的js文件
3PLZ~HVBPTN[}UN7UFFI

5-最终效果,当点击到想路由的页面,想加载的对应的页面js也成功加载

SBKI@{KAU)A$[LUS5TDPF92

「一年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 5 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
5

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

前端简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站, 愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,了解更多...

风云英雄

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,却获得了斯坦福、哈佛等许多常青藤名校课程的结业证……他们的同学不局限在一国一校,而是遍及全球……加入他们,成为一名互联网学习者!

站点统计

  • 文章: 128 篇
  • 分类: 13 个
  • 标签: 218 个
  • 运行: 554天
  • 访问:6,587,558次
  • 更新: 2018年6月22日
服务热线:
 182XXXX8470

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺客服