Share
Cosa starai creandoIn questo tutorial, costruiremo insieme la nostra prima app Ionic e impareremo le basi dei componenti JavaScript di Ionic. Questi componenti forniscono alla tua app un facile accesso alle funzionalità, come le barre di navigazione e navigazione, lo scroll infinito e gli elenchi. Se non hai ancora impostato Ionic o hai bisogno di aggiornare l'utilizzo della CLI Ionic, puoi rivedere il primo tutorial di questa serie.
Il termine componenti è in qualche modo abusato nello sviluppo del frontend dato che molti framework hanno la loro nozione che descrive un componente. In effetti, i componenti Web come standard HTML ufficiali possono complicare ulteriormente il concetto, quindi definiamo chiaramente quale componente è presente in Ionic.
In senso generale, un componente è un'implementazione di un insieme di funzionalità che sono incapsulate da qualche forma di convenzione di codifica. In altre parole, puoi pensare a un componente come a un modo per isolare una particolare caratteristica dal resto dell'applicazione. Puoi pensare a come in HTML ci sono diversi tipi di input di moduli e ognuno di essi è un tipo di componente con caratteristiche specifiche.
In Ionic, ci sono due tipi di componenti, CSS e JavaScript. I componenti CSS sono implementati come un insieme di classi CSS che modificano un elemento per conferirgli un aspetto specifico, ad esempio una barra di intestazione.
I componenti JavaScript sono tecnicamente implementati come direttive angolari e vengono utilizzati come elementi HTML nell'applicazione. Forniscono un insieme più ricco di funzionalità. Questo di solito include la possibilità per gli utenti di interagire con esso o l'applicazione per gestire altrimenti il componente. Le schede, ad esempio, consentono di mostrare o nascondere il contenuto in base all'utente che seleziona una scheda.
In questo tutorial ci concentreremo su alcuni componenti JavaScript. Più avanti in questa serie, diamo un'occhiata più da vicino ai componenti CSS.
A volte, Ionic implementa un componente sia come componente CSS sia come componente JavaScript, come il componente Tabs. Questo significa che decidi quale usare. In genere consiglio di optare per l'implementazione di JavaScript. Nella maggior parte dei casi, il sovraccarico dell'utilizzo del componente JavaScript è trascurabile e credo che rendano il codice più facile da utilizzare.
In questo tutorial, creeremo un'applicazione da zero e continueremo a migliorare l'app nel resto di questa serie. La premessa di questa app è creare un'app informativa civica che offra agli utenti informazioni sulle loro strutture locali, come biblioteche e parchi.
In questo tutorial, iniziamo con la costruzione di un'app che visualizza un elenco di parchi a Chicago e utilizza lo scroll infinito per continuare a caricare i risultati finché sono disponibili. Espanderemo il set di funzionalità dell'app nei prossimi tutorial.
Ho creato un'API che fornisce le informazioni necessarie per l'app. L'API è basata sulle API di Google Maps. Puoi eseguire l'API tu stesso, ma è necessario ottenere una chiave API personalizzata da Google e le istruzioni possono essere trovate nel progetto API. Se ci sono problemi nell'utilizzo dell'API fornita, ad esempio se qualcuno abusa dell'API e supera i limiti di utilizzo dell'API, l'esecuzione della propria versione dovrebbe aiutare.
Puoi vedere in anteprima l'app in esecuzione su Heroku e visualizzare il progetto completato su GitHub. Tuttavia, ti incoraggio a seguire e creare l'app con me.
Per prima cosa, devi iniziare un nuovo progetto. Possiamo farlo eseguendo il seguente comando:
ionic start civinfo https://github.com/ionic-in-action/starter
Questo scarica un pacchetto iniziale che include un modello Ionic vuoto per iniziare (creato per essere utilizzato con il mio libro Ionic in Action). Inserisci la directory, cd civinfo, e corri servire ionico.
È ora possibile visualizzare un'anteprima di un'app vuota durante il caricamento su http: // localhost: 8100 (o sulla porta impostata da Ionic). Raccomando di aprire gli strumenti di sviluppo del tuo browser per confermare che vedi una schermata vuota. Sì, dovrebbe essere uno schermo bianco. Ti suggerisco inoltre di utilizzare Emulazione dispositivo di Chrome durante l'anteprima della tua app.
La navigazione è così cruciale che dovremmo iniziare da qui con la progettazione della nostra app. I componenti di navigazione principali sono ionNavBare ionNavView. La maggior parte delle app presenta una funzionalità di progettazione in cui è presente una barra di navigazione con vari titoli e pulsanti di azione, quindi il resto dell'area è dedicato al contenuto per la vista corrente.
Il ionNavBare ionNavView i componenti forniscono tale funzionalità con una certa intelligenza integrata per aiutarci. Alla fine la nostra app avrà diverse rotte, ma ne creiamo solo una in questo tutorial.
Ionic usa il UI Router sotto il cofano per gestire la navigazione e il routing. Se hai familiarità con questo, allora riconosci l'implementazione in Ionic. Ci sono molte sfumature, ma lo manteniamo semplice in questo tutorial. L'uso più comune e semplice è definire ciascuna delle varie pagine della tua app come stato, che è il modo Ionic / UI Router per definire una vista particolare.
Per iniziare, includiamo prima i due componenti di navigazione in www / index.html come vedi sotto, mettendolo dentro il corpo.
Una volta aggiunto il codice a index.html, puoi ricaricare l'app e dovrebbe apparire una barra verde nella parte superiore dell'app.
Hai definito il ionNavBar componente, che appare automaticamente nella parte superiore dello schermo. Successivamente, quando creiamo viste individuali, quelle viste saranno in grado di passare un titolo e pulsanti aggiuntivi da visualizzare. È abbastanza intelligente da sapere quanto deve essere alta la barra di navigazione per dispositivi diversi. Questo non è coerente tra le piattaforme, quindi è molto utile. La barra di navigazione ha una classe di bar-equilibrata per dargli un colore verde.
Poi c'è il ionNavView, che è il segnaposto che rende il contenuto per ciascuna delle viste. Una volta che definiamo una vista, renderà qui il markup risultante e si regolerà automaticamente per occupare lo spazio disponibile rimasto dopo aver posizionato la barra di navigazione.
I componenti di navigazione sono esempi di componenti JavaScript (noti anche come direttive angolari). Sembrano tag HTML personalizzati e, se usati insieme, sono abbastanza intelligenti da mantenere la barra del titolo in sincronia con la vista corrente e rendere il contenuto corretto in base alle scelte di navigazione dell'utente. Per vedere questo in azione, però, dobbiamo aggiungere alcuni stati. Iniziamo facendo il nostro primo stato che mostra un elenco di parchi.
Lo scopo principale dell'app è quello di visualizzare un elenco di risorse civiche. Inizialmente, questo sarà un elenco di parchi, ma lo espanderemo per includere altri tipi di risorse come le biblioteche. Vogliamo includere alcune funzionalità in questa vista:
Ora che abbiamo alcuni obiettivi per questa vista, iniziamo con l'aggiunta del nostro file JavaScript che registrerà questa visualizzazione. Crea un nuovo file places.js a www / views / luoghi / e aggiungi il seguente:
Accentsconagua
angular.module ('App') .config (function ($ stateProvider) $ stateProvider.state ('places', url: '/ places', controller: 'PlacesController as vm', templateUrl: 'views / places / places .html ');) .controller (' PlacesController ', function () );Dichiariamo un nuovo stato per il router UI usando il $ StateProvider.state () metodo. Questo è disponibile solo per essere configurato all'interno di Angular angular.config () metodo. Quando dichiari uno stato, per prima cosa passi una stringa per nominare il percorso, in questo caso posti. Quindi si passa un oggetto con varie proprietà che definiscono lo stato, ad esempio un URL, un controller e un modello. È possibile consultare la documentazione del router UI per tutte le possibili opzioni di configurazione.
Abbiamo dichiarato un nuovo stato, lo abbiamo chiamato posti, assegnato un URL di /posti, chiamato a controllore utilizzando controller come sintassi e elencato a TemplateURL caricare. Questa è una definizione di stato abbastanza comune e la si vede usata principalmente nello stesso modo con altri stati. Il controller dichiarato qui è vuoto, ma lo aggiungeremo presto.
Questo modello è una parte essenziale della vista e descrive gli aspetti visivi di quella vista. La maggior parte della logica e del comportamento della vista verrà gestita nel controller e nel modello. Il nostro stato dichiara che vogliamo caricare un file HTML per il modello, ma non ne abbiamo ancora creato uno. Risolviamolo creando un nuovo file places.html a www / views / luoghi / e aggiungendo il codice qui sotto.
Finora in questo modello, abbiamo dichiarato ionView e ionContent componenti. Il ionView componente è un wrapper che si posiziona attorno a un modello che si intende caricare nel file ionNavView componente che abbiamo dichiarato in precedenza. Il view-titolo l'attributo è utilizzato anche per passare il titolo che dovrebbe essere visualizzato sulla barra di navigazione.
Il ionContent componente è un utile wrapper di contenuto, che aiuta a garantire che lo spazio del contenuto sia ridimensionato allo spazio disponibile sullo schermo, aiuta a gestire lo scorrimento e può esporre altri comportamenti meno comunemente utilizzati. Quando questa vista è caricata, vedrai il titolo della barra di navigazione come "Parchi locali".
Ora dobbiamo assicurarci che l'app carichi lo script da eseguire aggiungendo places.js a index.html come vedi sotto Vi consiglio di aggiungere questo prima del etichetta.
Puoi visualizzare l'app, ma non vedrai comunque apparire la vista. Per vedere la vista, vai a http: // localhost: 8100 / # / places. L'URL mappato nella definizione di stato può essere utilizzato per navigare verso una rotta. Dovrebbe quindi apparire come nell'immagine seguente con il titolo impostato su "Parchi locali".
Questo non è ancora troppo eccitante, ma rappresenta la visione più semplice che probabilmente creerai la maggior parte del tempo. Ora lavoriamo sul caricamento dei dati e mostrandoli sullo schermo.
Prima di poter fare molto altro, abbiamo bisogno di caricare alcuni dati. Per fare questo, abbiamo bisogno di aggiungere un servizio angolare per aiutarci a gestire la geolocalizzazione. In un futuro tutorial, la posizione di un utente verrà rilevata dal dispositivo. Fino ad allora, lo imposteremo manualmente su Chicago, una delle mie città preferite.
Aperto www / js / app.js e aggiungere il seguente servizio alla fine del file. Dovrebbe essere collegato ai metodi esistenti da angular.module.
.factory ('Geolocation', function () return "formatted_address": "Chicago, IL, USA", "geometry": "location": "lat": 41.8781136, "lng": -87.6297982, " place_id ":" ChIJ7cv00DwsDogRAMDACa2m4K8 ";)Questo è un servizio angolare che restituisce un oggetto che corrisponde a quello restituito dall'API di Google Maps per Chicago. Ora abbiamo i dettagli per la posizione in modo che possiamo caricare i parchi lì.
Successivamente, aggiorneremo il controller per caricare l'elenco dall'API. Per semplicità, sto caricando i dati usando il $ http servizio nel controller. La migliore pratica sarebbe quella di estrapolarlo in un servizio. Aperto www / views / luoghi / places.js di nuovo e aggiorna il controller in questo modo:
.controller ('PlacesController', funzione ($ http, Geolocalizzazione) var vm = this; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location .lat + ',' + Geolocation.geometry.location.lng; vm.places = []; vm.load = funzione load () $ http.get (base) .then (function handleResponse (response) vm.places = response.data.results;);; vm.load (););Il controller ha a vm.load () metodo per eseguire la richiesta HTTP e memorizza i risultati in vm.places. Quando salvi questo, devi vedere l'attivazione della richiesta HTTP negli strumenti di sviluppo del tuo browser. Anche se hai familiarità con Angular, potresti non riconoscere questo approccio esatto per la memorizzazione dei dati su vm variabile. Consiglio di rivedere il post di John Papa sul perché questo è un approccio consigliato se hai bisogno di chiarezza.
Per visualizzare i dati, è necessario aggiornare anche il modello e scorrere l'elenco dei parchi per visualizzarli. Aperto www / views / luoghi / places.html e aggiornarlo come mostrato di seguito.
![]()
nome del luogo
Place.formatted_address
Nel modello, stiamo usando il ionList e ionItem componenti. Il ionList componente è uno dei componenti più utili perché le liste sono una scelta di design molto comune nei dispositivi mobili a causa degli schermi più piccoli e dell'uso tipico in orientamento verticale. Molto simile a una lista che usa ul e Li, ionList avvolge un numero qualsiasi di ionItem elementi.
Gli elenchi possono adottare un numero di aspetti diversi e in questo esempio la voce di elenco visualizza un'immagine a sinistra dichiarando il item-avatar classe sul ionItem. Lo stesso approccio potrebbe essere utilizzato in un'app di messaggistica in cui si dispone di un elenco di chat con un avatar di ogni persona.
Dentro il ionItem, tu mostri il nome e l'indirizzo. Lo stile predefinito è quello di troncare automaticamente (usando CSS) qualsiasi testo che trabocca per mantenere gli oggetti alla stessa altezza.
Abbiamo caricato un elenco di parchi e li abbiamo visualizzati come elenco usando ionList e ionItem. Possiamo fare un ulteriore passo avanti e aggiungere lo scrolling infinito per caricare ulteriori risultati mentre l'utente scorre vicino alla fine dell'elenco (se disponibili).
Per fare in modo che la lista carichi automaticamente altri elementi in base all'utente che scorre verso il basso, possiamo fare uso di ionInfiniteScroll componente. Questo componente viene collocato alla fine di un elenco, monitorato quando l'utente ha eseguito lo scorrimento fino alla fine e quindi chiama un metodo che può caricare elementi aggiuntivi. Ha anche un dispositivo di caricamento incorporato per indicare che sono in caricamento più oggetti. Lo spinner è nascosto quando la risposta si risolve.
La nostra API deve anche supportare una qualche forma di paginazione affinché funzioni. In questo caso, l'API di Google Maps fornisce un token che deve essere passato per caricare il successivo set di risultati. Dobbiamo aggiornare il controller per gestire questa logica, quindi iniziamo con l'aggiornamento www / views / luoghi / places.js come mostrato di seguito.
.controller ('PlacesController', function ($ http, $ scope, Geolocation) var vm = this; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocalizzazione. geometry.location.lat + ',' + Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = []; 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'););;);Abbiamo aggiunto una nuova proprietà, vm.canLoad, che è un valore booleano che indica se ci sono altri elementi da caricare. Questo è vero per impostazione predefinita. Fino a quando non viene restituita una richiesta, non sappiamo se ci sono ulteriori elementi disponibili.
Il vm.load () il metodo viene aggiornato per aggiungere il token, se disponibile. Il gestore della risposta ora concatena i risultati sull'array. Ciò significa che la seconda pagina dei risultati viene aggiunta dopo la prima pagina. L'API di Google Maps restituirà a next_page_token ogni volta ci sono più risultati che possono essere caricati. Se quella proprietà è mancante, possiamo supporre che non ci siano più oggetti da caricare e vm.canLoad è impostato per falso. Il componente di scorrimento infinito utilizza questo valore per determinare quando interrompere il caricamento di più elementi.
Il cambiamento finale è l'aggiunta di $ Portata. $ Trasmissione ( 'scroll.infiniteScrollComplete'). Il componente di scorrimento infinito non è a conoscenza di quando la richiesta HTTP è stata completata o esattamente quando è salvata per disabilitare il simbolo di caricamento. Pertanto, il componente ascolta gli eventi per aggiornarsi. In questo caso, il scroll.infiniteScrollComplete evento dice al componente di fermare lo spinner e continua a guardare per l'utente scorrere verso il basso.
Il pezzo finale è abilitare questo nel modello. Aperto www / views / luoghi / places.html e aggiungi la linea tra la fine del ionList e ionContent componenti.
Il componente di scorrimento infinito è ora abilitato nel tuo modello. Inizia a controllare quando il componente è visibile, che viene attivato anche in seguito al caricamento perché non sono visibili posizioni e il componente di scorrimento infinito è visibile. Chiama il metodo dichiarato in on-infinite una volta quando diventa visibile (eccolo qui vm.load ()) e attende fino a quando l'evento di scroll completo è stato attivato.
Il ngIf è usato per disabilitare lo scroll infinito una volta che l'API ha restituito tutti i possibili risultati. In tal caso, scorrendo verso il basso non si attiva più il carico di più risorse.
Quando usi lo scroll infinito, è importante usare un ngIf per disabilitarlo. Può essere facile implementare il componente in modo tale che il componente tenti di caricare e caricare e non si fermi mai.
Questo completa la vista dei luoghi. Guardando indietro, c'è un bel po 'di funzionalità abilitata da 12 linee di codice HTML nel modello e circa 20 righe di JavaScript nel controller.
Abbiamo dato un'occhiata a un certo numero di componenti, che userete spesso nelle vostre app Ionic.
ionNavView e ionNavBar per supportare la navigazione coordinata con diverse viste.ionList e ionItem i componenti facilitano la creazione di elenchi di dispositivi mobili.ionInfiniteScroll il componente attiva automaticamente una chiamata per caricare elementi aggiuntivi e aggiungerli all'elenco.Il prossimo tutorial fornirà alcuni dei servizi utili forniti da Ionic, come gli indicatori di caricamento e i popover.
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.
