Pridanie stránky do Ionic aplikácie
Tags: ionic
Published: 2022-09-20 15:51:43

V [predchádzajúcom postupe](https://dev.to/jurajchovan/vytvorenie-kostry-aplikacie-v-ionic-framework-ver5-4bhi) 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
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yowhrbaop8yksgm4jocp.PNG)
Týmto sa vytvorí v Ionic projekt definovaný podadresár "../pages/auth/" a v ňom predpripravená štruktúra súborov stránky:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jfibdc61os8gm4c8v4t.PNG)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vv5tbr9eynwbt3lnolj.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vdnzdh11boptiwvc2o6.PNG)
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":

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppzb65p62lvhydfidxlc.PNG)
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>
```

...