关于javascript：将Require.js与Angular.js一起使用是否有意义？

Does it make sense to use Require.js with Angular.js?

我是angular.js的新手，想了解它和主干有什么不同。在使用主干时，我们使用require.js来管理包依赖性。对angular.js也这样做有意义吗？

是的，使用angular.js和require.js是有意义的，其中可以使用require.js来模块化组件。

我可以指给你一个使用both angular.js and require.js的种子项目。希望有帮助！

上面提到的种子项目已经一年没有接触了，所以我用最新的AngularJS和RequireJS创建了一个新的项目，完全支持测试驱动的测试。
@tnajdek，我更新了鞍山答案中的链接，指向你建议的那个。
注意，这两个种子项目都没有得到Angular团队的认可。需求是一种在其他情况下更有意义的模式，而把它变成角型的鞋并不是最佳实践。
Brad Green&Shyam Seshadri(今年4月出版)的《O'Reilly AngularJS》一书还建议在Angular项目发展初期增加需求，并非常清楚地列出细节。
我宁愿在构建时间1做所有的事情。browserify.org 2.npmjs.org/package/gulp-angular-filesort(NPMJS.org/package/gulp-angular-filesort)
这个种子项目被误导了，因为它仍然会下载Angular应用程序的所有部分，甚至用户不需要访问的部分。所以，初始下载的总大小与使用gulp/grunt连接所有内容时的大小相同。如果你想正确的话，你应该使用安古拉兰德。
@xmilley在ngconf 2015上有一个来自Google团队的演示，演示了他们使用包管理器来延迟加载他们的应用程序。他们说，在他们的项目中这是必要的，因为否则，他们的应用程序的初始下载将是24MB(连接和修改)。使用延迟加载还可以让他们在许多Google应用程序中与其他团队共享公共模块，也就是说，他们在每个应用程序中使用相同的身份验证模块。
正确的。因此，对于世界上最大和最复杂的角度应用程序，确实有一个用于延迟加载的特殊用例。确实还有其他的使用案例。但这似乎不是OP的问题。他的问题通常不是懒惰加载或AMD对于某些用例是否有价值。默认情况下，在基本角度应用程序中是否需要它们。
看过那个种子项目后，我真的不确定是否要使用Require。它似乎给每个文件添加了许多丑陋的样板文件。尤其是考虑到@xmilley下面的完美答案，我倾向于"不"。

重申我认为OP的真正问题是：好的。

If I'm building an application principally in Angular 1.x, and (implicitly) doing so in the era of Grunt/Gulp/Broccoli and Bower/NPM, and I maybe have a couple additional library dependencies, does Require add clear, specific value beyond what I get by using Angular without Require?

Ok.

或者换个说法：好的。

"Does vanilla Angular need Require to manage basic Angular component-loading effectively, if I have other ways of handling basic script-loading?"

Ok.

我认为最基本的答案是："除非你有别的事情发生，或者你不能使用更新的，更现代的工具。"好的。

首先，我们要明确一点：RequireJS是一个很好的工具，它解决了一些非常重要的问题，并使我们沿着我们所处的道路前进，朝着更可扩展、更专业的JavaScript应用程序前进。重要的是，这是许多人第一次遇到模块化的概念，并使事情走出全球范围。因此，如果您要构建一个需要扩展的JavaScript应用程序，那么Require和AMD模式都是不错的工具。好的。

但是，有没有什么特别的角度，使需要/和一个特别好的适合？不，事实上，Angular为您提供了自己的模块化和封装模式，这在很多方面使AMD的基本模块化功能变得多余。而且，将角模块集成到AMD模式中并非不可能，但这有点…挑剔的您肯定会花时间让这两个模式完美地集成。好的。

For some perspective from the Angular team itself, there's this, from Brian Ford, author of the Angular Batarang and now a member of the Angular core team:好的。

