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

Question

我是Angular.js的新手,并试图理解它与Backbone.js的不同之处......我们曾经使用Backbone来管理我们的包依赖关系和Require.js.使用Angular.js做同样的事情是否有意义？

Answer 1

是的,它是有道理的使用angular.js连同require.js其中可以使用require.js的模块化组件.

我可以指出你一个种子项目,它使用both angular.js and require.js.希望有所帮助!

Answer 2

重申一下我认为OP的问题是:

如果我主要在Angular 1.x中构建应用程序,并且(隐式地)在Grunt/Gulp/Broccoli和Bower/NPM时代这样做,并且我可能还有一些额外的库依赖项,那么需要添加明确的,特定的超出我使用Angular而不需要的值？

或者,换句话说:

" 如果我有其他处理基本脚本加载的方法, vanilla Angular是否需要有效地管理基本的Angular组件加载？ "

我相信基本的答案是:"除非你有其他事情发生,否则你将无法使用更新,更现代的工具."

让我们从一开始就明确一点:RequireJS是一个很好的工具,可以解决一些非常重要的问题,让我们开始走上正轨,朝着更具伸缩性,更专业的Javascript应用程序迈进.重要的是,这是许多人第一次遇到模块化的概念,并使事物脱离全球范围.所以,如果你要构建一个需要扩展的Javascript应用程序,那么Require和AMD模式就不是那么糟糕的工具.

但是,Angular有什么特别的东西让Require/AMD特别合适吗？实际上,Angular为您提供了自己的模块化和封装模式,这在很多方面使AMD的基本模块化功能变得多余.并且,将Angular模块集成到AMD模式中并非不可能,但它有点......挑剔.你肯定会花时间让两种模式很好地整合.

来自Angular团队本身的一些观点,就是这个,来自Angular Batarang的作者Brian Ford,现在是Angular核心团队的成员:

我不建议将RequireJS与AngularJS一起使用.虽然这当然是可能的,但我还没有看到任何RequireJS在实践中有益的例子.

因此,在AngularJS的非常具体的问题上:Angular和Require/AMD是正交的,并且在重叠的地方.你可以一起使用它们,但是没有理由与Angular本身的性质/模式特别相关.

但是可扩展Javascript应用程序的内部和外部依赖关系的基本管理呢？不需要在那里做一些对我很重要的事情吗？

我建议检查Bower和NPM,特别是NPM.我不打算就这些工具的相对好处展开一场神圣的战争.我只是想说:还有其他方法可以让那只猫皮肤,这些方式可能比AMD /要求更好.(他们肯定会在2015年末更受欢迎,特别是NPM,结合ES6或CommonJS模块.参见相关的SO问题.)

懒加载怎么样？

请注意,延迟加载和延迟下载是不同的.Angular的延迟加载并不意味着你直接从服务器中提取它们.在具有javascript自动化功能的Yeoman风格的应用程序中,您将整个shebang连接并缩小为一个文件.它们存在,但在需要之前不执行/实例化.从这样做中获得的速度和带宽改进大大超过了懒惰下载特定20行控制器所带来的任何改进.实际上,该控制器的浪费网络延迟和传输开销将比控制器本身的大小大一个数量级.

但是,假设您确实需要延迟下载,可能是因为您的应用程序中不经常使用的部分,例如管理界面.这是一个非常合理的案例.要求确实可以为你做到这一点.但也有也 很多 其他的,可能 更 灵活 的选择是完成同样的事情.Angular 2.0显然会为我们处理这个问题,内置于路由器.(详情.)

但是在我当地开发盒子的开发过程中呢？

如何加载所有数十个/数百个脚本文件,而无需手动将它们全部附加到index.html？

看看Yeoman的发电机角度的子发电机,或者发电机 - gulp -angular中体现的自动化模式,或React的标准Webpack自动化.这些为您提供了一种干净,可扩展的方式:在组件被搭建时自动附加文件,或者如果它们存在于某些文件夹中/匹配某些glob模式,则只需自动将它们全部抓取.一旦你有了后面的选项,你再也不需要考虑自己的脚本加载了.

底线？

对于某些事情,需求是一个很好的工具.但是尽可能使用谷物,并尽可能分开您的顾虑.让Angular担心Angular自己的模块化模式,并考虑使用ES6模块或CommonJS作为一般的模块化模式.让现代自动化工具担心脚本加载和依赖管理.并以细粒度的方式处理异步延迟加载,而不是将其与其他两个问题纠缠在一起.

