javascript - 如何使用 AngularJS 和 RequireJS 从外部文件注入(inject)服务？

Question

我正在从外部文件注入(inject) Controller ，并且我想从外部文件对服务执行相同的操作。它应该在工厂声明中注册。

注入(inject) Controller 工作

Controller

'use strict';

define(['angular', 'services'], function (angular) {
    return angular.module('vcApp.controllers', ['vcApp.services'])
        .controller('AuthCtrl', ['$scope', '$injector','AuthService', function($scope, $injector, AuthService) {
            require(['auth/authCtrl'], function(authCtrl) {
                $injector.invoke(authCtrl, this, {'$scope': $scope, 'AuthService':AuthService});
            });
        }]);
});

authCtrl

define([], function() {
    return ['$scope', '$routeParams', '$location', '$http', 'AuthService', function($scope, $routeParams, $location, $http, authService) {

        $scope.signIn = function() {
        ...
        }

        $scope.$apply();
    }];
});

现在我想注入(inject)服务

服务

'use strict';

define(['angular'], function (angular) {
    angular.module('vcApp.services', [])
    .factory('AuthService', ['$http', '$injector', function($http, $injector) {
        require(['auth/authService'], function(authService) {
            $injector.invoke(authService, this, {'$http': $http});
        });
    }]);
});

authService

define([], function() {
    return ['$http', function ($http) {
        return {
            login: login
        };

        function login(username, password) {
            var request = $http(...);
            return(request);
        }
    }]
});

当 authController 调用 authService.login(...) 时，它会抛出错误 Error: [$injector:undef] Provider 'AuthService' 必须从 $get 工厂方法返回一个值。 .

此代码的灵感来自 angular-requirejs-seed项目。

Answer 1

正如上面所说，Angular 的 factory() 预计会返回服务对象。您可能会幸运地遇到以下事情:

define(['angular'], function (angular) {
    angular.module('vcApp.services', [])
    .factory('AuthService', ['$http', '$injector', function($http, $injector) {
        var stub = {};
        require(['auth/authService'], function(authService) {
            angular.extend(stub, $injector.invoke(authService, this, {'$http': $http}));
        });
        return stub;
    }]);
});

在这里，您为服务定义一个 stub ，并在服务实际上是延迟加载时扩展它。

(顺便说一句，我认为 $injector.invoke() 的最后两个参数在这种情况下是多余的。)

如果您想要混合 RequireJS 和 Angular 的另一个想法，它可以与延迟加载和 r.js 优化器很好地配合，您可以看看 angular-require-lazy .