2

I have been using angular 2 for about 2 weeks now and I love it with the exception of one thing... Services. Despite using them, to conform to society, I don't understand the point and I hope some one can explain the reasoning.

Services don't do anything besides load data. Not to mention 9/10 what ever component I inject it into has to have similar functions to handle the data returned and make it usable. Another big problem I have with them is the overhead. Lets say (Following the heroes tutorial) I run an ajax request (using the service) to create a list of heroes, I click on one and now I load a new page where I receive the id and run yet another request using the same service.

Thus I don't understand. Why not create it more like an instance where the data only needs to be loaded once and can be queried instead of making whole new requests. Not to mention returning actual data instead of promises/observable. If some one can explain this and tell me what I am missing I would love that. Thanks in advance.

ZaksBack
  • 189
  • 3
  • 10

2 Answers2

4

Services encapsulates business concerns and separates them from UI concerns or the controller concerns, which governs them both.

Services focus on functionality. UI focuses on presentation. Controllers focus on managing UI and Service interactions.

The benefit is maintainability. The separation of UI logic from business logic is intended to reduce the coupling between the UI layer and the Model layer, leading to a cleaner design that is easier to develop, test, and maintain.

In Angular2: 

class --> Controller
injectable services --> Model
component view template --> View
Michael Kang
  • 52,003
  • 16
  • 103
  • 135
  • Okay I think I get it. I considered the code behind (ex herodetails.component.ts) and the html to be the view sense it handles the data binding and event handlers. But If I understand you correctly, the code behind is the control layer? Should I not create an instance between the component and the service? That way I dont have to keep pulling down the same data. Also if this is the correct way to do it how come its never demonstrated or talked about? (At least from my searches and few tutorials I have followed) – ZaksBack Jul 27 '16 at 03:26
  • There are other patterns that you can follow to ensure data is pulled down once. i.e. service as singleton which caches data, or use an observable which replays data to subscribers. Angular2 talks about a component model, but it is, imho, MVC. – Michael Kang Jul 27 '16 at 03:48
  • Thought this is relevant:http://stackoverflow.com/questions/35762515/is-angular2-mvc – Michael Kang Jul 27 '16 at 03:54
1

There is one situation where a service is essential; when you want to pass data back and forth between components in a tree that is deeper than parent-child.

For example, a contact app. You might have a page component (one level) with a list of contacts component (two levels) where each contact is displayed in a component (three levels), and the rendering of the address (four levels), phone and email (fourth level again) are handled by components. You may have another branch off the root for editing the contact with its own multi level tree. Instead of trying to structure complicated and fragile inter component communications, a service simplifies the data fetching and saving for all the components.

Services can provide a means of setting and reading application state as well. There are a few different patterns, either using ngrx/store, or an observable based state system. This would be pretty well impossible to do using components.

The example app may be a bit of overkill, but imagine that pattern where you load a list using http calls, then on selecting an item you load a complex data structure describing a transaction. You have a bunch of relations to the selected item that you only want to load on selection.

In my short experience things can get very hairy and complex very quickly, and all these things that may seem unnecessary are an answer to a very difficult problem.

Derek Kite
  • 1,767
  • 13
  • 15