AngularJS RequireJS Browserify 和 Javascript 模块/全局范围噩梦 [关闭]

我最近在 CommonJS 与 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”依赖项之后，我还没有在团队中使用过这种技术，我想知道这是否会为某些人亮起红灯，以及他们是否会解释原因...谢谢您的时间。

根据我的功能请求包含 AMD 加载程序 https://github.com/NathanielAJohnson/angularAMD作为附加 ng 模块的一部分。

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

1. 将所有 JavaScript 存储在一个文件中。
2. 将 javascript 分成单独的文件，并为每个文件添加脚本标签。
3. 使用 AMD 文件加载器，例如要求JS http://requirejs.org/管理脚本文件及其依赖项。
4. 使用像这样的预编译器浏览器化 http://browserify.org/将 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 and myService。问题是 AMD 加载程序可能没有初始化定义的文件myApp.services，其中您可以假设已定义myService，因为它没有出现在上面的define语句中。这会在注入列表和 AMD 依赖项列表之间造成巨大的脱节。不仅很难判断 'myApp.services;已加载，也很难判断“myApp.services”中有哪些特定组件可用。 IOW“myService”是否已加载且可注入？

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

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

https://github.com/marcoslin/angularAMD https://github.com/marcoslin/angularAMD

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