Question

我最近在所有这些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”依赖项，我没有在团队中使用这种技术，我想知道这是否为某些人发射了一些红灯，如果他们会解释原因...谢谢你的时间。

Answer 1

根据我对inclusion of an AMD loader的功能请求，作为其他ng-modules的一部分。

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

将您的所有javascript存储在一个文件中。
将您的javascript分隔为单独的文件，并为每个文件添加脚本标记。
使用像requireJS这样的AMD文件加载器来管理脚本文件及其依赖项。
使用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();
      }
    ])
};

顶部的define语句用于确保在运行此函数之前初始化angular。 angular.module语句表示查找“$ scope”和“myService”并将其注入变量$scope和myService。问题是AMD加载器可能没有初始化定义myApp.services的文件，您可以在其中定义myService，因为它没有出现在上面的define语句中。这在注入列表和AMD依赖列表之间产生了巨大的脱节。不仅难以判断'myApp.services;已加载，也很难说'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

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

1 个答案: