使用Require有意义吗?jsAngular.js吗?-DoesitmakesensetouseRequire.jswithAngular.js?

221  

Yes it makes sense to use angular.js along with require.js wherein you can use require.js for modularizing components.

是的，使用角度是有意义的。js和需要。其中你可以使用require。js为模块化组件。

I can point you to a seed project which uses both angular.js and require.js. Hope that helps!

我可以给你们指出一个种子项目，它使用了两个角度。js和require.js。希望会有帮助!

150  

To restate what I think the OP's question really is:

重申我认为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?

如果我要构建一个角1的应用程序。在Grunt/Gulp/Broccoli和Bower/NPM的时代，(含蓄地)这样做，我可能有一些额外的库依赖，是否需要添加清晰的、特定的值，超出我通过使用角度而不需要的?

Or, put another way:

或者,换句话说:

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

“如果我有其他处理基本脚本加载的方法，那么是否需要有效地管理基本的角度组件加载?”

And I believe the basic answer to that is: "not unless you've got something else going on, and/or you're unable to use newer, more modern tools."

我相信最基本的答案是:“除非你有别的事情要做，或者你不能使用更新更现代的工具。”

Let's be clear at the outset: RequireJS is a great tool that solved some very important problems, and started us down the road that we're on, toward more scalable, more professional Javascript applications. Importantly, it was the first time many people encountered the concept of modularization and of getting things out of global scope. So, if you're going to build a Javascript application that needs to scale, then Require and the AMD pattern are not bad tools for doing that.

让我们从一开始就说清楚:RequireJS是一个很好的工具，它解决了一些非常重要的问题，并让我们沿着我们的道路前进，朝着更可伸缩、更专业的Javascript应用程序前进。重要的是，这是许多人第一次遇到模块化的概念，并将事物从全局范围中移除。因此，如果要构建一个需要扩展的Javascript应用程序，那么就需要使用AMD模式来实现这一点。

But, is there anything particular about Angular that makes Require/AMD a particularly good fit? No. In fact, Angular provides you with its own modularization and encapsulation pattern, which in many ways renders redundant the basic modularization features of AMD. And, integrating Angular modules into the AMD pattern is not impossible, but it's a bit... finicky. You'll definitely be spending time getting the two patterns to integrate nicely.

但是，有什么特别的角，使要求/AMD特别适合?不。事实上，角度为您提供了自己的模块化和封装模式，这在许多方面使得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:

从角度来看，从布莱恩·福特的角度来看，他是《角度Batarang》的作者，现在是角度核心团队的一员:

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.

我不建议在AngularJS中使用RequireJS。尽管肯定是有可能的，但我还没有见过在实践中RequireJS是有益的。

So, on the very specific question of AngularJS: Angular and Require/AMD are orthogonal, and in places overlapping. You can use them together, but there's no reason specifically related to the nature/patterns of Angular itself.

因此，在非常具体的角度问题上:角度和要求/AMD是正交的，并且在某些地方是重叠的。你可以把它们结合在一起使用，但是没有理由特别地与角度本身的性质/模式相关。

But what about basic management of internal and external dependencies for scalable Javascript applications? Doesn't Require do something really critical for me there?

I recommend checking out Bower and NPM, and particularly NPM. I'm not trying to start a holy war about the comparative benefits of these tools. I merely want to say: there are other ways to skin that cat, and those ways may be even better than AMD/Require. (They certainly have much more popular momentum in late-2015, particularly NPM, combined with ES6 or CommonJS modules. See related SO question.)

我建议您去查看Bower和NPM，尤其是NPM。我并不是要开始一场关于这些工具的相对利益的圣战。我只是想说:还有其他的方法可以剥猫皮，而且这些方法可能比AMD/ required更好。(在2015年末，它们肯定有更流行的势头，尤其是NPM，结合了ES6或CommonJS模块。见相关的问题。)

What about lazy-loading?

Note that lazy-loading and lazy-downloading are different. Angular's lazy-loading doesn't mean you're pulling them direct from the server. In a Yeoman-style application with Javascript automation, you're concatenating and minifying the whole shebang together into a single file. They're present, but not executed/instantiated until needed. The speed and bandwidth improvements you get from doing this vastly, vastly outweigh any alleged improvements from lazy-downloading a particular 20-line controller. In fact, the wasted network latency and transmission overhead for that controller is going to be an order of magnitude greater than the size of the controller itself.

注意，延迟加载和延迟下载是不同的。角的延迟加载并不意味着你直接从服务器拉它们。在使用Javascript自动化的yeoman风格的应用程序中，您将整个shebang组合成一个文件。它们是存在的，但在需要之前不会执行/实例化。这样做的速度和带宽改进远远超过了延迟下载一个20行的控制器所带来的所谓改进。实际上，该控制器浪费的网络延迟和传输开销将比控制器本身的大小大一个数量级。

But let's say you really do need lazy-downloading, perhaps for infrequently-used pieces of your application, such as an admin interface. That's a very legitimate case. Require can indeed do that for you. But there are also many other, potentially more flexible options that accomplish the same thing. And Angular 2.0 will apparently take care of this for us, built-in to the router. (Details.)

