为什么我找不到角度'在带有angularAMD的模块中?

时间:2015-12-04 10:07:28

标签: javascript angularjs angular-amd

我正在与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

我没有得到它,因为我在垫片中使用了[' angular']来进行easypiechart。

我尝试过很多东西,比如

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

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

但不断收到错误。这对我来说非常不利,我甚至都不明白这是怎么回事#'作品。顺便说一句,我对angular-route没有任何问题。

无论如何,我不知道如何简单地加载这个模块,它真的很烦人......

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

1 个答案:

答案 0 :(得分:0)

  

我甚至不了解'ngload'是如何工作的

如果要直接在第一个requireJS模块中加载模块,则不需要ngload。它主要用于您的应用程序的延迟加载模块,例如在/some/random/route/中您想要使用角度模块,但只希望它在此处加载。 ngload会做到这一点。

  

但'easypiechart'失败并且我收到错误无法读取未定义的属性'module'

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);
});