AngularJS RequireJS Browserify和Javascript模块/全局范围的噩梦

Question

我最近在所有这些CommonJS vs AMD战斗中挖掘了一点,这是我的发现......(顺便说一句,我不是在这里讲道,我正在分享我的想法以获得一些建设性的见解......)RequireJS带来了很多复杂性我的Angular模块,我感觉不对,因为它是模块中的模块包装... Browserify方式更清晰但是为了使它能够正确地处理每一件事,你需要拥有所有的依赖关系和依赖关系依赖性正确实现不幸的是,我们并没有生活在一个完美的世界......所以你必须要小心翼翼地避开已经沉寂的自由人的内心依赖......我不是一个额外复杂的粉丝......

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

我有一个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"依赖项,我没有在团队中使用这种技术,我想知道这是否为一些人发射了一些红灯,如果他们会解释为什么...谢谢你的时间.

Answer 1

根据功能请求，我希望将 AMD 加载器作为附加 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”并将它们注入变量$scope和中myService。问题是AMD加载程序可能没有初始化define的文件myApp.services，您可以在其中假设已定义myService，因为它没有出现在上面的define语句中。这会在注入列表和 AMD 依赖项列表之间造成巨大的脱节。不仅很难判断 'myApp.services; 已加载，也很难判断“myApp.services”中有哪些特定组件可用。IOW“myService”是否已加载且可注入？

我目前以 requirejs 的形式使用选项 #3，因为我需要能够通过路由动态加载控制器（请参阅第一个链接）。另外，我现在使用的应用程序的大小使得 browserfy 不切实际，因为页面太多。然而，我确实同意这是次优的，但目前我没有看到任何其他选择。
从实际的角度来看，我为每个文件定义一个可注入。我还尝试使所有可注入数组与所需数组匹配。这不是必需的，但它使代码更易于维护。

我发现这些文章对编写此内容很有帮助：

https://github.com/marcoslin/angularAMD

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