Angular 编译来自两个控制器的对象以创建 'Content Feed' 的服务

Question

我有两个控制器用于潜在网站的两个部分：'Articles' 和 'Resources'。我想要一个 'Feed' 部分来组合这两个部分中的对象并将它们全部列出。所有这些我都在使用 ng-repeat。

我不确定在这种情况下是服务还是工厂更合适。我在想工厂可能更有价值，这样我就可以有一种方法 "synchronize" 带有控制器的帖子和一种方法 "GetFeed"，returns 带有组合提要的对象。

我在为此开发架构时遇到问题。

我有一个详细的 codepen，除了 factory/service 之外的所有内容都解决了这个概念。我还将在下面详细说明重要的组成部分：

这是标记（有效）：

<div ng-repeat="article in articles">
  <h1>
    {{ article.title }}
  </h1>
  <pre>
    {{ article.date }}
  </pre>
    {{ article.description }}
</div>

resources 和 feed 部分的标记是从这里推断出来的并且正在运行。

这是当前存储在控制器中的数据：

app.controller('ArticlesCtrl', function($scope, FeedFactory) {

$scope.articles = {
  beer: {
    title: 'Beer',
    date: '1/1/15',
    description: 'Cold filter, goblet imperial hydrometer tulip     glass lagering. pub brewpub brewing malt extract goblet bock bock, abbey. adjunct ale                                           mash tun, bitter ester.'
  },
  liquor: {
    title: 'Liquor',
    date: '1/3/15',
    description: 'Screwdriver, "metaxas chartreuse," hayride cuba libre grand marnier suaza. Paradise mortlach the amarosa cocktail ramos gin fizz murphys.                                         Calvert johnny walker red.'
  }
}

});

以及我要从 ArticlesCtrl 编译 $scope.articles 和从 ResourcesCtrl.

编译 $scope.resources 的相关对象 FeedFactory

app.factory('FeedFactory', function() {
  return { 
    // some object that returns the all the posts from articles and resources
  }
});

重申一下：从两个部分（文章、资源）编译对象并将它们作为 'content feed' 交付的最佳架构是什么？我最终想按日期对它们进行排序，但我会把它留到另一个问题。

Answer 1

我们在客户端项目中使用与 DDD 基本相同的模式，并使用存储库获取所有数据。这对我们来说非常有效，并且让事情分开。您的控制器实际上应该只是您的其他服务与 UI 之间的交互。因此，您将 repo 注入控制器并让 repo 知道如何获取数据，或者如果这两个概念实际上是 2 个不同的东西，那么您将注入 2 个 repos，然后将结果组合在控制器中。

这是一个大概的想法：

app.service("myRepo", function($http){
   getStuffById(id){
      return $http.get("somePath/" + id);
   }
}

app.controller("myCtrl", function($scope, myRepo){
   myRepo.getStuffById(1).then(function(myStuff){
      $scope.myStuff = myStuff;
   }
}

Answer 2

我会将您所有的内容都放在 FeedFactory 中，并根据类型对其进行过滤。这将与 NoSQL 后端完美配合，其中 service.content 实际上是对您的服务器 API 的调用。您也可以（并且可能应该）在服务器上过滤，并且 return service.getArticles() 和 service.getResources() 中的那些对象。这当然取决于您的内容提要有多大。

以下是使用 $filter 中内置的 AngularJS' 的方法：

app.factory('FeedFactory', function($filter) {
  var service = {};

  service.content = [
    {
       type: 'article',
       title: 'Hello there'
    },
    {
       type: 'resource',
       title: 'Yarr this be a resource'
    }
    //etc
  ];

  service.getArticles = function () {
    return $filter('filter')(service.content, {type:'article'});
  };

  service.getResources = function () {
    return $filter('filter')(service.content, {type:'resource'});
  };
  return service;
});

我在这里编辑了你的代码笔作为一个工作示例： http://codepen.io/anon/pen/jEpgKg

Angular 编译来自两个控制器的对象以创建 'Content Feed' 的服务

Angular service that compiles objects from two controllers to create 'Content Feed'

angularjs

angularjs-ng-repeat

angular-services