javascript AngularJS 是否像 RequireJS 一样支持 AMD？

Does AngularJS support AMD like RequireJS?

提问by Dan Kanze

In this repoAngularJS is implimented with RequireJS for AMD.

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

In this repothe AngularJS team seeds an AngularJS project with AMD that does notinclude RequireJS.

在这个 repo 中，AngularJS 团队与 AMD 一起启动了一个不包含 RequireJS的 AngularJS 项目。

• Am I thinking about this the wrong way - I.E. are they solving different problems?
• Does the AngularJS libary support AMD now where it had not once before?
• Is it no longer necessary to use RequireJS with AngularJS projects?

• 我是否以错误的方式思考这个问题 - IE 他们是否正在解决不同的问题？
• AngularJS 库现在是否支持 AMD，而此前它从未支持过？
• 不再需要在 AngularJS 项目中使用 RequireJS 吗？

回答by leog

Using RequireJS with AngularJS makes sense but only if you understand how each of them works regarding dependency injection, as although both of them injects dependencies, they inject very different things.

将 RequireJS 与 AngularJS 一起使用是有道理的，但前提是您了解它们中的每一个是如何在依赖注入方面工作的，因为虽然它们都注入了依赖项，但它们注入的东西却截然不同。

AngularJS has its own dependency system that let you inject AngularJS modules to a newly created module in order to reuse implementations. Let's say you created a "first" module that implements an AngularJS filter "greet":

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

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

And now let's say you want to use the "greet" filter in another module called "second" that implements a "goodbye" filter. You may do that injecting the "first" module to the "second" module:

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

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

The thing is that in order to make this work correctly without RequireJS, you have to make sure that the "first" AngularJS module is loaded on the page before you create the "second" AngularJS module. Quoting documentation:

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

Depending on a module implies that required module needs to be loaded before the requiring module is loaded.

依赖于一个模块意味着需要在加载需要的模块之前加载所需的模块。

In that sense, here is where RequireJS can help you as RequireJS provides a clean way to inject scripts to the page helping you organize script dependencies between each other.

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

Going back to the "first" and "second" AngularJS modules, here is how you can do it using RequireJS separating the modules on different files to leverage script dependencies loading:

回到“第一个”和“第二个”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 + '!';
      }
    });
});

You can see that we are depending on "firstModule" file to be injected before the content of the RequireJS callback can be executed which needs "first" AngularJS module to be loaded to create "second" AngularJS module.

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

Side note: Injecting "angular" on the "firstModule" and "secondModule" files as dependency is required in order to use AngularJS inside the RequireJS callback function and it have to be configured on RequireJS config to map "angular" to the library code. You may have AngularJS loaded to the page in a traditional manner too (script tag) although defeats RequireJS benefits.

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

More details on having RequireJS support from AngularJS core from 2.0 version on my blog post.

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

Based on my blog post "Making sense of RequireJS with AngularJS", here is the link.

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

回答by Nick Heiner

Yes, you can use RequireJS with angular. You need to do a bit of extra work to make it function, as in the link you included, but it's possible.

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

In general, though, I haven't found any need for AMD with Angular. The whole idea of AMD is that it allows you to declaratively specify the dependencies between your scripts and not worry about the order in which you include them on the page. However, Angular takes care of that for you with its dependency injection mechanism, so you're not really getting any benefit by using AMD on top of that.

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

tl;drI haven't found a compelling reason to use AMD with Angular.js.

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

回答by luk3thomas

You can lazy load Angular.js components using providers. From the article:

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

Providers are essentially objects that are used to create and configure instances of AngularJS artefacts. Hence, in order to register a lazy controller, you would use the $controllerProvider. ...

In summary, you would first define your app module to keep instances of the relevant providers. Then you would define your lazy artefacts to register themselves using the providers rather than the module API. Then using a ‘resolve' function that returns a promise in your route definition, you would load all lazy artefacts and resolve the promise once they have been loaded. This ensures that all lazy artefacts will be available before the relevant route is rendered. Also, don't forget to resolve the promise inside $rootScope.$apply, if the resolution will be happening outside of AngularJS. Then you would create a ‘bootstrap' script that first loads the app module before bootstrapping the app. Finally, you would link to the bootstrap script from your ‘index.html' file.

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

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

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

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