Ionic 5

Ionic Book: https://ionic.andreas-dormann.de/
Ionic CLI: https://ionicframework.com/docs/cli

3.5 The side menu app for our book project

ionic start bob-tours sidemenu --type=angular

4.2 Generate pages

ionic generate page pages/Favorites

5.2.2. Create a service

ionic g service services/bob-tours

3. The first app

Dark Mode: https://ionicframework.com/docs/theming/dark-mode

Page 71 (67) - src/theme/variables.scss

@media (prefers-color-scheme: dark) {}

@media (prefers-color-scheme: light) {}

Page 76 (72)

ionic start bob-tours sidemenu --type=angular

4. Navigation

Angular Navigation: https://ionicframework.com/docs/angular/navigation

Clean-up

Page 82 (78)

The following cleanups have to be done:

Deleting the unnecessary folder directory
Deleting the unnecessary folder path
Changing the root path
Defining the menu pages
Modifying the menu UI

ionic generate page pages/Favorites
ionic g page pages/Regions
ionic g page pages/Tour-Types
ionic g page pages/List
ionic g page pages/Details
ionic g page pages/Request

Page 88 (84)

<ion-buttons slot="start">
  <ion-menu-button></ion-menu-button>
</ion-buttons>

4.3 Routing

app-routing.module.ts

routerLink / routerDirection

Adding back buttons

4.4 Extract Data from Routes with ActivatedRoute

p.93 (89)

Path Component Function

Path	Component	Function
/favorites	`./pages/favorites/favorites`	Список туров
/details	`./pages/details/details`	Детали тура

/favorites

./pages/favorites/favorites

Список туров

/details

./pages/details/details

Детали тура

Ошибка компиляции в Ionic 6

[ng] Error: src/app/pages/details/details.page.html:6:24 - error TS2531: Object is possibly 'null'.
[ng]
[ng] 6     <ion-title>{{ tour.Title }}</ion-title>
[ng]                          ~~~~~
[ng]
[ng]   src/app/pages/details/details.page.ts:6:16
[ng]     6   templateUrl: './details.page.html',
[ng]                      ~~~~~~~~~~~~~~~~~~~~~
[ng]     Error occurs in the template of component DetailsPage.
[ng]
[ng]
[ng] Error: src/app/pages/details/details.page.ts:17:5 - error TS2322: Type 'Params' is not assignable to type 'null'.
[ng]
[ng] 17     this.tour = this.activatedRoute.snapshot.params;
[ng]        ~~~~~~~~~

Fix in my/bob-tours

src/app/model/tour.model.ts

export class Tour {
    constructor(
        public ID?: number,
        public Title?: string) { }
}

src/app/pages/details/details.page.html

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ tour?.Title }}</ion-title>  (1)
  </ion-toolbar>

1	Нужно добавить `?` к `tour`

src/app/pages/details/details.page.ts

  tour?: Tour;  (1)

1	Нужно добавить `?` к `tour`

Fixing error: "Could not find a declaration file for module 'lodash'"

npm i lodash --save
npm i --save-dev @types/lodash

import * as _ from 'lodash';

5. Services & Storage

Ionic Storage: https://github.com/ionic-team/ionic-storage

5.1. Database Backend with Google Firebase

5.2. An HTTPClient Service

Programming the data access

Communicating with backend services using HTTP: https://angular.io/guide/http

bob-tours.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import _ from 'lodash';

@Injectable({
  providedIn: 'root'
})
export class BobToursService {

  public regions: any;
  public tourtypes: any;
  public tours: any;

  baseUrl = 'https://bob-tours-app.firebaseio.com/';

  constructor(private http: HttpClient) { }

  initialize() {
    this.getRegions()
      .then(data => this.regions = data);
    this.getTourtypes()
      .then(data => this.tourtypes = _.sortBy(data, 'Name'));
    this.getTours()
      .then(data => this.tours = _.sortBy(data, 'Title'));
  }

  getRegions() {
    let requestUrl = `${this.baseUrl}/Regions.json`;
    return this.http.get(requestUrl).toPromise();
  }

  getTourtypes() {
    let requestUrl = `${this.baseUrl}/Tourtypes.json`;
    return this.http.get(requestUrl).toPromise();
  }

  getTours() {
    let requestUrl = `${this.baseUrl}/Tours.json`;
    return this.http.get(requestUrl).toPromise();
  }

}

6. UI Components

7. Form validation

See Input Validation Sample

7.3. Implementation

7.3.1. Setting up the ReactiveFormsModule

7.3.2. Preparing the form validation and messages

11. Debugging & Testing

Ionic Testing: https://ionicframework.com/docs/angular/testing
Enappd Tutorial on Ionic Testing: https://enappd.com/blog/beginners-guide-to-ionic-angular-unit-testing-part-1/151/

11.1. Health Check with Ionic Doctor

ionic doctor check

11.2. Strictly Typing!

TypeScript and its advantages

Create classes

$ ionic g class models/category/category
$ ionic g class models/tour/tour