唯品秀前端博客
当前位置: 前端开发 > Js前端框架 > Angular1x配合ui-router和ocLazyLoad按需加载js

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

2017-03-22 分类:Js前端框架 作者:管理员 阅读(10096)

随着公司规模不断地扩大,公司的产品线也可能会随之增加,如果使用的是 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供大家下载,避免一个坑(我被踩了),请直接下载zip压缩包,不要选择git克隆,克隆的是最新项目已经没这几个文件。

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

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

赞(7) 打赏

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

支付宝
微信
7

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

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 14 条评论 - Angular1x配合ui-router和ocLazyLoad按需加载js

  1. 不吃鱼的猫 Mac OS X Chrome 73.0.3683.103

    终于找到个靠谱的了,这老项目太坑了

  2. 柳叶 Windows NT Chrome 69.0.3497.100

    学习了.

    1. 唯品秀前端技术博客 Windows NT Chrome 57.0.2987.98

      @柳叶欢迎常来看看

  3. AKA_JooN 未知操作系统 未知浏览器

    厉害,亲测可以使用

    1. 唯品秀前端技术博客 未知操作系统 未知浏览器

      @AKA_JooN当然了,我自己捣鼓半天弄成功才发出来的

  4. 美梦 未知操作系统 未知浏览器

    挺详细的谢谢

    1. 唯品秀前端技术博客 Windows NT Chrome 49.0.2623.75

      @美梦必须的,就是恨那些人不断地粘贴复制,最可恨,自己都不尝试,误人子弟

    2. 超级管理员 未知操作系统 未知浏览器

      @美梦必须的,就是恨那些人不断地粘贴复制,最可恨,自己都不尝试,误人子弟

  5. 美梦 未知操作系统 未知浏览器

    挺详细的谢谢

  6. VenAugsusu 未知操作系统 未知浏览器

    谢谢楼主,记得多分享,博客已收藏

    1. 唯品秀前端技术博客 未知操作系统 未知浏览器

      @VenAugsusu记得常关注哦

  7. 爱守情 未知操作系统 未知浏览器

    不错,确实可以,终于找到个靠谱的了,谢谢楼主,我弄好久了,再弄不出来就准备用RequireJS了

  8. 前端草根 未知操作系统 未知浏览器

    挺详细的,受教了!

博客简介

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

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 238 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 863 条
  • 链接总数: 14 个
  • 标签总数: 429 个
  • 建站时间: 1041 天
  • 注册用户: 2886 人
  • 访问总量: 8668688 次
  • 最近更新: 2019年10月21日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线