Share
În acest post vom examina paginile ionice. Vă vom arăta cum să editați conținut în aplicația dvs., precum și cum să creați pagini de aplicații suplimentare și să configurați navigația.
În Început cu ionic, am învățat cum să creați primul nostru proiect Ionic. Continuând de acolo, în acest tutorial, vom edita una dintre paginile pe care le-am creat pentru aplicația noastră.
Pentru a edita pagina noastră, trebuie să ne deschidem proiectul folosind un instrument de editare a textului. În cazul meu, voi folosi codul Visual Studio, dar vă rugăm să vă simțiți liber să folosiți propriul editor de text preferat. Odată ce ați deschis proiectul, ar trebui să arate asemănător imaginii de mai jos (rețineți deschiderea întregului dosar al proiectului și nu doar a unei anumite pagini):
Ionic folosește fișierele de pagină care conțin toate fișierele necesare pentru a face modificări oricărei pagini date în aplicația dvs. Aceste pagini pot fi găsite într - un dosar sub src folder în proiectul dvs. ionic.
Vom face o simplă schimbare în aplicația noastră Ionic, editând pagina de pornire. Pentru a face acest lucru, navigați la home.html fișier în src / pagini / home și efectuați următoarele modificări ale fișierului:
Casa mea Bine ați venit la aplicația mea ionică!
Acest lucru este super minunat.
Aceasta este prima mea aplicație ionică.
Cu ce ați făcut, navigați la home.scss fișier, de asemenea, în src / pagini / home, și efectuați următoarele modificări:
home-home conținut ionic fundal: negru important; h2 culoare: alb; p culoare: alb;
Aici am schimbat culoarea de fundal a paginii de pornire de la alb la negru prin direcționare ion conținut. Aici este conținutul paginii noastre. În plus, am vizat și h2 antet element, precum și p (paragraf) elemente și a schimbat culoarea textului pentru ambele la alb.
Odată cu modificările complete (nu uitați să salvați), rulați fie ionice sau ionic din linia de comandă. Aceste instrumente Ionic CLI vor compila aplicația dvs. și vor fi disponibile pentru testare. Voi folosi ionicîn acest exemplu.
Odată ce ați executat cu succes oricare dintre aceste comenzi, serverul dvs. de dezvoltare locală ar trebui să vă transforme cererea și ar trebui să arate astfel:
Deci, am editat pagina de pornire schimbând textul și culoarea de fundal a paginii. Cum am făcut asta? Dosarul nostru de pagină de pornire este alcătuit din trei fișiere: home.html, home.scss, și home.ts.
home.ts fișierul este un fișier TypeScript care constă dintr-o componentă Angular cu următorul decorator de componente:
@Component (selector: 'pagina-home', templateUrl: 'home.html')
home.html fișierul acționează ca șablon al componentei, pe care îl putem folosi pentru a modifica conținutul paginii de pornire. Se specifică cu templateUrl parametru pentru decoratorul componentelor.
Pentru a schimba stilul paginii de pornire, putem folosi CSS sau SCSS în home.scss fişier.
Apoi, vom crea o pagină suplimentară în aplicația noastră numită info. Pentru a crea această nouă pagină, trebuie să executați următoarea comandă în proiectul nostru: ionic genera informații pagină. În Visual Studio Code, putem face acest lucru prin deschiderea terminalului integrat de la Vizualizare> Terminal integrat. Pur și simplu tastați comanda acolo și apăsați introduce.
Aceasta va genera o nouă pagină în proiectul dvs., împreună cu fișierele info.html, info.ts, și info.scss.
După ce pagina este generată cu succes, ar trebui să o puteți vedea sub dosarul de pagini din fișierele de proiect. Pentru ca noi să putem folosi această pagină nou creată în cadrul aplicației noastre, va trebui să o înregistrăm mai întâi la noi app.module.ts fişier. Puteți găsi acest lucru în src / app pliant.
Mai întâi, adăugați un import instrucțiune pentru fișierul component al paginii dvs. de informație din partea de sus a paginii app.module.ts.
importați InfoPage de la "... / pages / info / info";
Puteți adăuga acest lucru mai jos import declarații pentru celelalte pagini.
Apoi adauga InfoPage la declaraţii și entryComponents array-uri ale modulului dvs. de aplicație. Ta @NgModule declarația ar trebui să arate acum după cum urmează:
@NgModule (declarații: [MyApp, DesprePage, ContactPage, Pagina principală, TabsPage, InfoPage], // ... inputComponents: [MyApp, DesprePage, ContactPage, Pagina principală, TabsPage, InfoPage], // ...
În cea mai simplă formă, ionică împinge și POP-uri paginica concept de navigație. Ideea este că ștergem paginile unul peste celălalt - când deschidem o nouă pagină, o împingem pe teancul de stivă și atunci când ne întoarcem la pagina anterioară, vom stinge pagina curentă.
Deci, când vizualizați o pagină într-o aplicație ionică, întotdeauna vedeți pagina de sus a stivei și dacă faceți clic pentru a vedea o altă pagină, veți fi împingând această pagină din partea de sus a stiva de navigare care acoperă pagina anterioară din vizualizare.
Dacă v-ați întoarce la pagina anterioară, atunci veți fi popping pagina curentă din stivă și vizualizarea paginii de sub ea. Gândiți-vă la acesta ca pe un pachet de cărți, în cazul în care adăugați și scoateți cărți de pe punte.
Continuând cu exemplul nostru, cu pagina noastră creată cu succes și înregistrată în cadrul aplicației noastre, să configuram navigarea pe pagina noastră nouă creată din pagina de pornire.
Folosind pagina de pornire pe care am editat-o mai devreme, să o personalizăm în continuare adăugând un buton care ne va permite să navigăm la pagina noastră de informații. Adăugați următorul cod la home.html, în interiorul conținutului de ioni și sub textul paragrafului:
Codul de mai sus specifică o componentă ionică, și anume ion-buton. Mai târziu, vom adăuga un handler pentru clicuri, astfel încât atunci când apăsați acest buton, vom naviga la pagina info.
Pagina dvs. de pornire ar trebui să arate similară cu cea de acum:
Cu toate acestea, dacă am face clic pe butonul nou creat acum, nu ne-ar lua nicăieri, deoarece nu l-am programat încă cu nici o funcționalitate. Pentru a face acest lucru, va trebui să adăugăm un eveniment de ascultător de clicuri urmat de o funcție pe butonul nostru, după cum urmează:
Apoi, să mergem mai departe și să declarăm funcția pe care am scris-o mai sus, navigateToInfo (), în a noastră home.ts fişier. Mai întâi, importă NavController ajutor de la ionic unghiular bibliotecă de bază. NavController ne permite să gestionăm navigația în aplicația noastră Ionic și o vom folosi pentru a împinge pagina de informații în partea de sus a paginii de start atunci când este apăsat butonul.
Va trebui, de asemenea, să importăm InfoPage componentă. Pune aceste linii în partea superioară a tău home.ts fişier.
import NavController de la "ionic-unghiular"; importați InfoPage de la "... / info / info";
Apoi, vom modifica componenta paginii de pornire pentru a primi o instanță de NavController prin injecție de dependență. Modificați constructorul de pagină de pornire la următoarele:
constructor (public navCtrl: NavController)
În cele din urmă, putem declara navigateToInfo funcționează în interiorul nostru Pagina principala component.
navigateToInfo () this.navCtrl.push (InfoPage)
Tot ce facem este să împingeți o referință la componenta paginii info la NavController.
Cu cele de mai sus, navigați la info.html pagina și adăugați un antet nou la ion conținut. Poate ceva de genul Asta e grozav…
Acum, dacă rulați aplicația dvs. și faceți clic pe Navigați la Info pe pagina de pornire, veți vedea pagina de informații recent creată. Notați de asemenea butonul din spate, care este creat automat pentru tine de către ionic.
Felicitări! Ați creat și navigat cu succes la o pagină nouă. Simțiți-vă liber să repetați acest proces și să creați alte pagini în cadrul acestui proiect demo.
Până acum, în această serie, am reușit să creăm un nou proiect ionic, să creăm noi pagini, să editați conținutul paginilor noastre și să setăm navigația. Am acoperit câteva dintre conceptele de bază care ne vor ajuta în continuare pe măsură ce continuăm călătoria noastră în dezvoltarea aplicațiilor ionice.
În timp ce sunteți aici, verificați câteva dintre celelalte postări despre dezvoltarea aplicațiilor ionice!
Accentsconagua