angularjs – 动态注入模块,仅在需要时

前端之家收集整理的这篇文章主要介绍了angularjs – 动态注入模块,仅在需要时前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Require.js结合Angular.js。

一些控制器需要巨大的外部依赖性,其他人不需要,例如,FirstController需要Angular UI Codemirror.这是一个额外的135 kb,至少:

require([
  "angular","angular.ui.codemirror" // requires codemirror itself
],function(angular) {
  angular.module("app",[ ...,"ui.codemirror" ]).controller("FirstController",[ ... ]);
});

我不想在每次我的页面加载只是为了使Angular快乐包括指令和Codemirror lib。
这就是为什么我现在加载控制器只有当路线被击中,like what’s done here

但是,当我需要的东西

define([
  "app","angular.ui.codemirror"
],function(app) {
  // ui-codemirror directive MUST be available to the view of this controller as of now
  app.lazy.controller("FirstController",[
    "$scope",function($scope) {
      // ...
    }
  ]);
});

我如何告诉Angular注入ui.codemirror模块(或任何其他模块)在应用程序模块aswell?
我不在乎如果这是一个hackish的方式来完成这一点,除非它涉及修改外部依赖的代码

如果它的有用:我运行Angular 1.2.0。

我一直试图混合requirejs Angular一段时间了。我在Github( angular-require-lazy)发布了一个小项目,我的努力到目前为止,因为范围是太大的内联代码或fiddles。该项目说明了以下几点:

> AngularJS模块是延迟加载的。
>指令也可以延迟加载。
>有一个“模块”发现和元数据机制(参见我的其他宠物项目:require-lazy)
>应用程序被自动分成bundle(即使用r.js工程进行构建)

如何做:

>从配置函数(我在angularjs-requirejs-lazy-controllers首次看到的技术)捕获提供者(例如$ controllerProvider,$ compileProvider)。
>在引导之后,角度被我们自己的包装器所替代,可以处理延迟加载的模块。
>捕获注射器并作为承诺提供。
> AMD模块可以转换为Angular模块。

这个实现满足你的需求:它可以延迟加载Angular模块(至少是我使用的ng-grid),绝对是hackish :)和不修改外部库。

意见/意见是非常欢迎。

(EDIT)此解决方案与其他解决方案的区别在于它不会执行动态require()调用,因此可以使用r.js(和我的require-lazy项目)构建。除此之外,这些想法或多或少地在各种解决方案之间融合。

祝你好运!

原文链接:https://www.f2er.com/angularjs/146079.html

猜你在找的Angularjs相关文章