I don't recommend using RequireJS with AngularJS. Although it's certainly possible, I haven't seen any instance where RequireJS was beneficial in practice.

Ok.

因此，在AngularJS的一个非常具体的问题上：角度和需求/AMD是正交的，并且在某些地方是重叠的。你可以一起使用它们，但是没有任何理由专门与角本身的性质/模式相关。好的。但是，对于可伸缩的JavaScript应用程序，内部和外部依赖关系的基本管理如何呢？不需要做一些对我来说非常重要的事情吗？

我建议去看看鲍尔和NPM，尤其是NPM。我并不是要为这些工具的相对利益发动一场神圣的战争。我只想说：还有其他的方法可以剥那只猫的皮，而且这些方法可能比AMD/要求的更好。(它们在2015年下半年肯定有更为流行的势头，尤其是NPM，结合ES6或CommonJS模块。参见相关的销售订单问题。)好的。懒惰的装载怎么办？

注意，延迟加载和延迟下载是不同的。Angular的延迟加载并不意味着你直接从服务器上拉它们。在一个具有Javascript自动化的约曼风格的应用程序中，您将把整个shebang连接在一起并缩小为一个文件。它们存在，但需要时才执行/实例化。从这项工作中获得的速度和带宽改进远远超过了所谓的延迟下载特定20线控制器的改进。实际上，该控制器浪费的网络延迟和传输开销将比控制器本身的大小大一个数量级。好的。

但是，假设您确实需要延迟下载，也许对于应用程序中不经常使用的部分，比如管理界面。这是一个非常合理的案例。需求确实能为你做到这一点。但是也有许多其他的，可能更灵活的选择来完成同样的事情。而Angular2.0显然会为我们解决这个问题，内置于路由器中。(详情)好的。但是在开发我的本地dev boxen的过程中呢？

如何在不需要手动将数十个/数百个脚本文件全部附加到index.html的情况下加载它们？好的。

看看约曼发电机角的子发电机，或发电机谷角的自动化模式，或标准的Webpack Automation for React。这些为您提供了一种干净的、可扩展的方法：在组件架起时自动附加文件，或者在某些文件夹中存在/匹配某些全局模式时自动获取所有文件。一旦有了后一个选项，就再也不需要考虑自己的脚本加载了。好的。底线？

对于某些事情来说，需求是一个很好的工具。但只要有可能就要随大流，只要有可能就要分清你的顾虑。让Angular担心Angular自己的模块化模式，并考虑使用ES6模块或CommonJS作为通用模块化模式。让现代自动化工具担心脚本加载和依赖性管理。并以粒度的方式处理异步延迟加载，而不是将其与其他两个关注点纠缠在一起。好的。

也就是说，如果您正在开发Angular应用程序，但由于某种原因无法在您的机器上安装节点来使用JavaScript自动化工具，那么Require可能是一个不错的替代解决方案。我看到了非常复杂的设置，人们希望动态加载角度组件，每个组件都声明自己的依赖性或其他东西。虽然我可能会尝试用另一种方法来解决这个问题，但我可以看到这个想法的优点，对于那个非常特殊的情况。好的。

但如果……当一个新的角从划痕和灵活的应用程序创建一个现代的自动化环境。你已经有很多其他的，更灵活，更现代的选项。

(不断更新以跟上不断变化的场景在JS)。

好的。

相关讨论