但是，假设您确实需要延迟下载，可能是用于应用程序中不常用的部分，比如管理界面。这是一个非常合理的例子。需求确实可以帮你做到这一点。但也有许多其他更灵活的选择可以实现同样的目标。而角2.0显然会为我们解决这个问题，内置到路由器。(细节)。

But what about during development on my local dev boxen?

How can I get all my dozens/hundreds of script files loaded without needing to attach them all to index.html manually?

如何在不需要将所有脚本文件附加到索引的情况下加载所有几十/数百个脚本文件。html手动吗?

Have a look at the sub-generators in Yeoman's generator-angular, or at the automation patterns embodied in generator-gulp-angular, or at the standard Webpack automation for React. These provide you a clean, scalable way to either: automatically attach the files at the time that components are scaffolded, or to simply grab them all automatically if they are present in certain folders/match certain glob-patterns. You never again need to think about your own script-loading once you've got the latter options.

看看约曼的发电机-角，或发电机-谷-角所体现的自动化模式，或标准的Webpack自动反应。它们为您提供了一种干净、可伸缩的方式:在组件处于搭建状态时自动附加文件，或者在某些文件夹中出现或与某些全局模式匹配时自动抓取它们。一旦有了后一种选择，就再也不需要考虑自己的脚本加载了。

Bottom-line?

Require is a great tool, for certain things. But go with the grain whenever possible, and separate your concerns whenever possible. Let Angular worry about Angular's own modularization pattern, and consider using ES6 modules or CommonJS as a general modularization pattern. Let modern automation tools worry about script-loading and dependency-management. And take care of async lazy-loading in a granular way, rather than by tangling it up with the other two concerns.

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

That said, if you're developing Angular apps but can't install Node on your machine to use Javascript automation tools for some reason, then Require may be a good alternate solution. And I've seen really elaborate setups where people want to dynamically load Angular components that each declare their own dependencies or something. And while I'd probably try to solve that problem another way, I can see the merits of the idea, for that very particular situation.

也就是说，如果您正在开发有棱角的应用程序，但是由于某些原因无法在机器上安装Node来使用Javascript自动化工具，那么Require可能是一个很好的替代解决方案。我也见过很复杂的设置人们想动态加载角分量每个都声明自己的依赖关系或其他东西。虽然我可能会尝试用另一种方式来解决这个问题，但是我可以看到这个想法的优点，对于这个特殊的情况。

But otherwise... when starting from scratch with a new Angular application and flexibility to create a modern automation environment... you've got a lot of other, more flexible, more modern options.

但除此之外……当从头开始使用新的角度应用程序和灵活性来创建一个现代化的自动化环境…你还有很多其他更灵活、更现代的选择。

(Updated repeatedly to keep up with the evolving JS scene.)

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

135  

Yes, it makes sense.

是的,它是有意义的。

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官方网站

57  

This I believe is a subjective question, so I will provide my subjective opinion.

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

Angular has a modularization mechanism built in. When you create your app, the first thing you would do is

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

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

and then

然后

app.directive(...);

app.controller(...);

app.service(...);

If you have a look at the angular-seed which is neat starter app for angular, they have separated out the directives, services, controllers etc into different modules and then loaded those modules as dependancies on your main app.

如果你看一下angular-seed，这是一个简单的角化入门应用，它们将指令、服务、控制器等分离到不同的模块中，然后根据你的主应用加载这些模块。

Something like :

喜欢的东西:

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

Angular also lazy loads these modules ( into memory) not their script files.

角度也延迟加载这些模块(到内存中)，而不是它们的脚本文件。

In terms of lazy loading script files, to be frank unless you are writing something extremely large it would be an overkill because angular by its very nature reduces the amount of code you write. A typical app written in most other frameworks could expect a reduction in around 30-50% in LOC if written in angular.

坦白地说，对于延迟加载脚本文件来说，除非您正在编写一个非常大的文件，否则这将是一个过度的操作，因为从本质上讲，角度会减少您所编写的代码的数量。在大多数其他框架中编写的典型应用程序，如果以角方式编写，那么LOC将减少大约30-50%。

33  

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.

在AngularJS中使用RequireJS是有意义的，但前提是你要理解它们在依赖项注入时是如何工作的，就像它们都注入了依赖项一样，它们注入了非常不同的东西。

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模块注入到新创建的模块中，以便重用实现。假设您创建了一个“first”模块，它实现了一个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.

您可以看到，在执行RequireJS回调的内容之前，我们依赖于要注入的“firstModule”文件，这需要加载“first”AngularJS模块来创建“second”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”文件中注入“angle”作为依赖项，并且必须在RequireJS配置中配置它，将“angle”映射到库代码。您也可以使用传统的方式(脚本标记)将AngularJS加载到页面中，尽管失败需要带来好处。

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

更多关于在我的博客文章中获得来自AngularJS core 2.0版本的需求支持的细节。

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

基于我的博客“用AngularJS理解需求”，这里有一个链接。

21  

As @ganaraj mentioned AngularJS has dependency injection at its core. When building toy seed applications with and without RequireJS, I personally found RequireJS was probably overkill for most use cases.

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

