AngularAMD + RequireJS：无法实例化模块 ngStorage

Question

真的为这个发疯了：

我正在尝试将 AngularJS 和 RequireJS 结合起来。在几次尝试失败后，我转向AngularAMD。我遵循了基本流程，但我不断收到这个令人讨厌的错误：

未能实例化模块 ngStorage，原因是： 模块“ngStorage”不可用！您要么拼错了模块名称，要么忘记加载它...

ngStorage 是一个简单的 3rd 方 Angular 模块。

这是我的 ma​​in.js：

require.config({
  paths: {
    angular: 'js/angular.min',
    angularAMD: 'js/angularAMD.min',
    ngload: 'js/ngload.min',
    ngStorage: 'js/ngStorage.min'
  },
  shim: {
    angularAMD: ['angular'],
    ngload: ['angularAMD'],
    ngStorage: ['angular'] // Also tried with ['angularAMD'], and without this line at all
  },
  deps: ['js/app']
});

还有我的 app.js：

define(['angularAMD','ngStorage'], function(angularAMD) {
    var app = angular.module('tyleApp', ['ngStorage']);
    return angularAMD.bootstrap(app);   // Fails here...
});

我从应用程序中删除了所有其他内容，但在这里失败了......我做错了什么？

注意：我也尝试过：

define(['angularAMD','ngload!ngStorage'], function(angularAMD) {

然后我得到：

angularAMD 未初始化。需要先调用 angularAMD.bootstrap(app)。

Answer 1

ngStorage 已经在 AMD 之后定义了，所以你不需要为此编写 shim。

require.config({
  paths: {
    angular: 'js/angular.min',
    angularAMD: 'js/angularAMD.min',
    ngload: 'js/ngload.min',
    ngStorage: 'js/ngStorage.min'
  },
  shim: {
    angularAMD: ['angular'],
    ngload: ['angularAMD'],

  },
  deps: ['js/app']
});

并且在您的 app.js 中，在您的路径中保留相同的 ngStorage 名称，这个名称可能是不同的字符串，如果您将其命名为另一个，在您的情况下，您的 app.js 看起来不错。

例如如果您在 paths 中使用另一个名称，比方说， 在路径中：
angularStorage: 'js/ngStorage.min'

您的 apps.js 将是：

define(['angularAMD','angularStorage'], function(angularAMD) {
    var app = angular.module('tyleApp', ['ngStorage']);
    return angularAMD.bootstrap(app);   
});

因此，您使用在 requireJS 中定义的“angularStorage”，并且 angular.module() 仍将使用在 ngStorage 源代码中定义的模块名称“ngStorage”。