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

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

赞 (0)

相关推荐

  • angular 动态组件类型详解(四种组件类型)

    组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http) promise.component.html 常见的有内置的$http,$q之类的.一般使用promise与作用域进行交互 组件类型2:不是常驻于视图,而是动态插入的.有UI的一类组件,有输入交互.不常被调用(类似于Model对话框) factory.component.html 并发性.这里收到es6的启发.在factory内使用了构造函数,来区分不同的实例.当然,factory接口返回的类型要根据需求来定:仅仅是一

  • AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔记,不过觉得按需加载模块并且成功使用这个确实是个好处,还是记录下来吧.基于本兽没怎么深入的使用requireJs,所以本兽不知道这个和requireJs有什么区别,也不能清晰的说明这到底算不算Angular的按需加载. 为了实现这篇学习笔记知识点的效果,我们需要用到: angular:https:/

  • AngularJs动态加载模块和依赖注入详解

    废话不多说,进入正题... 首先我们看下文件结构: Angular-ocLazyLoad --- demo文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-cont

  • Angular.js实现动态加载组件详解

    前言 有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件:这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT. 动态加载组件 下面以一个Step组件为示例,完成一个3个步骤的示例展示,并且可以通过URL user?step=step-one 的变化显示第N个步骤的内容. 1.resolveComponentFactory 首先,还是需要先创建动态加载组件模块. import { Component, Input, Vie

  • 详解Angular 4.x 动态创建组件

    动态创建组件 这篇文章我们将介绍在 Angular 中如何动态创建组件. 定义 AlertComponent 组件 首先,我们需要定义一个组件. exe-alert.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: "exe-alert", template: ` <h1>Alert {{type}}</h1> `, }) export cl

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

    本文实例讲述了AngularJS动态加载模块和依赖的方法.分享给大家供大家参考,具体如下: 前言 由于AngularJS是单页面应用框架,在正常的情况下,会在访问页面的时候将所有的CSS.JavaScript文件都加载进来.文件不多的时候,页面启动速度倒不会影响太多.但是一旦文件数太多或者加载的第三方库比较大的时候,就会影响页面启动速度.因此对于应用规模大.文件数比较多或者加载的第三方库比较大的时候,采用动态加载JS或者动态加载模块会极大提升页面的启动速度.本文将介绍如何利用ocLazyLoad

  • Python动态加载模块的3种方法

    1.使用系统函数__import_() 复制代码 代码如下: stringmodule = __import__('string') 2.使用imp 模块 复制代码 代码如下: import imp stringmodule = imp.load_module('string',*imp.find_module('string')) 3.使用exec 复制代码 代码如下: import_string = "import string as stringmodule" exec impo

  • Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

    什么是ui-router ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建).它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的URL路由.  什么是ocLoayLoad ocLoayLoad是AngularJS的模块按需加载器.按需加载的对象 简单说就是哪个页面需要什么资源,在加载哪个页面的时候在加载,而不是把所有的资源放在模板里. 三个主要文件 <script src="angular/1.4.8/angular/a

  • Python实现动态加载模块、类、函数的方法分析

    本文实例讲述了Python实现动态加载模块.类.函数的方法.分享给大家供大家参考,具体如下: 动态加载模块: 方式1:系统函数__import__() 方式2:imp, importlib 模块 方式3:exec 函数 动态加载类和函数 首先,使用加载模块,使用内置函数提供的反射方法getattr(),依次按照层级获取模块->类\全局方法->类对象\类方法. test_import_module.py class ClassA: def test(self): print('test') in

  • 基于vue 动态加载图片src的解决方法

    基于vue 动态加载图片src的解决方法

    好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

  • C#动态加载dll扩展系统功能的方法

    本文实例讲述了C#动态加载dll扩展系统功能的方法.分享给大家供大家参考.具体分析如下: 动态加载dll,主要是为了扩展功能,增强灵活性而实现的.主要通过xml配置,来获取所有要动态加载的dll,然后通过反射机制来调用dll中的类及其方法. using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Reflection; using System.Text; u

  • js 动态加载事件的几种方法总结

    有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用. 方法一.setAttributevar obj = document.getElementById("obj");obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属

  • jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

    jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

    在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单 先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g

随机推荐