That doesn't mean RequireJS is not useful for it's script loading capabilities and keeping your codebase clean during development. Combining the r.js optimizer (https://github.com/jrburke/r.js) with almond (https://github.com/jrburke/almond) can create a very slim script loading story. However since its dependency management features are not as important with angular at the core of your application, you can also evaluate other client side (HeadJS, LABjs, ...) or even server side (MVC4 Bundler, ...) script loading solutions for your particular application.

这并不意味着RequireJS对它的脚本加载能力以及在开发过程中保持代码库的整洁没有帮助。结合r。js优化器(https://github.com/jrburke/r.js)和almond (https://github.com/jrburke/almond)可以创建一个非常小的脚本加载故事。但是，由于依赖管理特性在应用程序的核心部分并不重要，您还可以评估其他客户端(HeadJS、LABjs、…)，甚至服务器端(MVC4 Bundler、…)为您的特定应用程序加载脚本解决方案。

17  

Yes, it does, specially for very large SPA.

是的，特别适合大型的SPA。

In some scenario, RequireJS is a must. For example, I develop PhoneGap applications using AngularJS that also uses Google Map API. Without AMD loader like RequireJS, the app would simply crash upon launch when offline as it cannot source the Google Map API scripts. An AMD loader gives me a chance to display an error message to the user.

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

However, integration between AngularJS and RequireJS is a bit tricky. I created angularAMD to make this a less painful process:

然而，AngularJS和RequireJS之间的集成有点棘手。我创建了angularAMD，让这个过程不那么痛苦:

http://marcoslin.github.io/angularAMD/

http://marcoslin.github.io/angularAMD/

13  

Short answer is, it make sense. Recently this was discussed in ng-conf 2014. Here is the talk on this topic:

简而言之，这是有道理的。最近，ng-conf在2014年讨论了这个问题。下面是关于这个话题的讨论:

http://www.youtube.com/watch?v=4yulGISBF8w

http://www.youtube.com/watch?v=4yulGISBF8w

7  

It makes sense to use requirejs with angularjs if you plan on lazy loading controllers and directives etc, while also combining multiple lazy dependencies into single script files for much faster lazy loading. RequireJS has an optimisation tool that makes the combining easy. See http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

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

7  

Yes it makes sense to use requireJS with Angular, I spent several days to test several technical solutions.

是的，使用有棱角的requireJS是有意义的，我花了几天时间来测试几个技术解决方案。

I made an Angular Seed with RequireJS on Server Side. Very simple one. I use SHIM notation for no AMD module and not AMD because I think it's very difficult to deal with two different Dependency injection system.

我在服务器端做了一个有棱角的种子。很简单的一个。我使用SHIM表示法没有AMD模块，也没有AMD，因为我觉得很难处理两个不同的依赖注入系统。

I use grunt and r.js to concatenate js files on server depends on the SHIM configuration (dependency) file. So I refer only one js file in my app.

我用grunt和r。在服务器上连接js文件取决于SHIM配置(依赖)文件。所以我在我的app中只引用一个js文件。

For more information go on my github Angular Seed : https://github.com/matohawk/angular-seed-requirejs

更多信息请访问我的github角种子:https://github.com/matohawk/angular-seed-requirejs

3  

I would avoid using Require.js. Apps I've seen that do this wind up a mess of multiple types of module pattern architecture. AMD, Revealing, different flavors of IIFE, etc. There are other ways to load on demand like the loadOnDemand Angular mod. Adding other stuff just fills your code full of cruft and creates a low signal to noise ratio and makes your code hard to read.

我将避免使用request .js。我所见过的这样做的应用程序会导致各种类型的模块模式体系结构的混乱。AMD，揭示，不同风格的IIFE等。有其他方式可以按需加载，比如loadOnDemand的角度mod。添加其他东西只会让你的代码充满cruft，产生低信噪比，使你的代码难以阅读。

2  

Here is the approach I use: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

这里是我使用的方法:http://thaiat.github.io/blog/2014/02/26/ angularjandrequirejes-for very large applications/

The page shows a possible implementation of AngularJS + RequireJS, where the code is split by features and then component type.

该页面显示了AngularJS + RequireJS的可能实现，其中代码由特性和组件类型分开。

1  

Answer from Brian Ford

从布莱恩回答福特

AngularJS has it's own module system an typically doesn't need something like RJS.

AngularJS有自己的模块系统，一般不需要RJS之类的东西。

Reference: https://github.com/yeoman/generator-angular/issues/40

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

0  

I think that it depends on your project complexity since angular is pretty much modularized. Your controllers can be mapped and you can just import those Javascript classes in your index.html page.

我认为这取决于你的项目复杂性，因为角是模块化的。您的控制器可以被映射，您可以在索引中导入这些Javascript类。html页面。

But in case your project get bigger. Or you anticipates such scenario, you should integrate angular with requirejs. In this article you can see a demo app for such integration.

但万一你的项目变大了。或者你预期这样的场景，你应该把角度和需求结合起来。在本文中，您可以看到用于此类集成的演示应用程序。