Question

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

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

由于语法错误，我之前看过这条消息，所以即使我多次查看代码，我也不排除出现简单语法错误的可能性。如果它只是语法错误那么简单，那么就不要制作一个小提琴，但如果需要，我当然会这样做。

更新：我刚注意到在<html>标记中设置ng-app =“myApp”时，我还会收到其他错误，

没有模块：myApp

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

RequireJS bootstrap

'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', []);
});

控制器/头版-CTRL

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

Answer 1

删除ng-app =＆＃34; myApp＆＃34;来自你的HTML。因为它已手动引导 ng.bootstrap(domReady, ['myApp']);

Answer 2

Dom ready州的RequireJS文档：

由于DOM ready是一个常见的应用程序需求，理想情况下是嵌套的可以避免上述API中的函数。 domReady模块也是实现Loader Plugin API，因此您可以使用loader插件语法（注意domReady依赖中的！）强制 require（）回调函数等待DOM准备好之前执行。当用作a时，domReady将返回当前文档 loader插件：

因此，当您需要'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']);
    });
});

AngularJS和RequireJS：没有模块：myApp

2 个答案: