Mastering Mobile Application Development with Ionic/

...

/

Bringing It All Together

Bringing It All Together

We'll cover the following...

We can now switch our attention to the coding of the following components that will make use of our services and, where appropriate, our custom defined interfaces:

  • The src/app/app.component.ts component
  • The src/app/home/home.page.ts component

Amendments to the app root component

Let’s kickstart this with the application root component, src/app/app.component.ts (amendments highlighted):

Press + to interact
/**
 * AppComponent
 *
 * This class bootstraps the application
 */
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { PlacesService } from './services/places.service';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  /**
   * Creates an instance of AppComponent.
   */
  constructor(private platform: Platform,
              private places: PlacesService) {
    this.initializeApp();
  }
  /**
   * Bootstraps the application - here we load the countries and locations
   * data courtesy of the PlacesService
   */
  public initializeApp(): void {
    this.platform
    .ready()
    .then(() => {
      this.places.loadCountries();
      this.places.loadLocations();
    });
  }
}

There’s nothing complicated here, just importing the PlacesService and loading the data for the Apple Stores and their respective countries.

The HomePage component

With these now in place, we can focus on crafting the logic for the Appy Mapper HomePage component and pull together the different services that we’ve created so far to deliver the final application.

Amendments to the code

...