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 之外是否还有其他方法（我想避免）

示例代码如下。

应用程序.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;
})

身份验证.js

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

配置.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();
});

索引.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);
}]);

查看加载应用程序范围模块以获取更多详细信息。

于 2015-04-26T13:19:10.273 回答