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

你描述了一个循环引用，每个“应用程序，需要加载authService，authService需要加载应用程序”，而且根本没有解决方案。

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

authService需要创建并可用于app

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了解详情。

需要JS + Angular JS的依赖注入。应用需要身份验证，但身份验证需要应用

1 个答案: