Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page
  • Models
  • Services
  • How we handle data in this template?

Was this helpful?

Ionic Data Integration

The key to an evolving app is to create reusable services to manage all the data calls to your backend. Learn how we manage the data in this Ionic 5 Template.

PreviousIonic Code StructureNextTheming

Last updated 3 years ago

Was this helpful?

In this section we will not discuss any backend implementation in particular because as we explained above, there are so many options and flavors when it comes to backend implementations that it turns impossible to provide examples for every option.

Also, this video explains how to use a Firebase Firestore database as the Travel listing data source for the Ionic 5 Full Starter App template.

We will focus instead on the app’s side of the problem, how to handle data calls, as this works the same and is independent on the way you implement the backend. We will talk about models and services and how they work together to achieve this.

Models

Domain models are important for defining and enforcing business logic in applications and are especially relevant as apps become larger and more people work on them.

At the same time, it is important that we keep our applications DRY and maintainable by moving logic out of components themselves and into separate classes (models) that can be called upon. A modular approach such as this makes our app's business logic reusable.

Services

This template is implemented using Ionic and Angular and it borrows its best parts. Angular enables you to create multiple reusable data services and inject them in the components that need them.

Refactoring data access to a separate service keeps the component lean and focused on supporting the view. It also makes it easier to unit test the component with a mock service.

Almost anything can be a service, any value, function, or feature that your application needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. The main purpose of Angular Services is sharing resources across components.

We encourage the usage of models in combination with services for handling data all the way from the backend to the presentation flow.

How we handle data in this template?

Using these json files we simulate a real database that we query through the services.

For a production app you should use a real database.

Let's see an example of how we query the notifications data from the notifications.json using the NotificationsService.

notifications.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class NotificationsService {
  constructor(private http: HttpClient) { }

  public getData(): Observable<any> {
    return this.http.get<any>('./assets/sample-data/notifications.json');
  }
}

And then we call this getData() method from our NotificationsResolver

src/app/notifications/notifications.resolver.ts
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';

import { NotificationsService } from './notifications.service';

@Injectable()
export class NotificationsResolver implements Resolve<any> {

  constructor(private notificationsService: NotificationsService) { }

  resolve() {
    return this.notificationsService.getData();
  }
}
src/app/notifications/notifications.resolver.ts
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';

import { NotificationsService } from './notifications.service';

@Injectable()
export class NotificationsResolver implements Resolve<any> {

  constructor(private notificationsService: NotificationsService) { }

  resolve() {
    // Base Observable (where we get data from)
    const dataObservable = this.notificationsService.getData();
    return { source: dataObservable };
  }
}

So, once you have your real database you just need to change the way you get the data. Instead of doing a http get to the local json file you will do it to your DB.

To learn more about Angular Building Blocks, please visit .

Because this is a template, and not a final app for production, we use static data that we store in local json files located in the

Angular Tutorial: Learn Angular from scratch step by step
However, if you want to use Firebase we have some tutorials that can help you.
assets folder.