Question

我是Angular的新手，我认为我的服务使用不正确。

我有三个控制器使用来自REST后端的数据（使用Restangular）。每个端点都不同，但数据结构相同。

获取数据后，我必须先做一些简单的业务逻辑才能在页面中使用，我想在本地缓存数据。但这意味着我有三个带有双倍代码的控制器。不好。

我想集中这一点，让控制器只是要求'版本'。我以为我会创建一个包含Restangular的角度服务，然后创建三个副本，每个副本都有不同的端点，以及它们自己的状态。

但服务是单身，所以我猜这是错的。

Psuedo代码......

..MyDataService(..., dataEndpoint)
{
   ...
   var stuff = []

   construct() {
       this.stuff = Restangular.getData(...)
   }

   getSmallest() {
       return this.stuff.sort(...)
   }       
   getLatest() {
       return this.stuff.sort(...)
   }       
   getBiggest() {
       return this.stuff.sort(...)
   }
}


...RedStuffController()
{
    $scope.data = MyService('/things/redstuff/') 
}
...BlueStuffController()
{
    $scope.data = MyService('/things/blue') 
}
...GreenStuffController()
{
    $scope.data = MyService('/things/green') 
}

应该我在做什么？

Answer 1

您可以使用工厂创建服务构造函数并将其返回。它看起来像这样。

app.factory('MyService',function(Restangular) {
      function MyService(url) {
          this.stuff = Restangular.getData(url)
      }
      MyService.prototype.getSmallest=function() {
         return this.stuff.sort(...)
      }
      return MyService;   //We are not returning service object but service constructor function 
});

现在在控制器中注入它，你可以做

$scope.data = new MyService('/things/green').getSmallest();

Answer 2

服务和工厂是单件 - 在所有控制器（以及其注入的任何其他地方）之间创建和共享一个实例。我建议在您的单件工厂/服务中创建工厂方法：

<强> JS

app.factory('MyDataService', function() {
    function Stuff(endpoint) {
       ...
       var stuff = []

       this.construct() {
          stuff = Restangular.getData(...)
       }

       this.getSmallest() {
          return stuff.sort(...)
       }       
       this.getLatest() {
          return stuff.sort(...)
       }       
       this.getBiggest() {
           return stuff.sort(...)
       }
    }
    return  { 
        get: function(endpoint) {
             return new Stuff(endpoint);
        }
    }

});

<强>控制器

app.controller('RedStuffController', function($scope, MyDataService) { 
       $scope.data = MyDataService.get('/things/redstuff');
});

app.controller('BlueStuffController', function($scope, MyDataService) { 
       $scope.data = MyDataService.get('/things/bluestuff');
});

app.controller('GreenStuffController', function($scope, MyDataService) { 
       $scope.data = MyDataService.get('/things/greenstuff');
});

如何创建服务的多个实例（或者，我应该使用什么而不是服务？）

2 个答案: