AngularJS动态加载模块和依赖的方法分析  更新时间:2016年11月08日 09:28:51   作者:前端超人   这篇文章主要介绍了AngularJS动态加载模块和依赖的方法,结合实例形式分析了AngularJS使用ocLazyLoad实现动态加载的相关操作技巧,需要的朋友可以参考下 本文实例讲述了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程序设计有所帮助。 您可能感兴趣的文章: AngularJs动态加载模块和依赖注入详解 AngularJs 动态加载模块和依赖 详解Angular 4.x 动态创建组件 angular 动态组件类型详解(四种组件类型) Angular.js实现动态加载组件详解 AngularJS 动态加载 相关文章 AngularJS中如何使用echart插件示例详解 之前因为项目的需求,第一次系统的使用了angular这一优秀的js框架,其所拥有的许多优秀特性极大的方便了项目的开发,然而在开发中也遇到过不少的问题,趁着最近有时间给大家总结一下,这篇文章将会介绍使用angularjs1结合百度的图表插件echart作为例子用以演示。 2016-10-10 Angular实现类似博客评论的递归显示及获取回复评论的数据 这篇文章主要给大家介绍了关于Angular如何实现类似博客评论的递归显示及获取回复评论的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2017-11-11 Angular中使用ui router实现系统权限控制及开发遇到问题 这篇文章主要介绍了Angular中使用ui router实现系统权限控制及开发遇到问题的相关资料,本文分步骤介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 2016-09-09 Angular2使用vscode断点调试ts文件的方法 本篇文章主要介绍了Angular2使用vscode断点调试ts文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 AngularJS基础 ng-class-odd 指令示例 本文主要介绍AngularJS ng-class-odd 指令,这里对ng-class-odd基础知识做了详细整理,并有示例代码和效果图,学习AngularJS的同学可以参考下 2016-08-08 angular *Ngif else用法详解 这篇文章主要介绍了angular *Ngif else用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2020-12-12 详解angular 中的自定义指令之详解API 本篇文章主要介绍了angular 中的自定义指令之详解API,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 Angular.JS读取数据库数据调用完整实例 这篇文章主要介绍了Angular.JS读取数据库数据调用,结合完整实例形式分析了AngularJS使用$http.get方法与后台php交互读取数据库数据相关操作技巧,需要的朋友可以参考下 2019-07-07 Angular实现图片裁剪工具ngImgCrop实践 本篇文章主要介绍了Angular实现图片裁剪工具ngImgCrop实践,具有一定的参考价值,有兴趣的可以了解一下 2017-08-08 关于angularJs清除浏览器缓存的方法 这篇文章主要介绍了关于angularJs清除浏览器缓存的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 最新评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • AngularJs动态加载模块和依赖注入详解
  • AngularJs 动态加载模块和依赖
  • 详解Angular 4.x 动态创建组件
  • angular 动态组件类型详解(四种组件类型)
  • Angular.js实现动态加载组件详解
张贴在3