Pridanie stránky do Ionic aplikácie

V predchádzajúcom postupe som si vytvoril základnú kostru Ionic (ver.5) aplikácie. Teraz si k nej pridám niekoľko nových stránok.

V nasledujúcom postupe si vytvorím dve stránky "Login" a "Register", ktoré budem neskôr využívať v tomto projekte.
Chcem aby tieto stránky (resp.súbory týchto stránok obsahujúce kód) boli v podadresári "../pages/auth/".
V adresári, kde mám vytvorenú túto Ionic aplikáciu spustiť príkaz:

ionic generate page pages/auth/login 

resp.príkaz:

ionic generate page pages/auth/register 

Týmto sa vytvorí v Ionic projekt definovaný podadresár "../pages/auth/" a v ňom predpripravená štruktúra súborov stránky:

Každá takto vytvorená stránka pozostáva z týchto súborov:

• *-routing.module.ts
• *.module.ts
• *.page.html (obsahuje kód layout-u stránky)
• *.page.scss (obsahuje prípadne CSS charakteristiky stránky)
• *.page.spec.ts
• *.page.ts (obsahuje kód logiky stránky) Vytvorením stránky zároveň je táto routovaná a nastavená v kóde tohto Ionic projektu, takže ak mám spustený developovací server:

ionic serve 

viem si zobraziť v prehliadači túto stránku cez príslušnú URL:

http://localhost:8101/login 

čo mi zobrazí túto (zatiaľ prázdnu) stránku:

Pridanie navigácie na stránky

Na hlavnú stránku pridám tlačítko [Login] cez ktoré sa dostanem na vytvorenú stránku "Login":

tj.v súbore "home.page.html" to teda bude kód:

... <div id="container"> <strong>Ready to create an app?</strong> <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p> <div class="button-container"> <ion-button (click)="goToLoginPage()">Login</ion-button> </div> </div> </ion-content> 

a v súbore kódu stránky "home.page.ts":

import { Component } from '@angular/core'; import {NavController} from '@ionic/angular'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor( private navCtrl: NavController ) {} goToLoginPage() { this.navCtrl.navigateForward('login'); } } 

Cez tlačítko [Login] sa teraz dostanem na stránku "Login":

kde zase pridám do časti "header" tlačítko na návrat. V súbore "login.page.html" to bude kód:

<ion-header> <ion-toolbar> <ion-title>login</ion-title> <ion-buttons slot="start"> <ion-back-button defaultHref="home"></ion-back-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content> </ion-content> 

...