我是Angular.js的新手,试图理解它与Backbone.js的不同之处……我们曾经在使用Backbone时使用Require.js来管理我们的包依赖关系。对Angular.js做同样的事情有意义吗?
当前回答
下面是我使用的方法:http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/
该页面显示了AngularJS + RequireJS的可能实现,其中代码按特性和组件类型分开。
其他回答
在AngularJS中使用RequireJS是有意义的,但前提是你要了解它们各自在依赖注入方面的工作原理,因为尽管它们都注入依赖,但它们注入的东西非常不同。
AngularJS有自己的依赖系统,它允许你将AngularJS模块注入到新创建的模块中,以便重用实现。假设你创建了一个"first"模块,它实现了AngularJS过滤器"greet":
angular
.module('first', [])
.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
}
});
现在假设你想在另一个叫做“second”的模块中使用“greet”过滤器,这个模块实现了一个“goodbye”过滤器。你可以把"first"模块注入到"second"模块:
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”映射到库代码中。你也可以用传统的方式(script标签)将AngularJS加载到页面中,尽管这与RequireJS的优点相违背。
更多关于AngularJS 2.0内核支持RequireJS的细节,请见我的博文。
根据我的博客文章“用AngularJS理解RequireJS”,这里有一个链接。
正如@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.
我认为这是一个主观的问题,所以我将提供我的主观意见。
Angular有一个内置的模块化机制。当你创建应用程序时,你要做的第一件事是
var app = angular.module("myApp");
然后
app.directive(...);
app.controller(...);
app.service(...);
如果你看一下angular-seed,它是angular的入门级应用,它将指令、服务、控制器等分离到不同的模块中,然后将这些模块作为依赖项加载到你的主应用中。
比如:
var app = angular.module("myApp",["Directives","Controllers","Services"];
Angular也会惰性加载这些模块(到内存中),而不是它们的脚本文件。
至于延迟加载脚本文件,坦率地说,除非你写的是非常大的东西,否则它会是一个过度的,因为angular本质上减少了你编写的代码量。在大多数其他框架中编写的典型应用,如果用angular编写,可以减少大约30-50%的LOC。
是的,在Angular中使用requireJS是有意义的,我花了几天时间来测试几个技术解决方案。
我在服务器端用RequireJS做了一个Angular种子。非常简单。 我使用SHIM符号表示没有AMD模块和没有AMD,因为我认为处理两个不同的依赖注入系统非常困难。
我使用grunt和r.js来连接服务器上的js文件,这取决于SHIM配置(依赖)文件。所以我只在我的应用程序中引用一个js文件。
欲了解更多信息,请访问我的github Angular Seed: https://github.com/matohawk/angular-seed-requirejs
简单地说,这是有道理的。最近,ng-conf 2014讨论了这个问题。下面是关于这个话题的演讲:
http://www.youtube.com/watch?v=4yulGISBF8w
推荐文章
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中动态添加指令?
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期
- Javascript复选框onChange
- Javascript函数前导bang !语法