当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angularjs ocLazyLoad分步加载js文件实例

angularjs ocLazyLoad分步加载js文件实例

2018年05月03日  | 移动技术网IT编程  | 我要评论

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此:

问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了.

<!doctype html>
<html lang="en" ng-app="myapp">
<head>
  <meta charset="utf-8">
  <title>ui-router-lazyload</title>
  <link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">
  <script src="../angular/angular.min.js"></script>
  <script src="../angular-ui-router/release/angular-ui-router.min.js"></script>
  <script src="../oclazyload/dist/oclazyload.min.js"></script>
  <script src="index.js"></script>
</head>
<style>
  body{
    font-family: "microsoft jhenghei ui";
  }
  .navigator{
    width: 500px;margin: 0 auto
  }
  .navigator li{
    color: #000;font-size: 14px;
  }
</style>
<body ng-controller="mycontroller">
<ul class="navigator nav nav-pills">
  <li role="presentation" class="active"><a href="#home" ng-click="isactive($event)">主页</a></li>
  <li role="presentation" class="active"><a href="#child">子页面</a></li>
  <li role="presentation" class="active"><a href="#third" ng-click="isactive($event)">三级页面</a></li>
</ul>
<div ui-view style="width: 500px;margin: 50px auto 0"></div>
</body>
</html>

js代码:

var myapp=angular.module("myapp",["ui.router","oc.lazyload"]);
myapp.config(function ($stateprovider,$urlrouterprovider) {
  $urlrouterprovider.when("","/home");
  $stateprovider.state('home',{
    url:"/home",
    templateurl: 'homepage.html',
    resolve:{
      loadmyctrl:['$oclazyload',function ($oclazyload) {
        return $oclazyload.load({
          name:"homeapp",
          files:["homepage.js"]
        })
      }]
    }
  });
  $stateprovider.state('index',{
    url:"/home",
    templateurl:''
  });
  $stateprovider.state('child',{
    url:"/child",
    templateurl:'child.html',
    resolve:{
      loadmyctrl:function ($oclazyload) {
        return $oclazyload.load({
          name:'childapp',
          files:["child.js"]
        })
      }
    }
  })
  $stateprovider.state('third',{
    url:"/third",
    templateurl:'third.html',
    resolve:{
      loadmyctrl:function ($oclazyload) {
        return $oclazyload.load({
          name:'grandapp',
          files:["third.js"]
        })
      }
    }
  })
  
});
myapp.controller("mycontroller",function ($state,$scope,$location) {
  $scope.turnpage=function () {
    // $state.go('home');
    $location.path('/home')
  }
});

页面初始效果如下图,打开浏览器控制台,可以看到child.js以及third.js在页面载入时并没有加载:

 页面初始化:

当点击子页面和三级页面时,会依次加载所依赖的js文件.实现分步加载.

点击子页面:

三级页面:

 填坑:网上关于angular按需加载的文章也蛮多的,也有人使用的是requirejs来进行这个操作,而且oclazyload的使用方法也有很多.之前按照一些文档的方法,在配置路由时,加了下面的蓝色代码,页面是能跳转,但是homepage.html的js代码却执行了两次,难道是控制器加载了两次么.对于这个坑,我还在探索中,也希望大家能够发表意见或者建议.

$stateprovider.state('home',{
     url:"/home",
　　　　 controller:'homecontroller',
     templateurl: 'homepage.html',
     resolve:{
       loadmyctrl:['$oclazyload',function ($oclazyload) {
         return $oclazyload.load({
           name:"homeapp",
           files:["homepage.js"]
         })
       }]
     }
  });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网