0

AngularJS + RequireJS を使用して、アプリケーションに authService をロードしようとしています。アプリには authService をロードする必要があり、authService にはアプリをロードする必要があります。しかし、負荷を適切に機能させることができないようです。

authProvider を使用するアプリケーションのメイン コントローラーを設定しようとしましたが、そうすると次のエラーが発生します。

Error: [$injector:unpr] Unknown provider: authServiceProvider <- authService

authService をアプリに挿入しようとすると、次のエラーが発生します。

Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module authService due to:
[$injector:nomod] Module 'authService' is not available! You either misspelled the module name or forgot to load it.

どちらのエラーも私には理にかなっており、なぜそれらが発生するのかを知っています。authService を app.js に含める以外に方法があるかどうかはわかりません(これは避けたいです)。

コード例を以下に示します。

app.js

define(function (require) {
    var angular = require('angular');
    var ngRoute = require('angular-route');
    var authService = require('authService');

    var app = angular.module('app', ['ngRoute']);

    app.init = function () {
        console.log('init');
        angular.bootstrap(document, ['app']);
    };

    app.config(['$routeProvider', function ($routeProvider) {
        console.log('config');
    }]);

    app.run(function () {
        console.log('run');
    });

    var appCtrl = app.controller('appCtrl', function (authService) {

    });

    return app;
})

authentication.js

require(['app'], function (app) {
    return app.factory('authService', ['$http', function ($http) {
        return {
            test: function () {
                return this;
            }
        }
    }]);
});

config.js

require.config({
    baseUrl:'app',
    paths: {
        'angular': '../bower_components/angular/angular',
        'angular-route': '../bower_components/angular-route/angular-route',
        'angularAMD': '../bower_components/angularAMD/angularAMD',
        'ngDialog': '../bower_components/ngDialog/js/ngDialog',
        'ngCookies': '../bower_components/angular-cookies/angular-cookies',
        'authService': 'services/authentication'
    },
    shim: {
        'angular': {
            'exports': 'angular'
        },
        'angular-route': ['angular'],
        'angularAMD': ['angular'],
        'ngCookies': ['angular']
    },
    priority: [
        'angular'
    ],
    deps: [
        'app'
    ]
});

require(['app'], function (app) {
    app.init();
});

index.html

<!DOCTYPE html>
<html lang="en" ng-controller="appCtrl">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <div ng-view></div>
    <script src="bower_components/requirejs/require.js" data-main="app/config.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
</body>
</html>
4

1 に答える 1

1

「アプリにはauthServiceの読み込みが必要で、authServiceにはアプリの読み込みが必要です」ごとに循環参照について説明しましたが、それに対する解決策はありません。

ただし、提供したサンプル コードを見ると、実際の依存関係は次のとおりです。

  1. authService作成して利用できるようにする必要がありますapp
  2. appCtrlで作成されましappたauthService

それが唯一の依存関係であると仮定すると、次angularAMDを作成するために使用できますauthService。

require(['angularAMD'], function (angularAMD) {
   angularAMD.factory('authService', ['$http', function ($http) {
        return {
            test: function () {
                return this;
            }
        }
    }]);
});

そして、必ずangularAMDブートストラップに使用してappください:

define(['angularAMD', 'angular-route', 'authentication'], function (require) {
    var app = angular.module('app', ['ngRoute']);
    ...
    return return angularAMD.bootstrap(app);
}]);

詳細については、Loading Application Wide Moduleを参照してください。

于 2015-04-26T13:19:10.273 に答える