ng样板文件种子项目(github.com/ngbp/ngbp)还创建了一个包含一个JS文件的单页webapp。使用HTML5清单确保每个版本只加载一次此文件。
尽管如此，这要视情况而定。许多人使用的是他们整个体系结构的需求，并且需要将角度整合到生态系统中。这与单独构建应用程序的情况截然不同。
同意。但是操作的重点似乎是："如果我主要以角度构建一个应用程序，并且(含蓄地)在咕噜的时代这样做，并且我可能有一些额外的库依赖项，那么是否需要在不需要的情况下使用角度获得的之外添加清晰的、特定的值？"我相信答案是：不。如果你有一个巨大的应用程序，有40个外部依赖，或者你不能控制你的CI环境，或者你的老板喜欢你的要求，或者你喜欢你的要求，或者角度只是一个更大的应用程序的一部分，等等，那么YMMV。
但由于他似乎没有问这些问题，而且他只是简单地提到了主干应用程序的备用上下文，他似乎在问："Vanilla Angular需要有效地管理其组件吗？"答案是："除非你还有别的事情要做。"同样，这个问题出现在javascript CI运动的尖端，我们有更好的方法来处理基本的、物理的"脚本加载"。如果您已经解决了这个问题，那么需求基本上是关于依赖项匹配和封装的。安格尔为你做了这两件事。
Google在它的一些AngularJS项目中使用了延迟加载，因为否则，用户将在第一页加载时下载24MB的文件(这是一个经过修改和连接的文件)。所以，是的，在复杂的应用程序中，仅仅连接所有的部分并不是必需的，当存在部分时，用户不会每次访问都打开这些部分。
对：在大型复杂的应用程序中，这不是OP所要求的，它有一个很好的用例。对于不太大的应用程序，我们不想过早地针对它们没有的问题进行优化，这是一个非常不同的问题。
我有两个配置文件用于两个咕噜的任务，这些任务允许我使用r.js生成单个文件，或者在开发过程中简单地转换我的coffeeesccript。AMD为您提供了灵活性——没有人真的建议您应该考虑与单个文件相比节省20KB：这是RequireJS/AMD是唯一一个可以同时处理这两个问题的未来证明体系结构，而传统的实现缺乏显式的依赖管理，并且无法扩展。RequireJS是一个"可伸缩性"工具——我们真的不应该以一种明显不可伸缩的方式构建东西……
@nerdfiles:RequireJS确实是一个"可伸缩性工具"…但是它已经被更好的可伸缩性工具所取代：bower、npm、gulp、grunt、花椰菜、webpack等。所以，让我们以另一种方式来看看这个问题："使用带有角度的‘可伸缩性工具’有意义吗？"对！我们同意了！现在，您的主要可伸缩性工具应该是require.js和amd模式吗？可能不会，除非它为您解决了另一个非常特殊的问题，否则更现代的可伸缩性模式还没有解决。
@xmilley如何将npm、bower等与require.js进行比较？NPM或Bower在项目/应用程序级别上进行依赖性管理，但在功能级别上不进行依赖性管理，或者我在这里遗漏了什么？
原谅我@Legends，但我认为你确实错过了一些东西。一方面，Bower实际上并没有在模块化和依赖注入方面提供任何改进，尽管我没有声称它提供了改进。但是，NPM完全基于模块模式，确保在每个模块的级别上进行明确的导入和依赖性管理，正如所需的基于AMD模式一样。有关更多信息，请参阅：stackoverflow.com/a/31633281/800457。然后，可以分享一个特定的使用示例，您觉得NPM和CommonJS无法与Require&；AMD相比。
你能给我指出一个AMD使用NPM的链接吗？在我的应用程序中，我有一个配置，在该配置中，我设置了到模块/libs的所有相对路径。我有一个build.config.js，它和r.js一起用来构建。所有脚本都必须修改或加垫片。现在，我可以使用require(['jquery','customMod'], function($, cm){ ... })之类的工具来加载与全局范围隔离的所有代理。如何处理NPM？
您好，@Legends:对于特定的技术解决方案，建议您打开一个新的问题。我从来没有尝试过将AMD与NPM集成，也不能推荐它，除非它是一个通往更可持续、更惯用解决方案的短期桥梁。
嗨@xmilley，让我用不同的方式来表述它。以上是否可能与NPM，如果你的答案是肯定的，我会打开一个新的Q，所以。谢谢。

是的，这是有道理的。

