2013-11-14 49 views
7

我最近一直在挖这个CommonJS与AMD的战斗,这是我的发现... (顺便说一句,我不是在这里讲道我分享我的想法得到一些建设性的见解...) RequireJS给我的Angular模块带来了很多复杂性,它对我来说是错误的,因为它是一个模块在模块中的包装... Browserify的方式更干净,但要使它与每个事情,你需要让你所有的依赖和你的依赖关系被正确地实现,不幸的是我们不能生活在一个完美的世界中......所以你必须要垫起和垫住Shimmed Libs的内在依赖......我不是一个额外复杂的大粉丝...AngularJS RequireJS Browserify和Javascript模块/全球范围的噩梦

我目前的方式(并受到所有你的建设性批评...)

我有一个grunt文件连接和缩小我的所有资源,像BreezeJS,$,Q,Ladda等库。 。在全球范围内泄漏...... 然后我声明了这些全局这种类型的模块:

module.value('gLadda', (function(){ 

    if("Ladda" in window && "Spinner" in window){ 
     return Ladda; 
    }else{ 
     throw new Error("The Globals Ladda || Spinner are missing"); 
    } 

})()); 

后在我的应用我有“Angularify”依赖工作,我还没有在一队使用这种技术我想知道这是否为某些人发射了一些红灯,并且他们是否会解释为什么......谢谢你的时间。

+1

我倾向于同意,它并没有意义的使用需要角。 – Polaris878

+3

我在考虑做同样的事情,因为requirejs和browserify会在使用angular.js进行开发时增加更多开销。 –

+0

我有一个开放的功能请求似乎获得一些牵引:https://github.com/angular/angular.js/issues/5410我的潜在解决方案的写作:https://github.com/NathanielAJohnson/angularAMD/ wiki/Proposed-Solution –

回答

1

根据我对inclusion of an AMD loader的功能要求作为附加ng模块的一部分。

Angular带有一个功能,该功能允许用户创建模块定义并稍后通过字符串标识符查找实体,如控制器。 Angular不具备加载存储在单独文件中的脚本的能力,这意味着您剩下四个选项:

  1. 将所有JavaScript存储在单个文件中。
  2. 将您的javascript分隔为单独的文件并为每个文件添加脚本标记。
  3. 使用AMD文件加载器(如requireJS)来管理脚本文件及其依赖项。
  4. 使用像browserify这样的预编译器将nodejs样式文件合并到单个脚本文件中。

随着项目的发展,文件变得更加难以管理,不仅仅因为它们的大小,而且因为模块之间的依赖性变得更加复杂。大型项目也可以从AMD加载器的延迟加载中受益。

AMD模块加载器列出了在运行此文件之前需要存在的依赖关系。问题是AMD的依赖关系接近Angular使用的注入列表,但并不完全一样。一个问题可以看出,在此代码:

define(['angular'], function(angular) { 
    return angular.module('myApp.controllers', ['myApp.services']) 
    .controller('MyController', ['$scope', 'myService', 
     function($scope, myService) { 
     $scope.data = myService.getData(); 
     } 
    ]) 
}; 

在上面说,确保angular运行此功能之前进行初始化的定义语句。 angular.module声明说要查找'$ scope'和'myService'并将它们注入变量$scopemyService。问题是,AMD加载器可能没有初始化定义myApp.services的文件,在这个文件中,你可以假设定义为myService,因为它没有出现在上面的define语句中。这造成注入列表和AMD依赖列表之间的巨大断开。不仅难以分辨'myApp'。服务;已经被加载,但是很难说'myApp.services'中有哪些特定的组件可用。 IOW是'myService'加载和注射?

我当前使用requirejs形式的选项#3,因为我需要能够通过路由动态加载控制器(请参阅第一个链接)。而且,我现在使用的应用程序的大小使浏览器不可行,因为有很多页面。然而,我确实认为这是次优的,但目前我没有看到任何其他选择。
从实际的角度来看,我为每个文件定义一个注射点。我也尝试使所有可注入数组与匹配require数组。这不是必需的,但它使代码更易于维护。

我发现这些文章很有帮助在写这篇:

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx