Share
I dette innlegget tar vi en titt på ioniske sider. Jeg viser deg hvordan du redigerer innhold i appen din, samt hvordan du oppretter flere appssider og konfigurerer navigering.
I å komme i gang med ioniske lærte vi å lage vårt aller første ioniske prosjekt. Fortsetter derfra, i denne opplæringen, skal vi redigere en av sidene vi opprettet for vår app.
For å redigere siden må vi åpne opp prosjektet vårt ved hjelp av et tekstredigeringsverktøy. I mitt tilfelle bruker jeg Visual Studio Code, men vær så snill å bruke din egen foretrukne tekstredigerer. Når du har åpnet prosjektet ditt, ser det ut som bildet nedenfor (merk at vi åpner hele prosjektmappen og ikke bare en bestemt side):
Ionisk bruker sidefiler som inneholder alle nødvendige filer, du må gjøre endringer på en gitt side i søknaden din. Disse sidene finnes i en mappe under src mappe i ditt ioniske prosjekt.
Vi skal gjøre en enkel endring i vår joniske app, ved å redigere hjemmesiden. For å gjøre det, naviger til home.html filen inn src / sider / home og gjør følgende endringer i filen:
Mitt hjem Velkommen til My Ionic App!
Dette er super fantastisk.
Dette er min første ikoniske app noensinne.
Med det gjort, naviger til home.scss fil, også i src / sider / home, og gjør følgende endringer:
side-home ion-innhold bakgrunn: svart! viktig; h2 farge: hvit; p farge: hvit;
Her har vi endret bakgrunnsfargen på hjemmesiden fra hvitt til svart ved målretting ion-innhold. Dette er hvor vårt sideinnhold eksisterer. I tillegg har vi også rettet mot h2 header element så vel som p (avsnitt) elementer og endret fargen på teksten for begge til hvite.
Når endringene er ferdige (ikke glem å lagre), kjør heller ionisk servering eller ionisk laboratorium fra kommandolinjen. Disse ioniske CLI-verktøyene vil kompilere appen din og gjøre den tilgjengelig for testing. Jeg skal bruke ionisk laboratoriumi dette eksemplet.
Når du har kjørt en av disse kommandoene, bør din lokale utviklingsserver spinne opp søknaden din, og det skal se slik ut:
Så, vi har redigert hjemmesiden ved å endre teksten i tillegg til bakgrunnsfargen på siden. Hvordan gikk vi om å gjøre dette? Vår hjemmeside mappe består av tre filer: home.html, home.scss, og home.ts.
De home.ts filen er en TypeScript-fil som består av en kantet komponent med følgende komponentdekorator:
@Component (selector: 'page-home', templateUrl: 'home.html')
De home.html filen fungerer som komponentens mal, som vi kan bruke til å gjøre endringer i innholdet på hjemmesiden vår. Det er spesifisert med templateUrl parameter til komponent dekoratøren.
For å endre stilen på hjemmesiden, kan vi bruke CSS eller SCSS i home.scss fil.
Deretter skal vi lage en ekstra side i vår applikasjon som heter info. For å opprette denne nye siden må vi løse følgende kommando i prosjektet vårt: ionisk generere side info. I Visual Studio Code kan vi gjøre det ved å åpne den integrerte terminalen fra Vis> Integrert terminal. Skriv bare kommandoen der og trykk Tast inn.
Dette vil generere en ny side i prosjektet ditt, med filene info.html, info.ts, og info.scss.
Etter at siden har blitt generert, bør du kunne se den under sidemappen i prosjektfilene dine. For at vi skal kunne bruke denne nyopprettede siden i søknaden vår, må vi først registrere den i vår app.module.ts fil. Du finner dette i src / app mappe.
Først legger du til en importere setning for informasjonssideens komponentfil nær toppen av app.module.ts.
importer InfoPage fra '... / sider / info / info';
Du kan legge til dette under under importere uttalelser for de andre sidene.
Legg så til Infoside til erklæringer og entryComponents arrays av app-modulet ditt. Din @NgModule erklæringen burde nå se ut som følgende:
@NgModule (erklæringer: [MyApp, AboutPage, ContactPage, HomePage, TabsPage, InfoPage], // ... entryComponents: [MyApp, AboutPage, ContactPage, HomePage, TabsPage, InfoPage], // ...
I sin enkleste form, ionisk skyver og pops sidersom sitt navigasjonskonsept. Tanken er at vi stabler sider oppå hverandre. Når vi åpner en ny side, skyver vi den på stakken, og når vi går tilbake til forrige side, spretter vi den gjeldende siden av.
Så når du ser på en side i en ionisk applikasjon, ser du alltid den øverste siden på stakken, og hvis du klikker for å vise en annen side, blir du skyve denne siden på toppen av navigasjonsbunken som dekker den forrige siden i visningen.
Hvis du skulle gå tilbake til forrige side, vil du da være popping den nåværende siden av stakken og vise siden under den. Tenk på det som kortstokk, hvor du legger til og fjerner kort fra kortstokken.
Fortsett med vårt eksempel, siden vår side ble opprettet og registrert i vår søknad, la oss sette opp navigasjon til vår nyopprettede side fra hjemmesiden..
Bruk hjemmesiden vi redigerte tidligere, la oss tilpasse den ytterligere ved å legge til en knapp som lar oss navigere til vår info side. Legg til følgende kode til home.html, inne ijon-innhold og under avsnittet tekst:
Koden ovenfor angir en ionisk komponent, nemlig en ion-knapp. Senere legger vi til en klikkbehandler, så når du trykker på denne knappen, navigerer vi til info siden.
Hjemmesiden din bør se ut som dette nå:
Men hvis vi skulle klikke på vår nyopprettede knapp nå, ville det ikke ta oss hvor som helst, siden vi ikke har programmert det ennå med noen funksjonalitet. For å gjøre det, må vi legge til en klikklytterhendelse etterfulgt av en funksjon på vår knapp som følger:
Neste, la oss gå videre og erklære funksjonen vi skrev over, navigateToInfo (), i vår home.ts fil. Først importerer du NavController hjelper fra ionisk-vinkel kjernebibliotek. NavController tillater oss å styre navigasjonen i vår joniske applikasjon, og vi bruker den til å trykke info-siden på toppen av hjemmesiden når knappen klikkes.
Vi må også importere Infoside komponent. Sett disse linjene øverst på din home.ts fil.
importer NavController fra 'ionisk-vinkelformet'; importer InfoPage fra '... / info / info';
Deretter endrer vi hjemmesiden komponenten for å motta en forekomst av NavController via avhengighetsinjeksjon. Bytt startsidekonstruktøren til følgende:
konstruktør (offentlig navCtrl: NavController)
Til slutt kan vi erklære navigateToInfo fungere inne i vår Homepage komponent.
navigateToInfo () this.navCtrl.push (InfoPage)
Alt vi gjør er å skyve en referanse til info side komponenten til NavController.
Med det ovennevnte fullførte, naviger til info.html side, og legg til en ny topptekst til ion-innhold. Kanskje noe som Dette er fantastisk…
Nå, hvis du kjører søknaden din og klikker på Naviger til Info knappen på hjemmesiden, vil du se din nyopprettede info side. Legg også merke til tilbakeknappen, som automatisk blir opprettet for deg av Ionic.
Gratulerer! Du har opprettet og navigert til en ny side. Gjenta denne prosessen og opprett andre sider i dette demoprojektet.
Så langt i denne serien har vi klart å skape et nytt ionisk prosjekt, lage nye sider, redigere innholdet på våre sider og sette opp navigering. Vi har nå dekket noen av kjernebegrepene som vil hjelpe oss videre når vi fortsetter på vår reise med å utvikle ioniske applikasjoner.
Mens du er her, sjekk ut noen av våre andre innlegg om ionisk app-utvikling!
Accentsconagua