AngularJS是否支持类似RequireJS的AMD？

Question

在这个仓库中，AngularJS与RequireJS一起被实现为AMD。

在这个仓库中，AngularJS团队使用AMD种子创建了一个AngularJS项目，不包括 RequireJS。

• 我是否想错了——是否它们正在解决不同的问题？
• AngularJS库是否支持AMD，而以前没有？
• 现在在AngularJS项目中使用RequireJS已经不再必要了吗？

- Dan Kanze

---

我猜测这个问题的评论可能会有用：https://dev59.com/aGcs5IYBdhLWcg3w1nhq - jbl

@jbl 看起来这个问题有点过时，它是在2012年9月21日10:49提出的。Angular团队在这里提供的示例：https://github.com/angular/angular-seed/blob/master/app/index-async.html 解答了我的困惑。 - Dan Kanze

这是一个很棒的视频，展示了如何将requireJS与angularJS配合使用。https://www.youtube.com/watch?v=4yulGISBF8w#t=142 - gskalinskii

Answer 1

使用RequireJS和AngularJS结合起来是有意义的，但前提是你必须理解它们各自在依赖注入方面的工作方式，因为虽然它们都会注入依赖项，但它们注入的内容却截然不同。

AngularJS有自己的依赖系统，可以让你将AngularJS模块注入到新创建的模块中，以便重用实现。假设你创建了一个名为“first”的模块，该模块实现了一个AngularJS过滤器“greet”：

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

现在假设你想在另一个名为“second”的模块中使用“greet”过滤器，该模块实现了“goodbye”过滤器。您可以通过将“first”模块注入到“second”模块来实现这一点：

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 + '!';
      }
    });
});

你可以看到，我们依赖于“firstModule”文件在被注入之前加载，以便执行RequireJS回调函数的内容，这需要加载“first” AngularJS模块来创建“second” AngularJS模块。

顺便说一下：在“firstModule”和“secondModule”文件中注入“angular”作为依赖项是必需的，以便在RequireJS回调函数中使用AngularJS，并且必须在RequireJS配置中将“angular”映射到库代码。您也可以以传统方式（脚本标记）加载AngularJS，但这会削弱RequireJS的优势。

有关从2.0版本开始支持RequireJS的更多详细信息，请参阅我的博客文章。

根据我的博客文章“理解AngularJS中的RequireJS”，这里是链接。

- leog

Answer 2

是的，你可以在angular中使用RequireJS。你需要进行额外的工作使其正常运行，就像你所包括的链接中一样，但这是可能的。

然而，总的来说，我没有发现在Angular中使用AMD有任何必要。AMD的整个理念是允许你声明性地指定脚本之间的依赖关系，并且不用担心它们在页面上包含的顺序。然而，Angular通过它的依赖注入机制为你处理了这个问题，因此在这方面使用AMD并不能给你带来任何好处。

简而言之，我没有发现在Angular.js中使用AMD有什么强烈的理由。

- Nick Heiner

---

你能想到任何好处或情况，使你想要在Angular.js中使用Requir.js吗？这里有一个相关的链接，可以为这个讨论做出贡献：https://dev59.com/aGcs5IYBdhLWcg3w1nhq - Dan Kanze

有没有一种方法可以异步加载AngularJS模块？ - SaminatorM

AngularJS不像requireJS一样以异步方式加载模块。请查看文档http://docs.angularjs.org/tutorial/step_07。因此，如果要进行懒加载，您需要使用requireJS。 - Uday Sawant

请参考我的回答，因为在特定的情况下使用RequireJS是完全有道理的。 - leog

RequireJS和Angular注入不同的内容。Require可以用来管理所有第三方脚本（例如jQuery、underscore、bootstrap和angular本身），然后将这些脚本依赖项注入到您的Angular应用程序中。 - jetcom

Answer 3

您可以使用提供程序来延迟加载Angular.js组件。从文章中得知：

提供程序本质上是用于创建和配置AngularJS构件实例的对象。因此，要注册一个惰性控制器，您将使用$controllerProvider。

总之，您首先需要定义您的应用程序模块以保留相关提供程序的实例。然后，您将定义您的懒惰构件以使用提供程序而不是模块API进行注册。然后，在路由定义中使用返回承诺的'resolve'函数，您将加载所有懒惰构件，并在它们被加载后解决承诺。这确保了在呈现相关路由之前，所有懒惰构件都将可用。此外，如果分辨率将发生在AngularJS之外，请不要忘记在$rootScope.$apply内部解决承诺。然后，您将创建一个“引导”脚本，该脚本在引导应用程序之前首先加载应用程序模块。最后，您将从'index.html'文件链接到引导脚本。 http://ify.io/lazy-loading-in-angularjs/

- luk3thomas