Angular 2中的服务应该保存数据操作逻辑还是组件？

这可能标记为基于意见。但我正在寻找标准/最佳做法。我正在构建一个Angular 2应用程序，并且在我将它显示在模板中之前，我必须从API处理数据。例如，如果我的服务看起来像：Angular 2中的服务应该保存数据操作逻辑还是组件？

getData(id: number): Observable<Data> { 
    return this.http 
     .get(this.url + '/' + id) 
     .map((res) => { 
     return res.json().data; 
     }); 
    } 

    prepareData(data) { 
    // manipulate and return the data 
    }

而且在我的部分，我可以这样调用服务：

getData(id: number): void { 
    this.dataService.getData(id) 
     .subscribe((data: Data) => { 
     this.showData = this.dataService.prepareData(data) 
     }; 
    }

但是，这是标准的做法？或者应该将prepareData函数包含在组件中？

另一种说法是，服务在与组件比较时应该很重，还是应该很轻，只能作为获取数据的接口？

来源

2016-12-16 Yathi

简单，通用的转换大家需要（如res => res.json().data）应该去服务。

依赖于表示逻辑（例如data => data.user.firstName + ' ' + data.user.lastName）的视图特定转换应该放到组件中。

服务应该能够提供数据而不知道将会呈现什么。该组件应该能够呈现数据而不知道其来自。

来源

2016-12-16 15:59:17 slezica

您的最后一行实际上有助于确定应该去哪里。我希望Angular的文档更清楚一点。 – Yathi

从n层体系结构的角度考虑您的角度应用。尊重DRY原则和至少一些SOLID要点 - 在这种情况下，S在您的服务中。将“组件”视为视图展示器对（其中模型位于其他位置），而不是ASP.NET的webForms（标记加上代码后面）。

有两个基本的可能性会影响您设计的细节 - 您的服务服务器端点是否意识到您的视图模型。有些团队采用这种方法，在角度应用程序中几乎不需要任何转换，因为服务器端型号与非常接近角度视图模型。在这些情况下，任何非视图特定的东西都可以在您的服务中使用，组件中特定于视图的转换是可以的。另一方面，如果您需要将更通用的服务/服务器响应映射到角度视图模型中，则不希望在服务中执行此操作。如果有可能在其他视图中重用此模型（将其视为业务类，而不仅仅是DTO），则您也不想在组件中执行此操作。由于映射可能涉及业务规则，因此最好在角度应用程序中分离专用模型和映射器层，并使服务和组件保持干燥和“S”。创建一个单独的模型/业务层也很好，因为它实际上可以帮助您稍后轻松替换UI框架。

来源

2016-12-16 16:10:15

你能告诉我更多关于VM/mapper层的信息吗？一些链接到角度文档或示例将很好。 – Yathi

这不是特定于角度的，而是OOP启发的概念，它可以在更大的应用程序中获得回报（因为您可以将业务逻辑集中并分离为“真实”类）。 [这是一个]（https://medium.com/opinionated-angularjs/angular-model-objects-with-javascript-classes-2e6a067c73bc）干净地提到这种方法的文章。这是一个很好的模型工厂实现[（swimlane/angular-model-factory）]（https://github.com/swimlane/angular-model-factory），这是一个很好的开箱即用的扩展解决方案指向插入自定义类/映射器，如果需要的话 –

您可以操作并返回getData()中的数据。为以下各项

getData(id: number): Observable<Data> { 
    return this.http 
     .get(this.url + '/' + id) 
     .map((res) => { 
      let data= res.json().data; 
      return this.prepareData(data); 
     }); 
    } 

    prepareData(data) { 
    // manipulate and return the data 
    }

我希望这将帮助你，如果你有特定的条件，你可以在简短的描述，我会帮你的，你可以写你的代码。

来源

2016-12-16 16:30:00 Devansh

Angular 2中的服务应该保存数据操作逻辑还是组件？

回答

相关问题