如何使用AngularJS和RequireJS從外部文件注入服務？

Question

我從外部文件注入控制器，我想爲外部文件服務做同樣的事情。它應該在工廠聲明中註冊。

注入控制器工作的

控制器

'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(); 
    }]; 
}); 

現在我要注入服務

個服務

'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' must return a value from $get factory method.。

此代碼受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; 
    }]); 
}); 

在這裏定義存根爲服務和擴展它，當服務實際上是延遲加載。

（順便說一句，我認爲的$injector.invoke()最後2個參數在這種情況下是多餘的。）

如果你想另一個想法有關混合RequireJS和角度，與延遲加載和r.js優化打得很好，你可以看看angular-require-lazy。