Fachbücher kompakt zusammengefasst

    Ionic (V4): Bewährte User Interface Komponenten einfach implementieren

    Inhalt

    1. Anforderungen, um mit Ionic (V4) zu entwickeln
    2. Implementierung ausgewählter Komponenten ausführlich erklärt

    1. Anforderungen, um mit Ionic (V4) zu entwickeln

    Wichtig wäre zumindest grundlegende Kenntnisse im Umgang mit der Konsole. Unter Linux kann die Linux Shell – zum Beispiel Bash – verwendet werden, die im folgenden Artikel vorgestellt wird

    Grundlegende Funktionsweise der Linux Shell „Bash“

    Unter Windows kannst du die Powershell verwenden, im folgenden Artikel erklärt

    Eine Einführung in die Verwendung der Windows Powershell

    Unter Mac kann das in den Bordmitteln enthaltene Terminal oder alternativ iTerm verwendet werden.

    $ node --version
    $ npm --version

    Node und der in der Installation enthaltene Paketmanager npm müssen global installiert sein. Falls bei dir noch nicht erfolgt, kannst du node hier herunterladen https://nodejs.org/en/download/

    $ git --version

    Empfohlen aber nicht zwingend notwendig, ist die Versionsverwaltung deiner Projektdateien über Git. Weitere Informationen findest du im folgenden Beitrag

    Grundlagen der Versionsverwaltung mit Git einfach erklärt
    $npm install -g @ionic/cli

    Nun kannst du Ionic global installieren.

    2. Implementierung ausgewählter Komponenten ausführlich erklärt

    2.1 Modal (ion-modal)

    $ ionic generate page pages/modalWindow

    Kurzform: $ ionic g p pages/modalWindow

    src/app/app.module.ts
    
    ...
    @NgModule({
      declarations: [AppComponent],
      entryComponents: [],
      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
        ModalWindowPageModule],
      providers: [
    ...

    Das ModalWindowPageModule dem app-Module hinzufügen.

    src/app/pages/home.page.ts
    
    import { Component, OnInit } from '@angular/core';
    import { ModalController} from '@ionic/angular';
    import { ModalWindowPage} from '../note/note.page';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.page.html',
      styleUrls: ['./home.page.scss'],
    })
    export class HomePage implements OnInit {
    
      constructor(private modalCtrl: ModalController) { }
    
      ngOnInit() {
      }
    
      async startModal() {
        const modal = await this.modalCtrl.create({
          component: ModalWindowPage
        });
        modal.present();
      }
    }
    

    Die async-Methode startModal mit dem ModalController im Modul der Hauptseite einbinden.

    src/app/pages/home.page.html
    
    ...
    <ion-button (click)="startModal()">Modal</ion-button>
    ...

    Hier wird das Klick-Event der startModal-Methode im Template implementiert.

    Neueste Beiträge

    Angular: die wichtigsten Begriffe ausführlich erklärt

    Inhalt Begriffe in Angular und ihre BedeutungAllgemeinLifecycle-Hooks 1. Begriffe in Angular und ihre Bedeutung

    TypeScript: Grundlagen und Vorteile

    Inhalt Grundlagen TypeScriptVorteile der TypisierungBeispiele der TypisierungVariablen-Deklaration und InitialisierungArray-Deklaration und InitialisierungKlassen-Deklaration und Initialisierung ihrer EigenschaftenMethoden und die Initialisierung...

    JavaScript: Objekte erzeugen und Values abrufen

    Inhalt Grundlagen ArraysGrundlagen ObjekteObjekt mit enthaltenen ArraysObjekt mit verschachtelten Arrays 1. Grundlagen Arrays

    Ionic (V4): Bewährte User Interface Komponenten einfach implementieren

    Inhalt Anforderungen, um mit Ionic (V4) zu entwickelnImplementierung ausgewählter Komponenten ausführlich erklärt 1. Anforderungen, um...

    Git und die wichtigsten fortgeschrittenen Techniken

    Inhalt Schnelleinstieg - Befehle fortgeschrittener TechnikenKann man aus Git noch mehr herausholen?Fortgeschrittene Techniken ausführlich erklärt

    Ähnliche Beiträge

    Kommentar schreiben

    Deinen Kommentar abschicken
    Gebe bitte deinen Namen ein