angularjs 之ocLazyLoadjs按需加载js

最新推荐文章于 2021-01-26 13:04:10 发布

chengzhimen1408

最新推荐文章于 2021-01-26 13:04:10 发布

阅读量135

点赞数

原文链接：https://my.oschina.net/u/3653125/blog/1518761

版权

由于采用agnularjs做网页的单页面应用，需要一次性在主布局中将所有模块需要引用到的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>

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:'index.html'

});
$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({
    return $oclazyLoad.load({
      name:'grandApp',
      files:['third.js']   
 })
  })
 } 
  }

 });
myApp.controller('myController',function($state,$scope,$location){
 $scope.turnPage=function(){
  $location.path('/home')
 }
})





})

各个js文件并非一次性加载的，只有点击子页面三级页面相应的js文件才会加载出来

转载于:https://my.oschina.net/u/3653125/blog/1518761

chengzhimen1408

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs 之ocLazyLoadjs按需加载js

由于采用agnularjs做网页的单页面应用，需要一次性在主布局中将所有模块需要引用到的js都引入。对于较小的项目，可行，但是对于大的项目，一旦js文件较多，在页面首次加载时就引入所有的js文件，无疑会延缓页面加载速度。 <!DOCTYPE html><html lang...
复制链接

扫一扫