Categories

This template includes five carefully designed and developed categories with lots of useful components: Travel, Food, Fashion, Deals and Real Estate.

We carefully designed and coded five different and complete categories: Travel, Food, Fashion, Deals and Real Estate.

Each category has a Listing view and a Details view. Each of these pages is different and has different and unique components that you can reuse within your Ionic app.

Some of the components you will find in this section are:

• Cards

• Lists

• Sliders

• Maps

• Tags

• Text Blocks

• Images

• Grids

• Progress Bar

• Buttons

• Icons

• Countdown

• Modals

• Alerts

• Different types of layouts to display your data in a beautiful and organized way

Also, all the categories pages implement the App Shell pattern, so we will use our custom components for the App Shell.

Categories page

Code Structure

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

Services

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

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.

How to App Shell is implemented can be read in Route Resolves and App Shell.

Models

The shell needs a model of the data to be shown so it can create the shell skeleton properly. Also, it's a good practice to have data models for our pages.