3

私は動作中の AngularJS アプリケーションを持っていて、モジュールの依存関係に RequireJS を使い始めました。このガイド ( http://www.startersquad.com/blog/angularjs-requirejs/ ) に従って、 Angular アプリを手動でブートストラップするための domReady プラグインを使用します。

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

1 に答える 1

10

実際、簡略化されたバージョンでは、エラーを見つけやすくなっています。問題は、モジュールの二重使用にあります。HTML で初めて (RequireJS 以前の残り):

<html ng-app="myApp">

そして、RequireJS がドキュメントの読み込みを完了した後の手動ブートストラップでの 2 回目:

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

したがって、これはHTMLの正しいバージョンです。

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

また、(例外に対して特別な処理を行う RequireJS によって出力される)代わりに実際の AngularJS エラーを表示するには、次のようにキャッチして表示することができます。Uncaught object

require(['domReady!'], function (document) {
    try {
        // Wrap this call to try/catch
        angular.bootstrap(document, ['materialApp']);
    }
    catch (e) {
        console.error(e.stack || e.message || e);
    }
});
于 2014-05-29T07:19:05.490 に答える