为什么我在带有 angularAMD 的模块中找不到“角度”？答案

【问题标题】：Why I can't find 'angular' in in a module with angularAMD?为什么我在带有 angularAMD 的模块中找不到“角度”？
【发布时间】：2016-03-09 05:34:57
【问题描述】：

我正在使用 AngularAMD，我正在尝试“加载”angular.easypichart 模块。

这是我的架构：

--js
----app.js
----main.js
--lib
----angular.easypiechart.js
----ngload.js

在我的 main.js 我有那个代码：

require.config({
    baseUrl: "js",
    paths: {
        'angular': 'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular',
        'angular-route': 'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route',
        'angularAMD': 'https://cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min',
        'ngload': '../lib/ngload',
        'easypiechart': '../lib/angular.easypiechart'
    },
    shim: {
        'angularAMD': ['angular'],
        'angular-route': ['angular'],
        'ngload': ['angularAMD'],
        'easypiechart': ['angular']
    },
    deps: ['app']
});

在我的 app.js 中：

define(['angularAMD', 'angular-route', 'easypiechart'], function (angularAMD) {
    'use strict';

    var app = angular.module('guess-bg', ['ngRoute']);
    // config, etc.

    return angularAMD.bootstrap(app);
});

但是'easypiechart' 失败，我收到错误Cannot read property 'module' of undefined

我不明白，因为我在 shim 中使用了 ['angular'] 来制作 easypiechart。

我尝试了很多东西，例如

define(['angularAMD', 'angular-route', 'ngload!easypiechart']

或者

var app = angular.module('guess-bg', ['ngRoute', 'easypiechart']);

但不断出错。这对我来说非常模糊，我什至不明白这个“ngload”是如何工作的。顺便说一句，我对angular-route 没有意见。

反正我不知道如何简单地加载这个模块，真的很烦人......

你能告诉我我错过了什么吗？

【问题讨论】：

你能告诉我这个'Cannot read property 'module' of undefined'到底是从哪里来的吗？是来自您的app.js 还是来自angular.easypiechart.js？

标签： javascript angularjs angular-amd

【解决方案1】：

我什至不明白这个“ngload”是如何工作的

如果你想直接在你的第一个 requireJS 模块中加载模块，你不需要ngload。它主要用于您的应用程序的延迟加载模块，例如在/some/random/route/ 中，您想使用角度模块，但只想在此处加载它。 ngload 会成功的。

但“easypiechart”失败，我收到错误无法读取未定义的属性“模块”

在您的app.js 中尝试删除'use strict';：

define(['angularAMD', 'angular-route', 'easypiechart'], function (angularAMD) {

    var app = angular.module('guess-bg', ['ngRoute', 'easypiechart']);
    // config, etc.

    return angularAMD.bootstrap(app);
});

这可能是因为您启用了strict 模式。所以浏览器发现angular 对象没有在app.js 周围的任何地方定义，因此你得到Cannot read property 'module' of undefined 的错误。

换句话说，angular 对象确实已定义并可全局使用。但是由于您处于严格模式，浏览器拒绝使用这样的全局变量。如果您仍想使用严格模式。请改用window.angular：

define(['angularAMD', 'angular-route', 'easypiechart'], function (angularAMD) {
    'use strict';

    var app = window.angular.module('guess-bg', ['ngRoute', 'easypiechart']);
    // config, etc.

    return angularAMD.bootstrap(app);
});

【讨论】：