也就是说,如果您正在开发Angular应用程序,但由于某些原因无法在您的计算机上安装Node以使用Javascript自动化工具,那么Require可能是一个很好的替代解决方案.我已经看到了非常复杂的设置,人们想要动态加载Angular组件,每个组件都声明自己的依赖关系.虽然我可能试图以另一种方式解决这个问题,但我可以看到这个想法的优点,对于那种非常特殊的情况.

但是否则......当从头开始使用新的Angular应用程序并灵活地创建一个现代化的自动化环境时......你有很多其他更灵活,更现代的选择.

(反复更新以跟上不断发展的JS场景.)

Answer 3

是的,这是有道理的.

Angular模块不会尝试解决脚本加载排序或延迟脚本提取的问题.这些目标是正交的,两个模块系统可以并存并实现其目标.

资料来源:Angular JS官方网站

Answer 4

我认为这是一个主观问题,所以我将提出我的主观意见.

Angular内置了模块化机制.当您创建应用程序时,您要做的第一件事就是

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

然后

app.directive(...);

app.controller(...);

app.service(...);

如果您看一下angular-seed这是一个整洁的角度启动应用程序,他们已将指令,服务,控制器等分离到不同的模块中,然后将这些模块作为依赖项加载到您的主应用程序上.

就像是 :

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

Angular也懒得加载这些模块(进入内存)而不是他们的脚本文件.

就延迟加载脚本文件而言,坦率地说,除非你写的东西非常大,否则它将是一种矫枉过正,因为角度本质上减少了你编写的代码量.如果以角度编写,在大多数其他框架中编写的典型应用程序可以预期在LOC中减少约30-50%.

Answer 5

将RequireJS与AngularJS一起使用是有意义的,但前提是你理解它们如何在依赖注入方面工作,因为虽然它们都注入依赖关系,但它们注入了非常不同的东西.

AngularJS有自己的依赖系统,允许您将AngularJS模块注入新创建的模块,以便重用实现.假设你创建了一个实现AngularJS过滤器"greet"的"第一个"模块:

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

现在让我们假设您想在另一个名为"second"的模块中使用"greet"过滤器来实现"再见"过滤器.您可以将"第一"模块注入"第二"模块:

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回调的内容之前注入,需要加载"第一个"AngularJS模块来创建"第二个"AngularJS模块.

附注:为了在RequireJS回调函数中使用AngularJS,需要在"firstModule"和"secondModule"文件上注入"angular"作为依赖项,并且必须在RequireJS config上配置它以将"angular"映射到库代码.你也可以用传统的方式将AngularJS加载到页面(脚本标记),尽管会损害RequireJS的好处.

有关在我的博客文章中从2.0版本获得AngularJS核心的RequireJS支持的更多细节.

基于我的博客文章"用AngularJS理解RequireJS",这里是链接.

Answer 6

正如@ganaraj所提到的,AngularJS的核心是依赖注入.在使用和不使用RequireJS构建玩具种子应用程序时,我个人发现在大多数用例中,RequireJS可能有点过分.

这并不意味着RequireJS对于它的脚本加载功能没有用,并且在开发过程中保持代码库的清洁.将r.js优化器(https://github.com/jrburke/r.js)与杏仁(https://github.com/jrburke/almond)结合起来可以创建一个非常纤薄的脚本加载故事.但是,由于它的依赖关系管理功能对于应用程序核心的angular不是那么重要,您还可以评估其他客户端(HeadJS,LABjs,...)甚至服务器端(MVC4 Bundler,...)脚本加载解决方案为您的特定应用.

Answer 7

是的,它确实适用于非常大的SPA.

在某些情况下,RequireJS是必须的.例如,我使用AngularJS开发PhoneGap应用程序,该应用程序也使用Google Map API.如果没有像RequireJS这样的AMD加载器,应用程序在离线时会因为无法获取Google Map API脚本而在离线时崩溃.AMD加载程序让我有机会向用户显示错误消息.

但是,AngularJS和RequireJS之间的集成有点棘手.我创建了angularAMD来使这个过程变得不那么痛苦:

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

Answer 8

简而言之,这是有道理的.最近在ng-conf 2014中对此进行了讨论.以下是关于此主题的讨论:

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

Answer 9

是的,将angularJS与Angular一起使用是有意义的,我花了几天时间来测试几种技术解决方案.

我在服务器端使用RequireJS制作了一个Angular Seed.非常简单.我使用SHIM表示法没有AMD模块而不是AMD,因为我认为处理两个不同的依赖注入系统非常困难.

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

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

Answer 10

如果你计划延迟加载控制器和指令等,使用requirejs和angularjs是有意义的,同时还将多个惰性依赖项组合到单个脚本文件中,以实现更快的延迟加载.RequireJS有一个优化工具,使组合变得容易.见http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/