19

在这个 repo中，AngularJS 是用 AMD 的 RequireJS 实现的。

在这个 repo中，AngularJS 团队为 AMD 提供了一个不包含 RequireJS的 AngularJS 项目。

  • 我是否以错误的方式思考这个问题 - 即他们是否解决了不同的问题？
  • AngularJS 库现在支持 AMD 以前没有的地方吗？
  • 是否不再需要在 AngularJS 项目中使用 RequireJS？
4

3 回答 3

27

将 RequireJS 与 AngularJS 一起使用是有意义的，但前提是您了解它们各自在依赖注入方面的工作方式，因为尽管它们都注入依赖项，但它们注入的东西却截然不同。

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

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

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

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 模块。

旁注：需要在“firstModule”和“secondModule”文件中注入“angular”作为依赖项，以便在 RequireJS 回调函数中使用 AngularJS，并且必须在 RequireJS 配置中配置它以将“angular”映射到库代码。您可能也以传统方式（脚本标记）将 AngularJS 加载到页面，尽管这会破坏 RequireJS 的好处。

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

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

于 2014-01-10T19:06:00.787 回答
20

是的，您可以将 RequireJS 与 angular 一起使用。您需要做一些额外的工作才能使其正常运行，如您包含的链接中所示，但这是可能的。

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

tl;博士我还没有找到一个令人信服的理由来使用 AMD 和 Angular.js。

于 2013-04-19T21:26:57.890 回答
2

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

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

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

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

于 2014-04-09T16:04:30.470 回答