Angular modules don't try to solve the problem of script load ordering
or lazy script fetching. These goals are orthogonal and both module
systems can live side by side and fulfil their goals.

Source: Angular JS official website

相关讨论

如果每个JS文件使用一个模块，则可以在任何订单上加载角度模块。但是，如果您想在不同的JS文件中放置不同的服务，但要将它们附加到同一角度模块上，则必须在服务声明之前加载模块声明。所以这是一个架构决策。
@蒂亚戈：请提供一个链接，链接到您的来源地。我哪儿也找不到。我猜想它来自早期版本的角文档，在Angular的模式建立得很好之前，以及在它变得清晰之前，至少对于角组件来说，避免需要有显著的优势。
@xmilley：你能提供一个链接来解释在使用角度时避免需要的优点吗？我正在决定是否在我的项目中使用Require，这听起来很有帮助。
我在这里的语言还不清楚：利用Angular自己的内置模块装载机和处理角度模式的粒度有很大的优势。问题不在于是否要避免需求，而在于增加一个额外的复杂性层是否有价值。很明显，Angular的内置模式将轻松优雅地满足Angular自己模块的加载需求。如果需要用于加载角度上下文之外的模块，那么也可以这样做。但是使用角度要求是无关的。
@xmlliley所有的角度都是给你依赖注入。模块的实际加载由您负责。您可以通过添加一个脚本标记、拥有一个构建脚本或使用RequireJS来实现这一点。Angulars模块系统对此没有意见。
@Gilesruppert：没错，尽管清楚"模块"在AMD和角度环境中的含义是非常不同的，这很有用。不管怎样，都有一个文件要加载。问题不是为什么不需要使用。有许多无害但无效的方法可以使生活变得更复杂；需求和任何一样好。问题是为什么需要使用？在一个角度上，在高带宽和约曼的时代，传输开销超过下载时间，连接是无摩擦的，模块模式已经被强制执行…需要证明哪些价值才能增加？
如何将Angulars模块加载与使用AMD(用typescript编译)的游戏逻辑结合起来？

我相信这是一个主观问题，所以我会提供我的主观意见。

Angular内置模块化机制。创建应用程序时，首先要做的是

1	var app = angular.module("myApp");

然后

1
2
3
4
5

app.directive(...);

app.controller(...);

app.service(...);

如果你看一下Angular Seed，它是Angular的入门级应用程序，它们将指令、服务、控制器等分离成不同的模块，然后根据你的主应用程序加载这些模块。

比如：

