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 对象成员的可见性说明
Oct 16 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
Vue实现购物车功能
Apr 27 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 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
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php格式化金额函数分享
2015/02/02 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
mongodb和php的用法详解
2019/03/25 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
详解vue项目构建与实战
2017/06/27 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python实现二分查找算法实例
2015/05/26 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Python字典遍历操作实例小结
2019/03/05 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
linux面试题参考答案(2)
2015/12/06 面试题
技校学生个人职业生涯规划范文
2014/03/03 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书