All the categories have a same code structure: a details and a listing folder and a service (for fetching the data). Inside each folder you will find a module (because the route is lazy loaded), a model, a resolver, and the page ts, html and scss files.
specific category code structure
Each category has a service for fetching the data. Remember that in this template we use local data fetched form local json files, however, when you build a real application, you will likely store your data in a remote database and connect it with your app through a REST API. So, you can use these services and change the local url for your remote API url.
Resolvers are part of the Angular router library. It's an interface that a class can implement to be a data provider.
If you were using a real world API, there might be some delay before the data to display is returned from the server. You don't want to display a blank component while waiting for the data.
It's preferable to pre-fetch data from the server so it's ready the moment the route is activated. This also allows you to handle errors before routing to the component. There's no point in navigating to a route if we don't have any data to display.
All resolvers from the categories section do almost the same: they ask the service for the data to be shown. Because we implement the App Shell pattern for these routes, the service returns an observable that firstly will emit the mock data (shell model), and then the real data fetched from the backend.