Question

在this repo中，AngularJS对AMD的RequireJS表示赞赏。

在this repo中，AngularJS团队与AMD合作开展一个AngularJS项目不包括RequireJS。

我是否以错误的方式思考这个问题--I.E。他们在解决不同的问题吗？
AngularJS图书馆现在支持AMD吗？
是否不再需要将RequireJS与AngularJS项目一起使用？

Answer 1

将RequireJS与AngularJS一起使用是有意义的，但前提是你理解它们如何处理依赖注入，因为虽然它们都注入依赖关系，但它们会注入非常不同的东西。

AngularJS有自己的依赖系统，允许您将AngularJS模块注入新创建的模块，以便重用实现。假设您创建了一个实现AngularJS过滤器“greet”的“第一个”模块：

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

现在让我们假设您想在另一个名为“second”的模块中使用“greet”过滤器来实现“再见”过滤器。您可以将“第一”模块注入“第二”模块：

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

问题是，为了在没有RequireJS的情况下正常工作，您必须确保在创建“第二个”AngularJS模块之前在页面上加载“第一个”AngularJS模块。引用文档：

取决于模块意味着需要加载所需的模块在加载需求模块之前。

从这个意义上说，这里是RequireJS可以帮助你的地方，因为RequireJS提供了一种向页面注入脚本的简洁方法，可以帮助你组织彼此之间的脚本依赖。

回到“第一个”和“第二个”AngularJS模块，这里是你如何使用RequireJS分离不同文件上的模块以利用脚本依赖性加载：

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

你可以看到我们依赖于要在需要执行RequireJS回调的内容之前注入的“firstModule”文件，需要加载“第一个”AngularJS模块来创建“第二个”AngularJS模块。

附注：为了在RequireJS回调函数中使用AngularJS，需要在“firstModule”和“secondModule”文件上注入“angular”，并且必须在RequireJS配置上配置它以将“angular”映射到图书馆代码。你也可以用传统的方式将AngularJS加载到页面（脚本标记），尽管会损害RequireJS的好处。

关于在我的博客文章中从2.0版本获得AngularJS核心的RequireJS支持的更多细节。

根据我的博客帖子“了解使用AngularJS的RequireJS”，这里是link。

Answer 2

是的，您可以将RequireJS与angular一起使用。你需要做一些额外的工作才能使它发挥作用，就像你所包含的链接一样，但它是可能的。

但总的来说，我还没有发现AMD对Angular有任何需求。 AMD的整个想法是，它允许您以声明方式指定脚本之间的依赖关系，而不必担心将它们包含在页面中的顺序。但是，Angular通过其依赖注入机制为您解决了这个问题，因此在此基础上使用AMD并没有真正获得任何好处。

tl; dr 我没有找到使用AMD与Angular.js的令人信服的理由。

Answer 3

您可以使用提供程序延迟加载Angular.js组件。来自article：

提供程序本质上是用于创建和配置AngularJS工件实例的对象。因此，为了注册延迟控制器，您将使用$controllerProvider。   ...

总之，您首先要定义应用程序模块以保留相关提供程序的实例。然后，您将定义您的懒惰文物，以使用提供程序而不是模块API注册自己。然后使用在路由定义中返回promise的'resolve'函数，您将加载所有惰性伪像并在加载后解析promise。这确保了在呈现相关路线之前所有懒惰的人工制品都可用。另外，不要忘记解决$ rootScope中的承诺。$ apply，如果解决方案将在AngularJS之外发生。然后，您将创建一个“引导程序”脚本，该脚本在引导应用程序之前首先加载应用程序模块。最后，您将链接到'index.html'文件中的引导脚本。

http://ify.io/lazy-loading-in-angularjs/

AngularJS是否像RequireJS一样支持AMD？

3 个答案: