使用 Require JS + Angular JS 的依赖注入。 App需要auth，但是auth需要app

Question

我正在尝试使用 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>

Answer 1

您根据 "The app, requires authService to load, and authService requires app to load" 描述了一个循环引用，但根本没有解决方案。

但是，查看您提供的示例代码，您真正的依赖是：

authService 需要创建并可供 app

app

appCtrl 需要 authService

假设这是你唯一的依赖，你可以使用 angularAMD 创建 authService:

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

并确保使用 angularAMD 到 bootstrap app:

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

查看 Loading Application Wide Module 了解更多详情。

使用 Require JS + Angular JS 的依赖注入。 App需要auth，但是auth需要app

Dependency Injection with Require JS + Angular JS. App requires auth, but auth requires app

dependency-injection

requirejs

angularjs

angular-amd