AngularJS动态加载模块和依赖的方法分析


Posted in Javascript onNovember 08, 2016

本文实例讲述了AngularJS动态加载模块和依赖的方法。分享给大家供大家参考,具体如下:

前言

由于AngularJS是单页面应用框架,在正常的情况下,会在访问页面的时候将所有的CSS、JavaScript文件都加载进来。文件不多的时候,页面启动速度倒不会影响太多。但是一旦文件数太多或者加载的第三方库比较大的时候,就会影响页面启动速度。因此对于应用规模大、文件数比较多或者加载的第三方库比较大的时候,采用动态加载JS或者动态加载模块会极大提升页面的启动速度。本文将介绍如何利用ocLazyLoad实现动态加载。

准备

AngularJS动态加载依赖第三方库:ocLazyLoad。ocLazyLoad是一个第三方库,支持AngularJS动态加载module、service、directive以及静态文件。

安装ocLazyLoad

可通过npm或者bower进行安装

npm install oclazyload
bower install oclazyload

将ocLazyLoad module 添加到你的应用中

angular.module('myApp',['oc.lazyLoad']);

配置 ocLazyLoad

你可以在 config函数中配置 $ocLazyLoadProvider,配置文件如下

.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider){
  $ocLazyLoadProvider.config({
    debug: true,
    events: true,
    modules: [
      {
        name: 'TestModule',
        files: ['test.js']
      }
    ]
  })
}])

debug: 用来开启debug模式。布尔值,默认是false。当开启debug模式时,$ocLazyLoad会打印出所有的错误到console控制台上。
events:当你动态加载了module的时候,$ocLazyLoad会广播相应的事件。布尔值,默认为false。
modules:用于定义你需要动态加载的模块。定义每个模块的名字需要唯一。
modules必须要用数组的形式,其中files也必须以数组的形式存在,哪怕只需要加载一个文件

在路由当中加载module

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise('/index');
    $routeProvider.when('/index', {
      templateUrl: 'index.html',
      controller: 'IndexController',
      resolve: { // resolve 里的属性如果返回的是 promise对象,那么resolve将会在view加载之前执行
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
          // 在这里可以延迟加载任何文件或者刚才预定义的modules
          return $ocLazyLoad.load('TestModule'); //加载刚才定义的TestModule
          /*return $ocLazyLoad.load([  // 如果要加载多个module,需要写成数组的形式
            'TestModule',
            'MainModule'
            ]);*/
        }]
      }
    })
}])

resolve设置的属性可以被注入到Controller当中。如果resolve返回的是promise对象的话,那么它们将在控制器加载以及$routeChangeSuccess被触发之前执行。

$ocLazyLoad就是利用这个原理hack,进行动态加载。

resolve的值可以是:

* key,the value of key 是会被注入到Controller的依赖的名字;
* factory,即可以是一个service的名字,也可以是一个返回值,它是会被注入到控制器中的函数或可以被resolve的promise对象。

通过这样的配置,就可以实现了AngularJS动态加载模块和依赖。但是ocLazyLoad提供的功能更加丰富,不止动态加载模块和依赖,还能动态加载service,diretive等。更多的功能,可以访问[ocLazyLoad官网](https://oclazyload.readme.io)

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
微信小程序实现简单购物车功能
Dec 30 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 #Javascript
Javascript数组循环遍历之forEach详解
Nov 07 #Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 #Javascript
jQuery webuploader分片上传大文件
Nov 07 #Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 #Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 #Javascript
功能强大的jquery.validate表单验证插件
Nov 07 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
jquery插件格式实例分析
2016/06/16 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python实现简易版计算器
2020/06/22 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
农村婚礼证婚词
2014/01/08 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
国庆横幅标语
2014/10/08 职场文书
社区工作者个人总结
2015/02/28 职场文书
护理专业自荐信范文
2015/03/06 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python