AngularJS + RequireJS + domReady 未捕获的对象答案

【问题标题】：Uncaught object at AngularJS + RequireJS + domReadyAngularJS + RequireJS + domReady 未捕获的对象
【发布时间】：2014-05-29 22:58:28
【问题描述】：

我有一个工作的 AngularJS 应用程序，并开始使用 RequireJS 来处理模块依赖关系。按照本指南 - http://www.startersquad.com/blog/angularjs-requirejs/ - 使用 domReady 插件手动引导 Angular 应用程序。

在 Chrome 中测试并在控制台中获得 Uncaught object。没有 Angular 通常提供的常见细节，只有无用的调用堆栈。

这是我的应用程序的一个非常简化的版本：

<html ng-app="myApp">
<body>
    <script data-main="/scripts/config.js" src="scripts/require.js"></script>
</body>
</html>

config.js：

requirejs.config({
    shim: { 'angular': { exports: 'angular' } },
    deps: ['starting']
});
define(['require', 'angular', 'app'], function (require, angular) {
    require(['domReady!'], function (document) {
        angular.bootstrap(document, ['myApp']);
    });
});

app.js：

define(['angular'], function (angular) {
    var app = angular.module("myApp", []);
    return app;
});

【问题讨论】：

标签： angularjs requirejs domready angular-bootstrap

【解决方案1】：

实际上，在简化版本中，错误更容易发现。问题在于模块的双重使用。第一次使用 HTML（RequireJS 之前的剩余时间）：

<html ng-app="myApp">

RequireJS 完成加载文档后的第二次手动引导：

angular.bootstrap(document, ['myApp']);

所以这是 正确的 HTML 版本：

<html> <!-- Notice: removed ng-app -->
<body>
    <script data-main="/scripts/config.js" src="scripts/require.js"></script>
</body>
</html>

另外，要查看真正的 AngularJS 错误，而不是 Uncaught object（由对异常进行特殊处理的 RequireJS 打印），您可以捕获并显示如下：

require(['domReady!'], function (document) {
    try {
        // Wrap this call to try/catch
        angular.bootstrap(document, ['materialApp']);
    }
    catch (e) {
        console.error(e.stack || e.message || e);
    }
});

【讨论】：