Share
Cosa starai creandoNella prima e seconda parte di questa serie su Ionic, abbiamo impostato lo sviluppo locale e creato un paio di visualizzazioni per caricare un elenco di parchi utilizzando alcuni componenti Ionic, come la navigazione di base e i componenti della lista. In questo tutorial, esamineremo in che modo Ionic offre una serie di servizi che consentono di gestire l'app e l'interfaccia in modo programmatico.
In precedenza, abbiamo dimostrato come Ionic fornisce funzionalità interattive tramite componenti, che vengono utilizzati come elementi HTML (implementati come direttive Angular). Tuttavia, ci sono alcuni elementi di interfaccia che non hanno senso come componenti istanziati con HTML, come un caricatore o una sovrapposizione di fogli di azione.
Iniziamo dando un'occhiata al ruolo dei servizi nella tua app. Ho identificato tre tipi principali di servizi in Ionic:
I servizi componenti potenziano l'uso dei componenti, ma invece di usare l'HTML per dichiararli (come abbiamo visto con ionNavBar) sono gestiti usando JavaScript. In altre parole, sfrutterai questi componenti aggiungendo il codice ai tuoi controller. Useremo due di questi nell'esempio qui sotto.
Può essere utile pensare a questi servizi come componenti che hanno un ciclo di vita. In genere, si desidera che vengano caricati in un punto specifico e, al termine, vengono rimossi. Per esempio, $ ionicModal ti permette di creare un modale. I modali hanno un ciclo di vita, vengono aperti e chiusi per motivi specifici. Potresti avere una modal che chiede agli utenti di accedere o possono chiudere il modello per saltarlo, completando così il ciclo di vita.
Alcuni componenti dispongono di un servizio di delega associato che può modificare o gestire il componente. Si consiglia di manipolare un componente a livello di codice dopo che è stato creato e questi servizi sono progettati per rendere ciò possibile. Sono così denominati poiché delegano il comportamento al componente.
Il ionNavBar componente ha un servizio delegato chiamato $ ionicNavBarDelegate. Questo servizio ha diversi metodi, ma un esempio è il titolo() metodo, che consente di aggiornare il titolo della barra di navigazione. L'ambito delle funzionalità disponibili per ciascun servizio delegato varia, ma dovrebbero essere facilmente individuabili nella documentazione con il nome.
L'ultima categoria sono servizi che forniscono una sorta di funzionalità di assistenza o forniscono informazioni. Ce ne sono solo alcuni e non si adattano perfettamente alle altre due categorie. Alcuni esempi sono:
Accentsconagua
$ ionicPlatform: ti aiuta a interagire con l'hardware del dispositivo$ ionicGesture: consente di gestire gli eventi gestuali$ ionicPosition: ti dice la posizione degli elementi sullo schermoQuesti servizi di assistenza tendono ad aiutarti a sviluppare la logica o gestire l'interazione. Non generano o modificano i componenti da soli.
Vedremo anche alcune altre cose in questo tutorial:
In questo tutorial, estenderemo l'app che abbiamo iniziato nel tutorial precedente. Solo un promemoria, l'app è progettata per fornire agli utenti informazioni sulle loro strutture pubbliche locali, come biblioteche e parchi. L'app visualizza già un elenco di parchi a Chicago e ora aggiungeremo la possibilità di visualizzare gli indicatori di caricamento, visualizzare le schermate dei singoli dettagli del parco, aprire un menu azioni e implementare alcune funzionalità di condivisione di base.
È possibile visualizzare il progetto completato su GitHub. L'ultimo esempio è disponibile anche per l'anteprima.
Puoi scaricare i file o controllarli usando Git. Una volta che hai i file sul tuo computer, devi eseguire installazione di npm per impostare il progetto. Se controlli il codice usando Git, puoi programmare se resetti il repository in modo che corrisponda a dove finisce l'ultima parte eseguendo git checkout -b start. Una volta che hai i file, avvia il tuo server Ionic eseguendo servire ionico.
Attualmente, l'app carica i dati e vi è un piccolo indicatore circolare dal componente di scorrimento infinito che viene visualizzato finché non viene caricato. Tuttavia, in realtà vogliamo sovrapporre l'intera app, quindi è molto chiaro che l'app si sta caricando.
Il $ ionicLoading il servizio è molto utile per sovrapporre e impedire all'utente di interagire con l'app fino al caricamento dei dati. È configurabile Ad esempio, è possibile dichiarare se viene visualizzata un'icona di caricamento o del testo, se si desidera o meno lo sfondo o se deve nascondersi automaticamente dopo un certo periodo di tempo. Puoi vedere il caricatore in azione nello screenshot qui sotto.
Aperto www / views / places.js apportare alcune modifiche per utilizzare il caricatore. Innanzitutto, dobbiamo aggiungere il servizio al nostro controller aggiungendo $ ionicLoading ai parametri della funzione. Il servizio è piuttosto semplice, ha solo due metodi, mostrare() e nascondere(). Possiamo mostrare e nascondere il caricatore chiamando i metodi come vedete qui in questo frammento.
.controller ('PlacesController', funzione ($ http, $ scope, $ ionicLoading, Geolocation) var vm = this; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = []; $ ionicLoading.show (); vm.load = function load () var url = base; if (token) url + = '& token =' + token; $ http.get (url) .then (function handleResponse (response) vm.places = vm.places. concat (response.data.results); token = response.data.next_page_token; if (! response.data.next_page_token) vm.canLoad = false; $ scope. $ broadcast ('scroll.infiniteScrollComplete'); $ ionicLoading. hide (););;);Il $ IonicLoading.show () il metodo viene chiamato non appena viene caricato il controller, il che significa che si attiva immediatamente. Ora dobbiamo dire al caricatore di nascondersi dopo il caricamento dei dati, come si vede subito dopo $ trasmissione.
Potresti notare che il $ IonicLoading.hide () il metodo viene chiamato ogni volta che i dati vengono caricati. Questo non è un problema. Poiché il caricatore è già nascosto, questa chiamata non ha alcun effetto.
Abbiamo implementato un servizio ionico. Abbastanza semplice. Destra? Alcuni sono un po 'più complessi e lavoreremo su un altro esempio usando il foglio di azione. Prima di arrivare a questo, però, vogliamo espandere la nostra app per avere due visualizzazioni per entrambe le note e visualizzare una nota singolarmente.
Il nostro prossimo passo è creare una nuova vista che visualizzerà più dettagli su un particolare parco. Le informazioni possono variare da un parco all'altro, ma ci concentreremo su come ottenere un'immagine, un sito Web, un telefono e informazioni sull'indirizzo. I risultati dell'aggiunta di questa vista sono mostrati qui.
Per creare una nuova vista, crea un file su www / views / luogo / place.js e includi il contenuto che vedi qui sotto. Questa è la definizione del controller e dello stato per il posto vista.
angular.module ('App') .config (function ($ stateProvider) $ stateProvider.state ('place', url: '/ places /: place_id', controller: 'PlaceController as vm', templateUrl: 'views / place / place.html ', risoluzione: Place: function ($ http, $ stateParams) var url =' https://civinfo-apis.herokuapp.com/civic/place?place_id= '+ $ stateParams.place_id; return $ http.get (url);;) .controller ('PlaceController', function ($ scope, Place) var vm = this; vm.place = Place.data.result;);Se dai un'occhiata al config () metodo, vedi che stiamo dichiarando un nuovo stato. Questo è l'ui-router in azione, quindi è necessario consultare la documentazione dell'interfaccia del router per tutti i dettagli sulla dichiarazione degli stati.
La definizione dell'oggetto mostra che stiamo usando un URL di / Luoghi /: place_id. Quando vedi una parte dell'URL con i due punti in primo piano, ad esempio : place_id, contrassegna questa parte del percorso come parametro di stato. Lo stato è in grado di tirare il valore e fornirlo usando il $ stateParams oggetto. Per esempio, / luoghi / 12345 risulterebbe in $ stateParams.place_id = '12345'.
Hai già visto le altre parti della definizione, ad eccezione di risolvere proprietà. Questa è una funzione che consente di richiedere varie funzioni da chiamare prima dello stato che si sta creando. Accetta un oggetto di valori di chiavi e funzioni, quindi eccoci qui Posto come la chiave e il risultato della funzione saranno assegnati ad esso.
Nella funzione, può accettare i parametri da iniettare, in modo simile a ciò che si può fare con un controller. Qui, il $ http e $ stateParams i servizi sono iniettati. La funzione utilizza quindi il valore dal place_id passato tramite l'URL e costruisce e restituisce una richiesta HTTP. Questo è essenzialmente ciò che viene fatto nella vista dei luoghi, ad eccezione del controller.
La funzione di risoluzione è abbastanza intelligente da determinare che se si restituisce una promessa, aspetterà che la promessa si risolva prima di creare lo stato. In altre parole, $ Http.get () restituisce una promessa per caricare i dati e l'interfaccia del router rimane in attesa finché i dati non sono disponibili prima di creare lo stato e passare il Posto al controller. La funzione di risoluzione è molto utile per il precaricamento dei dati nelle tue app e questo è un esempio abbastanza semplice di come sfruttarlo.
Ora che abbiamo definito lo stato, il controllore è dichiarato e assegna i dati risultanti Posto (questo è ciò che è stato risolto nello stato) a vm.place. Dobbiamo anche creare il nostro modello per questo stato, quindi crea un nuovo file in www / views / luogo / place.html e aggiungere il seguente contenuto ad esso.
![]()
Questo modello inizia usando ionView per avvolgere il contenuto, in modo che il sistema di navigazione Ionic possa tenerne traccia correttamente. Assegna anche un titolo basato sul nome del luogo. Il ionContent wrapper contiene il contenuto principale e noterai che il modello usa le classi CSS invece degli elementi per creare un componente della carta.
Nella parte precedente, abbiamo parlato di come alcuni dei componenti sono solo classi CSS. La carta è un esempio di questo. Concettualmente, è come una lista. I contenuti interni si impilano verticalmente come una lista, ma lo stile appare più come una carta. Questo sfrutta lo stile delle carte, che include funzionalità come supporto per le immagini, icone e altri layout accurati presenti nella documentazione.
Ci sono alcuni ngIf direttive utilizzate poiché non vi è alcuna garanzia che i dati restituiti abbiano un numero di telefono o un sito web. Il ngIf direttiva assicurarsi che non vengano visualizzati valori vuoti. Usa anche ngHref o ngSrc per costruire correttamente i collegamenti.
Noterai anche l'uso di tel: // protocollo, che, se utilizzato su un telefono, dovrebbe richiedere all'utente di chiamare il numero quando lo selezionano. È una funzionalità a portata di mano che è facile da usare e si integra perfettamente su un dispositivo fisico. Alcuni programmi sul tuo computer, come Skype, potrebbero anche provare a gestire una chiamata telefonica, in base alle tue impostazioni.
Questo dovrebbe darci una visione funzionante, ma come possiamo navigare verso di esso? Dovremo apportare un paio di piccole modifiche per far funzionare la navigazione dalla vista dei luoghi.
L'ui-router fornisce a ui-sref direttiva che viene utilizzata per collegare gli elementi a un altro stato. In questo caso, vogliamo che ciascuno degli elementi nell'elenco della vista dei luoghi sia collegato alla vista luogo corrispondente.
Aperto www / views / luoghi / places.html e aggiungi la direttiva per collegarti a ogni luogo. Aggiorna il ionItem con il nuovo attributo qui.
Il ui-sref direttiva ha un formato in cui è possibile collegare a un altro stato dal suo nome, non da qualche URL come fai con href. Questo è utile poiché gli URL potrebbero cambiare. Può anche accettare parametri da utilizzare per creare l'URL e, nel nostro caso, vogliamo passare il place.place_id proprietà. Il ui-sref prende le proprietà come un oggetto, quindi nome dello stato (param: value) è la sintassi.
Ora visualizza l'app in anteprima e seleziona un parco, passerà al nuovo posto visualizza e puoi guardare la barra degli indirizzi per vedere l'URL aggiunge a place_id valore. Tuttavia, ora abbiamo un problema. Come torniamo alla lista?
Noi usiamo il ionNavBackButton funzionalità per darci un pulsante di ritorno automatico. Aperto www / index.html e aggiungi il seguente snippet all'interno del ionNavBar. Questo aggiunge un pulsante indietro che verrà visualizzato solo quando c'è un posto dove tornare.
Indietro
La navigazione di Ionic è abbastanza intelligente da tenere traccia della cronologia mentre usi l'app. Se c'è una vista precedente a cui tornare, mostrerà il pulsante Indietro. Altrimenti, sarà semplicemente nascosto.
Vogliamo anche dichiarare che la vista dei luoghi non dovrebbe mai mostrare il pulsante Indietro, cosa che possiamo fare aggiungendo il hideBackButton direttiva in www / views / luoghi / places.html.
Durante lo sviluppo e l'anteprima nel browser, a volte la cronologia viene ripristinata. Ad esempio, quando ci si trova nella vista dei luoghi e si salva una modifica nell'editor, il browser si ricarica automaticamente e reimposta la cronologia. In questo caso il pulsante Indietro non appare come previsto. Puoi sistemarlo tornando alla lista e aggiornando per impostare la cronologia.
Abbiamo compiuto buoni progressi, ma al momento, quando tocchi un elemento nell'elenco, attende di passare alla nuova visualizzazione fino a quando la chiamata API non ritorna con i dati. Potrebbe sembrare veloce, ma a volte può essere lento se l'API è lento. Potrebbe far sì che qualcuno pensi che l'app sia bloccata, lenta o che non abbia registrato il loro tocco poiché non ha immediatamente iniziato a reagire al tocco. Ci occupiamo di questo con alcuni degli eventi del ciclo di vita che ci aiutano a configurare un caricatore da visualizzare durante questo periodo.
Per fornire un'esperienza utente migliore, useremo il $ ionicLoading servizio per sovrapporre l'app mentre i dati vengono caricati per la vista del luogo. Per sapere quando mostrare e nascondere il caricatore, utilizziamo gli eventi del ciclo di vita.
Questi eventi vengono attivati in base agli eventi di navigazione, ad esempio prima / dopo aver inserito una vista o prima / dopo aver lasciato una vista. Puoi fare tutto ciò che potrebbe essere richiesto in questi punti nel tempo, come la reimpostazione di alcuni dati o forse utilizzarla per inviare informazioni sull'utilizzo.
Per dimostrarlo, aggiungiamo un listener di eventi alla vista dei luoghi che gestisce l'attivazione del caricatore quando inizi a navigare nella vista dei luoghi. Aperto www / views / luoghi / places.js e aggiungere quanto segue al controller. Devi anche assicurarti che $ portata è dichiarato nei parametri della funzione controller in modo che sia disponibile.
$ scope. $ on ('$ ionicView.beforeLeave', function () $ ionicLoading.show (););Questo è un listener di eventi dell'oscilloscopio che sta ascoltando il $ ionicView.beforeLeave evento (vedi eventi di ambito angolare). Ionic trasmette questo evento al controller e chiama la funzione anonima dichiarata qui. Questa funzione chiama semplicemente il $ IonicLoading.show () metodo per accendere il caricatore.
Questo fa sì che il caricatore appaia non appena l'utente tocca un oggetto. Ora aggiungiamo uno snippet simile alla vista luogo che gestisce il nascondiglio del caricatore quando la vista ha finito di caricarsi. Aperto www / views / luogo / place.js e aggiungere quanto segue al controller. Devi aggiungere entrambi $ ionicLoading e $ portata ai parametri della funzione del controller poiché non sono attualmente iniettati.
$ scope. $ on ('$ ionicView.afterEnter', function () $ ionicLoading.hide (););Questo ascolta un evento di ambito diverso che si attiva quando la vista è finita e chiama la funzione per nascondere il caricatore. Il caricatore viene visualizzato nel tempo che intercorre tra l'istante in cui l'utente tocca un punto da visualizzare finché la vista non è completamente caricata. Puoi provare altri eventi e vedere quando si attivano.
L'ultima cosa che facciamo in questo tutorial è impostare un pulsante di condivisione delle azioni che ti consente di postare su Twitter, Facebook o e-mail e condividere le informazioni sul parco.
I fogli di azione sono piuttosto utili per fornire un elenco di opzioni aggiuntive. L'intenzione è solitamente per le situazioni in cui si desidera presentare un elenco di azioni raggruppate e, nel nostro esempio, si tratta di un elenco di modi per condividere le informazioni sul parco. Il foglio delle azioni che costruiremo sarà simile a questo.
Il servizio foglio di azione è un po 'più complesso del servizio di caricamento, perché gestisce la configurazione e gli input dell'utente. Aperto www / views / luogo / place.js e aggiungi questo nuovo metodo al tuo controller. Devi anche assicurarti che $ ionicActionSheet è iniettato nel tuo controller.
vm.openSheet = function () var sheet = $ ionicActionSheet.show (titleText: 'Condividi questo luogo', pulsanti: [testo: 'Condividi via Twitter', testo: 'Condividi via Facebook', testo : 'Condividi via email'], cancelText: 'Annulla', pulsanteClicked: function (index) if (index === 0) window.open ('https://twitter.com/intent/tweet?text= '+ encodeURIComponent (' Ho trovato questo posto fantastico! '+ vm.place.url)); else if (index === 1) window.open (' https://www.facebook.com/sharer/sharer .php? u = '+ vm.place.url); else if (index === 2) window.open (' mailto:? subject = '+ encodeURIComponent (' Ho trovato questo posto fantastico! ') +' & body = '+ vm.place.url); foglio ();); ;Il openSheet () il metodo è responsabile della creazione del foglio di azione. Lo fa chiamando $ IonicActionSheet.show (), che restituisce una funzione che è memorizzata foglio. Ciò ti consente di chiudere il foglio quando hai finito con il chiamarlo foglio(). Il mostrare() il metodo accetta un oggetto con un numero di proprietà che analizzeremo. Ci sono diversi esempi di servizi ionici che seguono questo schema, come modal e popover, quindi puoi sempre gestirli chiudendoli.
Il foglio gestisce il titolo usando il TitleText proprietà e viene in genere utilizzato per informare l'utente su come utilizzare i pulsanti. Il cancelText proprietà accetta una stringa che viene utilizzata per abilitare un pulsante Annulla. Se non lo dichiari, non verrà selezionato alcun pulsante Annulla. Puoi anche annullare toccando sullo sfondo al di fuori dei pulsanti.
Per dichiarare i pulsanti usi il pulsanti proprietà, che è una matrice di oggetti che hanno a testo proprietà. Vengono visualizzati nell'ordine in cui sono dichiarati, quindi ordinali di conseguenza.
Il ButtonClicked la proprietà accetta una funzione e passa l'indice del pulsante selezionato (come dichiarato in pulsanti). Pertanto, è possibile capire cosa fare in base a quale indice viene passato. In questa funzione, l'indice viene controllato e apre Facebook, Twitter o utilizza mailto: per attivare il client di posta elettronica.
Può aprire questi collegamenti nelle app di Facebook, Twitter o e-mail, a seconda delle impostazioni dell'utente e forse del dispositivo, ma almeno aprirà i collegamenti all'esterno della tua app (in un browser esterno). L'ultimo pezzo è chiamare il foglio() metodo, che chiude il foglio di azione.
Il foglio di azione è ora pronto per l'azione, ma dobbiamo ancora aggiungere un pulsante per attivare il foglio. Per fare ciò, aggiungiamo un pulsante della barra di navigazione alla vista luogo che chiama vm.openSheet (). Aperto www / views / luogo / place.html e aggiungi il ionNavButtons frammento tra il ionView e ionContent.
Ecco un'altra utile funzione di navigazione ionica che consente di aggiungere un pulsante della barra di navigazione a una vista particolare utilizzando ionNavButtons. Tutti i pulsanti all'interno vengono aggiunti alla barra di navigazione e puoi configurare da quale lato appaiono.
A questo punto, tutto funziona. Gli utenti possono aprire il foglio di azione per condividere il parco con i propri amici.
In questo tutorial abbiamo trattato i servizi di Ionic e il loro utilizzo. Lungo la strada, abbiamo scoperto una serie di altre caratteristiche ioniche:
$ ionicLoading il servizio è utile per mostrare e nascondere un indicatore di caricamento mentre l'app carica i dati o deve altrimenti bloccare l'interfaccia utente.$ ionicActionSheet Il servizio presenta all'utente un elenco di pulsanti che si sovrappongono all'app per fornire un facile accesso ad azioni importanti.ionNavBackButton per mostrare automaticamente un pulsante indietro quando è possibile tornare indietro. ionNavButtons consente di aggiungere pulsanti della barra di navigazione a visualizzazioni specifiche.Nella prossima puntata, scaveremo ancora di più in alcune delle funzionalità di navigazione di Ionic.
Se sei già a tuo agio con il framework Ionic, allora potresti prendere in considerazione l'idea di inserire il concorso Most Wanted di Envato per i template ionici. Come? Crea un modello ionico unico e invialo al mercato Envato entro il 27 aprile 2016.
I cinque migliori modelli ricevono $ 1000. Interessato? Maggiori informazioni sul sito Web del concorso per dettagli sui requisiti e le linee guida del concorso.
