β

使用ocLazyLoad实现AngularJS模块按需懒加载

RIA爱好者 40 阅读

复杂的AngularJS SPA项目需要用路由来管理各个产品模块之间的切换。各个模块的代码如何引入?通常我们的简单做法是在首页将各个模块的代码全部引入,即使首页本身很简单也需要加载很多无用的代码。这样 一来会造成首屏加载时间过长。怎么做到首屏只引入需要显示的必要代码,而在必要的时候再去加载各个模块的代码,做到按需懒加载呢?

可能最容易想到的是使用RequireJS,网上也有这样的方案介绍,甚至有一些脚手架工程供我们使用。不过RequireJS的侵入式代码恐怕不是每个人都很接受的,万一哪天使用改成CMD、XMD又不得不改动代码,使用RequireJS只能算可行方案。有没有更好的方案呢?试一试 ocLazyLoad ,目前已经是1.0版本,比较稳定了。

一、快速入门

1. 下载ocLazyLoad.js。可以在git存储库的dist文件夹中找到该文件,也可以通过bower install oclazyload or npm install oclazyload来安装
2. 将oclazyLoad模块添加到应用程序中:


var myApp = angular.module("MyApp", ["oc.lazyLoad"]);

3. 按需加载:


myApp.controller("MyCtrl", function($ocLazyLoad) {
  $ocLazyLoad.load('testModule.js');
});

使用$ocLazyLoad可以加载AngularJS模块, 但如果要加载任何组件(控制器/服务/过滤器/…) 而不用定义新模块也是完全有行的 (只是确保在现有模块中定义了此组件)。

二、实例

下面的实例使用angular-ui-router和ocLazyLoad实现了AngularJS模块按需懒加载。

index.html


<body ng-app="mainApp">
  <nav>
    <ul>
      <li><a ui-sref="home" ui-sref-active="active">Home</a></li>
      <li><a ui-sref="product" ui-sref-active="active">Product</a></li>
    </ul>
  </nav>
  <ui-view></ui-view>
  <script src="http://www.riafan.com/oclazyload-angularjs-module/app.js"></script>
</body>

views/product.html


<section>{{text}}</section>

app.js


angular.module('mainApp', ['ui.router', 'oc.lazyLoad'])
  .config(function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/home');

    $stateProvider
      .state('product', {
        url: '/product',
        templateUrl: 'views/product.html',
        controller: 'ProductCtrl',
        resolve: {
          loadProduct: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load('./js/product.js');
          }]
        }
      })
      .state('home', {
        url: '/home',
        template: '<div>This is the home page</div>'
      });
  });

js/product.js


angular.module('productApp', [])
  .controller('ProductCtrl', function($scope) {
    $scope.text = 'This is Product';
  });

css/style.css


a {
  text-decoration: none;
  color: #333;
}
a:hover {
  color: #900;
  text-decoration: underline;
}
a.active {
  text-decoration: underline;
}

上述实例中,最关键的步骤是我们设置路由状态对象的resolve参数,指定当前controller依赖于$ocLazyLoad.load()方法动态加载的模块或其它任何组件,这实现了模块按需懒加载。剩下的就是分模块开发了,是不是比RequireJS方式更简单友好呢?

作者:RIA爱好者
设计-开发-分享
原文地址:使用ocLazyLoad实现AngularJS模块按需懒加载, 感谢原作者分享。

发表评论