1	var app = angular.module("myApp",["Directives","Controllers","Services"];

Angular也懒惰地加载这些模块(到内存中)，而不是它们的脚本文件。

对于延迟加载脚本文件而言，坦率地说，除非您正在编写非常大的内容，否则这将是一种过度杀伤力，因为从本质上讲，Angular减少了您编写的代码量。在大多数其他框架中编写的典型应用程序，如果以角度编写，那么loc中的值可能会减少大约30-50%。

相关讨论

在AngularJS中使用RequireJS是有意义的，但是只有当您了解它们中的每一个在依赖注入方面是如何工作的，就像它们都注入依赖一样，它们注入了非常不同的东西。

AngularJS has its own dependency system that let you inject AngularJS modules to a newly created module in order to reuse implementations. 假设您创建了一个实现AngularJS过滤器"Greet"的"First"模块：

1
2
3
4
5
6
7

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

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

1
2
3
4
5
6
7

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

问题是，为了在不需要的情况下正确地工作，在创建"第二个"AngularJS模块之前，必须确保页面上加载了"第一个"AngularJS模块。报价文件：

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

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

回到"第一个"和"第二个"AngularJS模块，下面介绍如何使用RequireJS将不同文件上的模块分离，以利用脚本依赖项加载：

1
2
3
4
5
6
7
8
9
10

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

1
2
3
4
5
6
7
8
9
10

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

您可以看到，在执行RequireJS回调的内容之前，我们依赖于要注入的"FirstModule"文件，这需要加载"First"AngularJS模块来创建"Second"AngularJS模块。

侧注：为了在RequireJS回调函数中使用AngularJS，需要在"FirstModule"和"SecondModule"文件中插入"Angular"，并且必须在RequireJS配置中配置它，以将"Angular"映射到库代码。您也可以用传统的方式(脚本标记)将AngularJS加载到页面中，尽管失败会带来好处。

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

基于我的博客文章"了解安古拉吉斯的需求"，这里是链接。

相关讨论

正如@ganaraj所提到的，angularjs的核心是依赖注入。当构建带有或不带有RequireJS的玩具种子应用程序时，我个人发现RequireJS对于大多数用例来说可能是杀伤力过大的。

这并不意味着RequireJS对于它的脚本加载功能和在开发过程中保持代码库的整洁没有用处。将r.js优化器(https://github.com/jrburke/r.js)与almond(https://github.com/jrburke/almond)结合在一起可以创建一个非常纤细的脚本加载故事。但是，由于它的依赖性管理功能在应用程序核心的角度上没有那么重要，因此您还可以为特定应用程序评估其他客户端(headjs、labjs，…)甚至服务器端(mvc4 bundler，…)脚本加载解决方案。

是的，是的，特别是大型水疗中心。

在某些情况下，RequireJS是必须的。例如，我使用AngularJS开发PhoneGap应用程序，它也使用GoogleMap API。如果没有像RequireJS这样的AMD加载器，该应用程序在离线启动时会崩溃，因为它无法获取谷歌地图API脚本。AMD加载器给了我一个向用户显示错误消息的机会。

然而，AngularJS和RequireJS之间的集成有点棘手。我创造了安古拉兰德，使这个过程不那么痛苦：

http://marcslin.github.io/angularamd/

简短的回答是，这是有道理的。最近在2014年国家会议上讨论了这一点。下面是关于这个主题的讨论：

http://www.youtube.com/watch？V= 4YulgISBF8W

如果您计划延迟加载控制器和指令等，那么在AngularJS中使用RequireJS是有意义的，同时还可以将多个延迟依赖项组合到单个脚本文件中，从而更快地延迟加载。RequireJS有一个优化工具，使组合更容易。参见http://ify.io/using-requirejs-with-optimization-for-lazy-loading-angularjs-artefacts/

是的，使用RequireJS和Angular是有意义的，我花了几天时间测试了几个技术解决方案。

我在服务器端用Requirejs生成了一个有棱角的种子。非常简单。我使用填充符号表示没有AMD模块，而不是AMD，因为我认为很难处理两个不同的依赖注入系统。

我使用grunt和r.js连接服务器上的JS文件，这取决于填充程序配置(依赖)文件。所以我在应用程序中只引用一个JS文件。

有关更多信息，请访问我的Github Angular Seed：https://github.com/matohawk/angular-seed-requirejs

我会避免使用require.js。我见过这样做的应用程序最终导致了多种类型的模块模式体系结构的混乱。AMD，透露，不同口味的iife等。有其他方式加载按需，如加载和角度mod。添加其他东西只会使代码充满污点，并产生低信噪比，使代码难以读取。

以下是我使用的方法：http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

该页显示了AngularJS+RequireJS的可能实现，其中代码按功能和组件类型进行拆分。

相关讨论

布莱恩·福特的回答

AngularJS有自己的模块系统，通常不需要像RJ这样的东西。

参考：https://github.com/yeoman/generator-angular/issues/40

我认为这取决于您的项目复杂性，因为角度是相当模块化的。Your controllers can be mapped and you can just import those JavaScript classes in your index.html page.

但万一你的项目变得更大。或者您预期这样的场景，您应该将角度与需求集成在一起。在本文中，您可以看到用于这种集成的演示应用程序。