Should services in Angular 2 store data processing logic or components?

Question

This can be tagged based on opinion. But I am looking for standard / best practice. I am creating an Angular 2 application and I have to manipulate the data from the API before I show it in the template. For example, if my service looks like this:

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 } 

And on my component, I could call the service as follows:

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

But is this a standard approach? Or should the prepareData function be included in the component?

Another way of phrasing is whether the service should be heavy compared to the components or should it be light and only act as an interface for receiving data?

Answer 1

Simple, general conversions that you will need (for example, res => res.json().data ) should go into the service.

Specific transformations depending on the presentation logic (e.g. data => data.user.firstName + ' ' + data.user.lastName ) should go in your components.

The service should be able to provide data without knowing what will be displayed. The component should be able to output data without knowing where it came from.

Answer 2

Think of your angular app in terms of n-layer architecture. Follow the DRY principle and at least some of the SOLID points — in this case, S in your services. Think of “Components” as a pair of presenter presentations (where the model is somewhere else), and not ASP.NET webForms (markup combined with code behind).

There are two main features that will affect the details of your design - your endpoint of your service server knows about your viewing models or not. Some teams use an approach where a little conversion is required in your angular application, as the server-side models are very close to angular. In these cases, everything that does not depend on the view may well be in your service, while the component can be implemented with transformations specific to the view.

On the other hand, if you need to map a more general service / server response in your angular view model, you don't want to do this in the service. You also do not want to do this in a component if you can reuse this model (think of it as a business class, not just a DTO) in other views. Since mapping may include business rules, it is best to isolate the highlighted model and mapper layer in your angular application and retain the DRY and "S" services and components. Creating a separate model / business layer is also good, because it can help you easily replace the user interface structure later.

Answer 3

You can manipulate and return data in getData() . You can write your code as follows:

 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 } 

I hope this helps you if you have a specific condition that you can describe briefly and I will help you.