Share
In deze post zullen we Ionische pagina's bekijken. Ik zal je laten zien hoe je inhoud in je app kunt bewerken en hoe je extra app-pagina's kunt maken en navigatie kunt instellen.
In Aan de slag met Ionic hebben we geleerd hoe we ons allereerste Ionische project kunnen maken. Verderop in deze tutorial gaan we een van de pagina's bewerken die we voor onze app hebben gemaakt.
Om onze pagina te kunnen bewerken, moeten we ons project openen met behulp van een teksteditor. In mijn geval zal ik Visual Studio Code gebruiken, maar gebruik gerust je eigen teksteditor. Als uw project eenmaal is geopend, moet het er ongeveer zo uitzien als de afbeelding hieronder (let op, we openen de volledige projectmap en niet alleen een specifieke pagina):
Ionic gebruikt paginabestanden die alle benodigde bestanden bevatten die u nodig hebt om wijzigingen aan te brengen aan een pagina in uw toepassing. Deze pagina's zijn te vinden in een map onder de src map in uw Ionic-project.
We gaan een eenvoudige verandering aanbrengen in onze Ionische app door de startpagina te bewerken. Om dit te doen, navigeert u naar de home.html bestand in src / pages / home en breng de volgende wijzigingen aan in het bestand:
Mijn huis Welkom bij My Ionic App!
Dit is super geweldig.
Dit is mijn eerste Ionische app ooit.
Ga hiermee naar de home.scss bestand, ook in src / pages / home, en breng de volgende wijzigingen aan:
page-home ion-content achtergrond: zwart! belangrijk; h2 kleur: wit; p kleur: wit;
Hier hebben we de achtergrondkleur van de startpagina gewijzigd van wit in zwart door te targeten ion-inhoud. Dit is waar onze pagina-inhoud bestaat. Daarnaast hebben we ook de h2 header element evenals de p (paragraaf) elementen en veranderde de kleur van de tekst voor beide in wit.
Zorg dat uw wijzigingen zijn voltooid (vergeet niet om ze op te slaan), voer een van beide uit ionische serveren of ionisch laboratorium vanaf de opdrachtregel. Deze Ionische CLI-tools zullen je app compileren en beschikbaar maken voor testen. Ik zal gebruiken ionisch laboratoriumin dit voorbeeld.
Zodra u met succes een van deze opdrachten hebt uitgevoerd, zou uw lokale ontwikkelingsserver uw toepassing moeten laten draaien, en het zou er ongeveer zo uit moeten zien:
We hebben de startpagina dus bewerkt door zowel de tekst als de achtergrondkleur van de pagina te wijzigen. Hoe hebben we dit gedaan? Onze startpagina map bestaat uit drie bestanden: home.html, home.scss, en home.ts.
De home.ts bestand is een TypeScript-bestand dat bestaat uit een hoekig component met de volgende component-decorateur:
@Component (selector: 'page-home', templateUrl: 'home.html')
De home.html bestand fungeert als de sjabloon van de component, die we kunnen gebruiken om wijzigingen aan te brengen in de inhoud van onze startpagina. Het wordt gespecificeerd met de templateUrl parameter naar de component-decorateur.
Om de stijl van de startpagina te wijzigen, kunnen we CSS of SCSS gebruiken in de home.scss het dossier.
Vervolgens gaan we een extra pagina maken in onze applicatie genaamd info. Om deze nieuwe pagina te maken, moeten we de volgende opdracht uitvoeren in ons project: ionisch genereren van pagina-info. In Visual Studio Code kunnen we dit doen door de geïntegreerde terminal te openen vanuit Beeld> Geïntegreerde terminal. Typ gewoon de opdracht daar en druk op invoeren.
Dit genereert een nieuwe pagina in uw project, met de bestanden info.html, info.ts, en info.scss.
Nadat de pagina met succes is gegenereerd, moet u deze onder de map pages in uw projectbestanden kunnen zien. Om deze nieuwe pagina binnen onze applicatie te kunnen gebruiken, moeten we deze eerst registreren in onze app.module.ts het dossier. Je kunt dit vinden in de src / app map.
Voeg eerst een toe importeren verklaring voor het componentbestand van uw infopagina nabij de bovenkant van app.module.ts.
importeer InfoPage uit '... / pages / info / info';
U kunt dit toevoegen onder de importeren verklaringen voor de andere pagina's.
Dan toevoegen infopagina naar de declaraties en entryComponents matrices van uw app-module. Jouw @NgModule verklaring moet er nu als volgt uitzien:
@ NgModule (aangiften: [MyApp, AboutPage, ContactPage, HomePage, TabsPage, InfoPage], // ... entryComponents: [MyApp, AboutPage, ContactPage, HomePage, TabsPage, InfoPage], // ...
In de eenvoudigste vorm, Ionisch duwt en pops pagina'sals navigatieconcept. Het idee is dat we pagina's op elkaar stapelen - wanneer we een nieuwe pagina openen, duwen we deze op de stapel en wanneer we teruggaan naar de vorige pagina, laten we de huidige pagina verdwijnen.
Dus wanneer u een pagina in een Ionic-toepassing bekijkt, bekijkt u altijd de bovenste pagina van de stapel en als u op een andere pagina klikt, ziet u voortvarend deze pagina bovenop de navigatiestapel die de vorige pagina in de weergave bedekt.
Als je terug zou gaan naar de vorige pagina, dan ben je dat popping de huidige pagina van de stapel en de pagina eronder. Zie het als een pak kaarten, waar je kaarten toevoegt en verwijdert uit het spel.
Doorgaan met ons voorbeeld, met onze pagina met succes aangemaakt en geregistreerd in onze applicatie, laten we instellen navigatie naar onze nieuw gemaakte pagina vanaf de startpagina.
Met behulp van de startpagina die we eerder hebben bewerkt, laten we deze verder aanpassen door een knop toe te voegen waarmee we naar onze infopagina kunnen navigeren. Voeg de volgende code toe aan home.html, binnen ion-inhoud en onder de alinea-tekst:
De bovenstaande code specificeert een Ionische component, namelijk een ion-knop. Later voegen we een klikhandler toe, dus wanneer op deze knop wordt gedrukt, gaan we naar de infopagina.
Uw startpagina zou er nu ongeveer zo uit moeten zien:
Als we echter nu op onze nieuw gemaakte knop klikken, zou het ons niet overal brengen, omdat we het nog niet met enige functionaliteit hebben geprogrammeerd. Om dit te doen, moeten we als volgt een kliklistener toevoegen gevolgd door een functie op onze knop:
Laten we vervolgens verder gaan en de functie verklaren die we hierboven schreven, navigateToInfo (), in onze home.ts het dossier. Importeer eerst het NavController helper van de ionische hoekige kernbibliotheek. NavController stelt ons in staat om navigatie te beheren in onze Ionic-applicatie, en we zullen het gebruiken om de infopagina boven op de startpagina te duwen wanneer op de knop wordt geklikt.
We moeten ook het. Importeren infopagina component. Zet deze lijnen bovenaan je home.ts het dossier.
importeer NavController van 'ionic-angular'; importeer InfoPage uit '... / info / info';
Vervolgens zullen we de component voor de startpagina wijzigen om een exemplaar van NavController te ontvangen via injectie van afhankelijkheid. Wijzig de constructor van de startpagina naar het volgende:
constructor (public navCtrl: NavController)
Eindelijk kunnen we de navigateToInfo functie in onze Startpagina bestanddeel.
navigateToInfo () this.navCtrl.push (InfoPage)
Alles wat we doen, is een verwijzing naar de informatiepaginacomponent naar de NavController.
Ga met het bovenstaande naar de info.html pagina en voeg een nieuwe header toe aan ion-inhoud. Misschien iets als Dit is geweldig…
Nu, als u uw toepassing uitvoert en op klikt Navigeer naar Info knop op de startpagina, ziet u uw nieuw gemaakte infopagina. Let ook op de knop Terug, die automatisch door Ionic voor u wordt gemaakt.
Gefeliciteerd! U hebt met succes een nieuwe pagina gemaakt en ernaartoe genavigeerd. Voel je vrij om dit proces te herhalen en andere pagina's aan te maken binnen dit demoproject.
Tot nu toe hebben we in deze serie een nieuw Ionisch project kunnen maken, nieuwe pagina's kunnen maken, de inhoud van onze pagina's kunnen bewerken en navigatie kunnen instellen. We hebben nu enkele kernconcepten behandeld die ons verder zullen helpen terwijl we doorgaan met onze ontwikkeling van Ionische toepassingen.
Terwijl je hier bent, bekijk enkele van onze andere berichten over de ontwikkeling van Ionische apps!
Accentsconagua