在AngularJs模块中包含外部工厂

时间:2014-08-20 17:32:26

标签: javascript angularjs

我想创建一个工厂来抽象我的$http来电。我想在多个模块中使用这个工厂,但我只希望保留该文件的一个副本。

我发现我正在做与kendo.directives类似的事情:

angular.module('createPolicy', ['kendo.directives'])
    .controller('CreatePolicyController', ['$scope', function ($scope) {

如何创建工厂,以便在添加kendo.directives来源后,我可以像.js那样简单地将其包含在内?

例如:

angular.module('createPolicy', ['kendo.directives', 'myPolicyService'])
    .controller('CreatePolicyController', ['$scope', function ($scope) {

我如何构建工厂才能像那样使用它?

编辑:我在angular-factories.js中有以下内容:

var policyService = angular.module("PolicyService", []);
policyService.factory('PolicyService', function ($http) {
    return {
        getFoos: function () {
            //return the promise directly.
            return $http.get('/foos')
                      .then(function (result) {
                          //resolve the promise as the data
                          return result.data;
                      });
        }
    }
});

然后,在另一个文件中,我尝试使用它:

angular.module('createPolicy', ['kendo.directives', 'PolicyService'])
    .controller('CreatePolicyController', ['$scope', function ($scope, policyService) {
        $scope.editPolicy = true;
        $scope.packages = [];

        console.log(policyService.getFoos());

但是,我收到了错误:

  

TypeError:无法读取属性' getFoos'未定义的

我包含这样的文件(在ASP.NET MVC中):

bundles.Add(new ScriptBundle("~/bundles/jqueryplugins").Include(
    "~/Scripts/angular.min.js",
    "~/Scripts/angular-factories.js",
    "~/Scripts/kendo.all.min.js",
    "~/Scripts/kendo.aspnetmvc.min.js"));

2 个答案:

答案 0 :(得分:4)

您可以定义自己的模块。

var specialHttpModule = angular.module("specialHttpModule", []);
specialHttpModule.service("someSpecialService", someSpecialService);

这将在此模块的.js文件中。然后,您可以将其作为依赖项包含或使用angular.module("specialHttpModule");检索它。要将其添加到createPolicy模块,您需要将模块名称添加到依赖项列表中:

angular.module('createPolicy', ['kendo.directives', 'specialHttpModule'])

然后在您的模块中可以使用specialHttpModule中声明的所有服务,指令和控制器进行注入:

.controller('CreatePolicyController', ['$scope', 'someSpecialService',
    function ($scope, someSpecialService) {

答案 1 :(得分:1)

而不是servicefactory使用与Provider属性相同的get版本返回的对象,并在config的多个模块中配置相同的提供程序节

<强>工厂:

angular.module('myApp')
 .factory('myService', function() {
 return {
     'username': 'auser',
     'url': ''
      'setUrl': function(inputUrl){
          this.url = inputUrl;
      }
 }
})

等效提供商:

var appProvider = angular.module('appProvider', []);
    appProvider.provider('myService', {
        $get: function() {
          return {
             'username': 'auser',
             'url': ''
             'setUrl': function(inputUrl){
                 this.url = inputUrl;
              }
          }
        }
     });

在多个模块中配置提供程序:

第1单元:

angular.module('myApp', ['appProvider'])
 .config(function(myServiceProvider) {
     myServiceProvider
         .setUrl("stackoverflow.com");
});

第2单元:

angular.module('secondApp', ['appProvider'])
 .config(function(myServiceProvider) {
     myServiceProvider
         .setUrl("google.com");
});