Angular 2 service: where to keep the data

Question

I have been learning angular 2 for a couple weeks. I am a bit confused with one thing. Please compare how the data is stored/shared here:

https://github.com/Apress/pro-angular-2ed/blob/master/Angular%202.0/08%20-%20SportsStore%20-%20Orders%20and%20Checkout/SportsStore/app/model/product.repository.ts

and here:

https://github.com/gothinkster/angular2-realworld-example-app/blob/master/src/app/shared/services/comments.service.ts

The first link shows how it is done in Adam Freeman's book called "Pro Angular". We can see that there is a service called ProductRepository, and thats where all the products are stored. This service has a constructor which initializes its data from another service, called StaticDataSource (later in the book its changed to take the data from the rest api). So to sum up: We have a component, that gets injected a service called ProductRepository. Then it uses getProducts() method from this service in order to receive all the products (which in reality are just storied in an array in that service).

Now lets look at the second link:

In here we have a CommentsService. This time the data is not stored in this service. We just have the method called getComments() which in turn executes another method from an api service. So to sum up: We have a component (ArticleComponent) and it gets injected the CommentsService. Then it calls getComments() on that service, which in reality sends a http.get request to the server each time it is called.

---

Now my question is about the difference between these approaches and the consequences. From what I understand is that in the first case all the data is taken from the server only once (when the app loads) and then its all stored in services called SomethingRepository (ProductRepository etc). In the second link however, every single time we use a service (in any component), we receive the data straight from the server.

What is the best practice about it? I am just worried that if we use the approach that is presented in the book, then we wont always get the 'freshest' possible data, because if another client changed something in the meantime, then we still deal with data that was downloaded when our app was loading. On the other hand, the second approach may influence our possibility of sharing data between the components.

I am really confused with this and I am not sure if I actually should keep the whole model in my app and have some kind of repositories, or maybe the second approach is better. Thank you for any help.

Answer 1

A collection of products is very unlikely to change in the time you spend on that website. Which in this case makes it far more relevant to actually cache the obtained data.

A collection of comments, for instance in an active message board, can change multiple times during a single page visit. This is probably why they choose to always call from the service when the collection is obtained. Even though in my opinion, this is not the right way to do it. Better would be to use a websocket connection, and update the collection from the server, instead of obtaining the collection every time, with the high probability that nothing has changed.

Sooooo, to sum it up, it depends on case to case, collection to collection, which kind of caching you would like to use. But my recommendation is to call the server only once, if it's static data like a product array. And when it's dynamic data, you should use websockets to maintain the collection