AngularJS 和 RequireJS：没有模块：myApp答案

【问题标题】：AngularJS and RequireJS: No module: myAppAngularJS 和 RequireJS：没有模块：myApp
【发布时间】：2015-04-11 19:28:28
【问题描述】：

我第一次尝试以this guide 为基础将AngularJS 与RequireJS 结合使用。据我所知，经过大量调试后，我正在以正确的顺序加载所有模块，但是当应用程序运行时，Angular 会抛出错误/异常，并显示以下消息：

~~参数 'fn' 不是函数，从 myApp 获取字符串~~

由于语法错误，我之前看到过此消息，因此即使我已经多次查看代码，我也不会排除简单语法错误的可能性。暂时不要制作小提琴，以防它像语法错误一样简单，但如果需要，我当然会这样做。

更新：我刚刚注意到在 <html> 标签中设置 ng-app="myApp" 时，我还得到了一个额外的错误，

没有模块：myApp

更新 II：好的，事实证明这确实是唯一未包含在下面的文件中的语法错误。虽然我仍然遇到更新 I 的问题。

RequireJS 引导程序

'use strict';
define([
    'require',
    'angular',
    'app/myApp/app',
    'app/myApp/routes'

], function(require, ng) {
    require(['domReady'], function(domReady) {
        ng.bootstrap(domReady, ['myApp']);
    });
});

app.js

'use strict';
define([
    'angular',
    './controllers/index'
], function(ng) {
    return ng.module('myApp', [
         'myApp.controllers'
    ]);
    }
);

控制器/索引

'use strict';
define([
    './front-page-ctrl'
], function() {

});

控制器/模块

'use strict';
define(['angular'], function (ng) {
    return ng.module('myApp.controllers', []);
});

controllers/front-page-ctrl

'use strict';
define(['./module'], function(controllers) {
    controllers.
        controller('FrontPageCtrl', ['$scope', 
             function($scope) {
                console.log('I\'m alive!');
            }
        ]);
});

【问题讨论】：

发布后您不应更改您的问题，因为现有答案没有上下文。关于您的新“无模块”问题，这是因为您不应该使用ng-app。 ng.bootstrap 的用途与 ng-app 完全相同。欲了解更多信息，请参阅stackoverflow.com/a/17498509/1095616。
是的，很抱歉。在我更新它之后，我意识到了引导部分。当您在此处指出正确的方向时，会将您的答案标记为已接受。

标签： angularjs requirejs

【解决方案1】：

从您的 html 中删除 ng-app="myApp"。因为它已经手动引导 ng.bootstrap(domReady, ['myApp']);

【讨论】：

【解决方案2】：

Dom ready 状态上的RequireJS 文档：

由于 DOM 就绪是一种常见的应用程序需求，理想情况下是嵌套可以避免上述 API 中的函数。 domReady 模块也实现了 Loader Plugin API，所以你可以使用 loader 插件语法（注意 domReady 依赖项中的 !）强制 require() 回调函数等待 DOM 准备好之前执行。 domReady 用作加载器插件：

因此，当您需要 'domReady' 时，结果是一个函数：

function domReady(callback) {
    if (isPageLoaded) {
        callback(doc);
    } else {
        readyCalls.push(callback);
    }
    return domReady;
}

但是，当您在 domReady 字符串中附加 ! 符号时，结果将是实际的文档元素：

'use strict';
define([
    'require',
    'angular',
    'app/myApp/app',
    'app/myApp/routes'

], function(require, ng) {
    require(['domReady!'], function(domReady) {
        // domReady is now a document element
        ng.bootstrap(domReady, ['myApp']);
    });
});

【讨论】：

感谢您的回复。我部分知道你在说什么，但我想我在使用没有尾随感叹号的 domReady 时做了判断，因为它不在指南中。但是，您的回答确实使我确定它应该在那里。但是，恐怕这并没有解决问题。