Share
In questo post daremo un'occhiata alle pagine ioniche. Ti mostrerò come modificare i contenuti all'interno della tua app e come creare pagine di app aggiuntive e impostare la navigazione.
In Getting Started With Ionic, abbiamo imparato come creare il nostro primissimo progetto Ionic. Proseguendo da lì, in questo tutorial, modificheremo una delle pagine che abbiamo creato per la nostra app.
Per modificare la nostra pagina, dobbiamo aprire il nostro progetto usando uno strumento di editor di testo. Nel mio caso, userò Visual Studio Code, ma non esitate a utilizzare il vostro editor di testo preferito. Una volta che il tuo progetto è stato aperto, dovrebbe apparire simile all'immagine qui sotto (nota che apriamo l'intera cartella del progetto e non solo una pagina specifica):
Ionic utilizza i file di pagina che contengono tutti i file necessari di cui hai bisogno per apportare modifiche a qualsiasi pagina nella tua applicazione. Queste pagine possono essere trovate in una cartella sotto il src cartella nel tuo progetto Ionic.
Stiamo apportando un semplice cambiamento nella nostra app Ionic, modificando la home page. Per fare ciò, vai al home.html file in src / pagine / home e apporta le seguenti modifiche al file:
Casa mia Benvenuti in My Ionic App!
Questo è super fantastico.
Questa è la mia prima app Ionic di sempre.
Fatto ciò, vai al home.scss file, anche in src / pagine / home, e apporta le seguenti modifiche:
page-home content-ion background: black! important; h2 color: white; p color: white;
Qui, abbiamo modificato il colore di sfondo della home page dal bianco al nero mediante il targeting ionico contenuti. Questo è dove il nostro contenuto della pagina esiste. Inoltre, abbiamo anche preso di mira il h2 elemento di intestazione così come il p (paragrafo) elementi e cambiato il colore del testo sia per il bianco.
Completati i cambiamenti (non dimenticare di salvare), esegui entrambi servire ionico o laboratorio ionico dalla riga di comando. Questi strumenti CLI Ionic compileranno la tua app e la renderanno disponibile per i test. Userò laboratorio ionicoin questo esempio.
Una volta eseguito correttamente uno di questi comandi, il tuo server di sviluppo locale dovrebbe far ruotare la tua applicazione, e dovrebbe assomigliare a questo:
Pertanto, abbiamo modificato la home page cambiando il testo e il colore di sfondo della pagina. Come abbiamo fatto a fare questo? La nostra cartella home page è composta da tre file: home.html, home.scss, e home.ts.
Il home.ts file è un file TypeScript che consiste in un componente Angolare con il seguente componente decoratore:
@Component (selector: 'page-home', templateUrl: 'home.html')
Il home.html il file funge da modello del componente, che possiamo usare per apportare modifiche al contenuto della nostra home page. È specificato con TemplateURL parametro al decoratore del componente.
Per cambiare lo stile della home page, possiamo usare CSS o SCSS in home.scss file.
Successivamente, creeremo una pagina aggiuntiva nella nostra applicazione chiamata Informazioni. Per creare questa nuova pagina, dobbiamo eseguire il seguente comando nel nostro progetto: ionico genera informazioni sulla pagina. In Visual Studio Code, possiamo farlo aprendo il terminale integrato da Visualizza> Terminale integrato. Basta digitare il comando lì e premere accedere.
Questo genererà una nuova pagina nel tuo progetto, con i file info.html, info.ts, e info.scss.
Dopo che la pagina è stata generata correttamente, dovresti riuscire a vederla nella cartella delle pagine nei tuoi file di progetto. Per consentirci di utilizzare questa pagina appena creata all'interno della nostra applicazione, dovremo prima registrarla nel nostro app.module.ts file. Puoi trovarlo nel src / app cartella.
Innanzitutto, aggiungi un importare dichiarazione per il file componente della tua pagina di informazioni nella parte superiore di app.module.ts.
importa InfoPage da '... / pages / info / info';
È possibile aggiungere questo sotto il importare dichiarazioni per le altre pagine.
Quindi aggiungi infopagina al dichiarazioni e entryComponents array del modulo dell'app. Il tuo @NgModule la dichiarazione dovrebbe ora apparire come la seguente:
@NgModule (dichiarazioni: [MyApp, AboutPage, ContactPage, HomePage, TabsPage, InfoPage], // ... entryComponents: [MyApp, AboutPage, ContactPage, HomePage, TabsPage, InfoPage], // ...
Nella sua forma più semplice, ionica spinge e pops paginecome il suo concetto di navigazione. L'idea è che stiamo sovrapponendo le pagine l'una sull'altra: quando apriamo una nuova pagina, la inseriamo nello stack e quando torniamo alla pagina precedente, facciamo fuori la pagina corrente.
Quindi, quando stai visualizzando una pagina in un'applicazione Ionic, stai sempre visualizzando la pagina più in alto nello stack e se fai clic per visualizzare una pagina diversa, sarai spingendo questa pagina in cima alla pila di navigazione che copre la pagina precedente nella vista.
Se dovessi tornare alla pagina precedente, lo sarai popping la pagina corrente fuori dallo stack e la visualizzazione della pagina sottostante. Pensalo come un mazzo di carte, dove stai aggiungendo e rimuovendo le carte dal mazzo.
Proseguendo con il nostro esempio, con la nostra pagina creata e registrata con successo all'interno della nostra applicazione, impostiamo la navigazione verso la nostra pagina appena creata dalla home page.
Usando la pagina iniziale che abbiamo modificato in precedenza, personalizziamola ulteriormente aggiungendo un pulsante che ci consenta di navigare nella nostra pagina di informazioni. Aggiungere il seguente codice a home.html, all'interno del contenuto di ioni e sotto il testo del paragrafo:
Il codice sopra specifica un componente ionico, vale a dire un ionico-button. Successivamente aggiungeremo un gestore di clic, quindi quando questo pulsante viene premuto, navigheremo alla pagina delle informazioni.
La tua pagina iniziale dovrebbe essere simile a questa ora:
Tuttavia, se dovessimo fare clic sul nostro pulsante appena creato ora, non ci porterebbe da nessuna parte poiché non l'abbiamo ancora programmato con alcuna funzionalità. Per fare ciò, dovremo aggiungere un evento listener di clic seguito da una funzione sul nostro pulsante come segue:
Quindi, procediamo e dichiariamo la funzione che abbiamo scritto sopra, navigateToInfo (), nel nostro home.ts file. Innanzitutto, importa il NavController aiutante dal ionici angolare libreria principale. NavController ci consente di gestire la navigazione nella nostra applicazione ionica e la useremo per spingere la pagina delle informazioni sopra la home page quando si fa clic sul pulsante.
Dovremo anche importare il infopagina componente. Metti queste linee in cima alla tua home.ts file.
import NavController da 'ionico-angolare'; importa InfoPage da '... / info / info';
Successivamente, modificheremo il componente della pagina iniziale per ricevere un'istanza di NavController tramite l'integrazione delle dipendenze. Modificare il costruttore della home page nel modo seguente:
costruttore (public navCtrl: NavController)
Infine, possiamo dichiarare il navigateToInfo funzione all'interno del nostro HomePage componente.
navigateToInfo () this.navCtrl.push (InfoPage)
Tutto ciò che facciamo è inserire un riferimento al componente della pagina di informazioni su NavController.
Completato quanto sopra, navigare fino a info.html pagina e aggiungi una nuova intestazione a ionico contenuti. Forse qualcosa del genere Questo è bellissimo…
Ora, se si esegue l'applicazione e si fa clic su Vai a Informazioni pulsante sulla home page, vedrai la tua pagina di informazioni appena creata. Nota anche il pulsante Indietro, creato automaticamente per te da Ionic.
Congratulazioni! Hai creato e navigato con successo in una nuova pagina. Sentiti libero di ripetere questo processo e creare altre pagine all'interno di questo progetto demo.
Finora in questa serie, siamo riusciti a creare un nuovo progetto Ionic, creare nuove pagine, modificare i contenuti delle nostre pagine e impostare la navigazione. Abbiamo ora coperto alcuni dei concetti chiave che ci aiuteranno ulteriormente nel continuare il nostro percorso di sviluppo di applicazioni ioniche.
Mentre sei qui, dai uno sguardo ai nostri altri post sullo sviluppo di app Ionic!
Accentsconagua