Hva du skal skape

Vi har allerede dekket ganske mye i denne serien allerede, inkludert navigering. Ionisk gir imidlertid noen komponenter som gir flere funksjoner for å bygge mer funksjonell navigering. I denne opplæringen legger vi til side-menyen og fanekomponentene i appen, og vi ser også på noen ekstra tjenester for å gjøre vår apps navigasjon smartere.

Opplæringsprosjektfiler

Opplæringsprosjektfilene er tilgjengelige på GitHub. Den generelle premissen til appen er at den viser litt informasjon om lokale fasiliteter. I denne opplæringen legger vi til muligheten til å vise biblioteker, museer, parker og sykehus. Foreløpig viser den bare steder i Chicago, noe som vi fikser i neste opplæring.

Du kan laste ned det gjennomførte prosjektet for denne opplæringen fra GitHub på. Hvis du kloner prosjektet, kan du også kode sammen ved å bruke Git og løping git checkout -b start. Det endelige eksemplet er også tilgjengelig for forhåndsvisning.

Vær oppmerksom på at jeg har fjernet løsningen fra stedet visningen vi hadde i tredje del av denne serien. Jeg ønsker ikke å dekke det i dybden, men kontrolleren laster dataene nå og gjør vår navigering enklere.

1. Legge til en side-meny

Et av de vanligste navigasjonsmønstrene i mobilapper er en sidemeny. Dette er en skuff som glir ut fra siden og viser navigasjonslenkene og kanskje annet innhold, for eksempel den nåværende påloggingsstatusen. Ved design er de avskjermet og åpnes av en slags knapp, ofte hamburgerikonet, selv om folk er uenige om bruken av det ikonet.

Sidemenyene kan ofte åpnes ved å sveipe fra siden for å trekke den åpen eller sveipe tilbake for å presse den stengt. Dette kan være nyttig, men det kan noen ganger komme i veien for andre bevegelser, og du bør holde øye med motstridende atferd. Du bør vurdere den beste bruken av swiping med hele visjonen og opplevelsen av appen din i tankene, og hvis det er en bekymring, kan du deaktivere den.

Ionic gir et par komponenter som gjør det trivielt å sette opp en sidemeny. Du kan opprette opptil to sidemenyer, en til høyre og en til venstre. En sidemeny består av flere komponenter, ionSideMenus, ionSideMenu, og ionSideMenuContent.

For å se dette i aksjon, la oss oppdatere www / index.html og sett opp en sidemeny. Du erstatter det eksisterende innholdet med koden under, som legger til sidemenyelementene rundt vår eksisterende kode.

    
Civinfo
    steder innstillinger           Tilbake      

For å aktivere en sidemeny starter vi ved å pakke inn appens innhold i ionSideMenus. Det gjør det mulig for ionisk å koordinere sidemenyen og innholdsområdene. Vi har da en ionSideMenu med en side = "left" attributt til å angi hvilken side den opptar.

I sidemenyen kan vi legge inn alt vi ønsker. I dette tilfellet, og sannsynligvis det vanligste scenariet, er innholdet en ionHeaderBar komponent og an ionList komponent for å gjengi app tittelen og en liste over koblinger henholdsvis. Vi har ikke definert innstillingsvisningen ennå, så den koblingen mislykkes for øyeblikket. Vær også oppmerksom på at ionItem komponenter har a meny-close Egenskap. Dette lukker automatisk sidemenyen når en bruker klikker lenken, ellers er den åpen.

De ionSideMenuContent komponent brukes til å inneholde primærinnholdsområdet. Dette innholdsområdet tar opp hele skjermen, men denne komponenten hjelper bare side-menykomponenten til å gjøre det riktig. Vi har også brukt drag-innhold = "false" Tilordne å deaktivere dragbevegelser fordi de vil forstyrre rulleliste og faner.

Vi har også lagt til en ny knapp i navigasjonslinjen ved hjelp av ionNavButtons. Dette er sidemenyikonet som vises øverst til høyre som tre stablede linjer. Denne knappen har meny veksle = "left" Attributt, som utløser venstre side meny for å veksle når valgt.

Nå som vår sidemeny er på plass, la oss jobbe med å sette opp neste store navigasjonskomponent ved å legge til faner for innstillingsvisningen.

2. Faner med individuell navigasjonshistorikk

Faner er et annet vanlig navigasjonsmønster for å navigere en app. Faner er enkle å forstå, fordi vi ser dem i så mange typer grensesnitt, ikke bare mobilapper.

Faner kan være statlige eller statsløse. En fane som viser innhold som ikke beholder et minne om endringer, er statsløst mens en fane som opprettholder en tilstand basert på brukerinteraksjon, er statlig (for eksempel vedvarer et søkeresultat). Vi ser på hvordan man bygger stateful-faner med ionisk som de er mer komplekse og kraftigere.

Sette opp faner er ganske enkelt med ionTabs og ionTab komponenter. Mye som sidemenyene, legger du så mange fanekomponenter inn som du vil. Det er ingen vanskelig grense, men jeg finner fem er et sunt maksimum. På mindre enheter gjør det for mange ikoner vanskelig å velge en fane.

Vi skal sette opp fanene ved å lage et par nye filer. Først, la oss sette opp malen ved å opprette en ny fil på www / synspunkter / settings / settings.html. Legg til følgende kode i den nye filen.

De ionTabs komponent brukes til å pakke det indre ionTab komponenter. Det er flere klasser som kan definere hvordan fanene vises, for eksempel å sette faner øverst øverst eller nederst, ved hjelp av ikoner med eller uten titler og mer. Her har vi besluttet å bruke faner som har en tittel med ikonet øverst med den stabile fargemodusen.

De ionTab komponenten har en rekke attributter som kan brukes til å definere sin oppførsel. Den støtter mange funksjoner, for eksempel å vise et lite varselmerke, kobling av faner til stater, ikonadferd og mer. For våre faner har hver a tittel, et ikon klasse for når fanen er aktiv (icon-on) eller inaktiv (icon-off), og koblinger til en stat ved hjelp av ui-sref.

Innenfor hver kategori er en annen ionNavView. Dette kan virke utelukkende siden vi allerede har en ionNavView satt opp i index.html. Det vi gjør er å erklære ytterligere steder at en stat kan gjengis, som kan betraktes som barnevisninger.

Hver fane kan ha sin egen navigasjonshistorikk, fordi hver ionNavView er uavhengig av de andre. Hver fane har også et unikt navn som kommer til nytte, slik at vi kan definere bestemte stater som skal vises i den navngitte ionNavView.

Du har kanskje lagt merke til at det er nei ionView element på denne siden, og det er viktig å merke seg når du bruker stateful-faner. Det er ikke nødvendig når du bruker ionTabs På denne måten vil du bare trenge det hvis du bruker stateless-kategoriene, CSS-komponentversjonen.

vi må nå sette opp noen flere stater for å gjøre eksemplet funksjonelt. Opprett en annen fil på www / visninger / innstillinger / settings.js og legg til følgende kode for den.

Angular.module ('App') .config (funksjon ($ stateProvider, $ urlRouterProvider) $ stateProvider.state ('settings', url: '/ settings', abstrakt: true, templateUrl: 'visninger / innstillinger / innstillinger. HTML () lisens ', url:' / lisens ', visninger: om: templateUrl:' views / settings / tab.license.html ') .state (' settings.preferences ', url:' / preferences ' , visninger: preferanser: controller: 'PreferencesController', controllerAs: 'vm', templateUrl: 'views / settings / tab.preferences.html'); $ urlRouterProvider.when ('/ settings', '/ settings / preferanser ');) .controller (' PreferencesController ', funksjon (Typer) var vm = this; vm.types = Typer;);

Du kan se at vi setter opp flere nye stater, men disse virker annerledes enn andre stater vi har definert så langt. Den første staten er en abstrakt tilstand, som i hovedsak er en stat som ikke kan lastes direkte på egen hånd og har barn. Dette er fornuftig for oss med kategorien Grensesnitt fordi innstillinger tilstand laster komponentmalen på fanene, men brukerne er aldri bare på fanekomponenten. De ser alltid på den aktive kategorien, som inneholder en annen stat. Så ved hjelp av abstrakt gir vi denne muligheten til å koble disse opp riktig.

De andre tre statene er definert som innstillinger. [navn]. Dette tillater oss å definere et foreldre-barn forhold mellom disse statene, som i hovedsak gjenspeiler foreldre-barn forholdet mellom ionTabs og ionTab komponenter. Disse statene bruker visningsegenskapen, som er et objekt med en eiendom som er oppkalt etter visningen som skal brukes.

Navnet du oppgir i malen din med ionNavView bør samsvare med eiendomsnavnet. Verdien av den egenskapen er da den samme tilstandsdefinisjonen, uten url Det ble deklarert på vanlig måte. De url følger også foreldre-barn forholdet ved å kombinere de to. Så alle disse barns tilstandene gjengis som / innstillinger / preferences.

Du må legge til settings.js til index.html bruker en annen skriptetikett. Når du har gjort det, vil du se noen feil fordi vi refererer til en rekke filer som vi ikke har opprettet ennå. La oss fullføre oppskrifter med våre faner.

Vi må lage tre. De to første er statisk innhold, så jeg kommer ikke til å gå over dem i detalj. Lag en fil på www / synspunkter / settings / tab.about.html og legg til følgende innhold til det.

  
  
Prosjekt på GitHub
 
Klikk for å se prosjektet
  
 
Tillatelse
 
Se full lisens
 
 
  

Dette inneholder en mal som viser litt informasjon. Det kobler til GitHub-prosjektet og lisensen. Slik ser det ut.

Opprett en annen fil på www / synspunkter / settings / tab.license.html og legg til følgende innhold til det.

  
 
 MIT-lisensen (MIT) 
 
 
Opphavsrett (c) 2016 Jeremy Wilken
 
Tillatelse er herved gitt gratis til enhver person som skaffer en kopi av denne programvaren og tilhørende dokumentasjonsfiler ("Programvaren"), for å håndtere Programvaren uten begrensning, inkludert, uten begrensning, rettighetene til bruk, kopiering, modifisering, sammenslåing , publisere, distribuere, underlicensiere og / eller selge kopier av Programvaren, og å tillate personer til hvem Programvaren er innrettet til å gjøre det, underlagt følgende betingelser:
 
Ovennevnte opphavsrettserklæring og denne tillatelseserklæringen skal inngå i alle kopier eller vesentlige deler av Programvaren.
 
PROGRAMVAREN LEVERES "SOM DEN ER", UTEN GARANTI AV NOEN SLAG, UTTRYKKELIG ELLER UNDERFORSTÅTET, INKLUDERT MEN IKKE BEGRENSET TIL GARANTIER OM SALGBARHET, EGNETHET TIL ET BESTEMT FORMÅL OG IKKEBEGRENSNING. INGEN ANSVARLIGHET SKAL AUTORENTER ELLER HOVEDRETTIGHETER HOLDES ANSVARLIG FOR NOEN KLAGE, SKADER ELLER ANNET ANSVAR, UANSETT I EN KONTRAKTSAKT, TORR ELLER ANNET, UTFØRING AV, UTEN ELLER I FORBINDELSE MED PROGRAMVAREN ELLER ANVENDELSEN ELLER ANDRE FORHANDLINGER I SOFTWARE.
 
 
  

Dette inneholder lisensinnholdet (MIT) for denne koden. Det er et enkelt kort for å inneholde innholdet. Slik ser det ut.

Den endelige malen inneholder noen formelementer. Jeg vil gå over det i litt mer detaljert. Opprett en ny fil på www / synspunkter / settings / tab.preferences.html og legg til følgende innhold til det.

  
 
 Typer av steder 
 
 Type.type   
 
 
  
 
  

Denne visningen inneholder en liste over bytter som viser de fire typer stedene appen kan vise, museum, park, bibliotek og sykehus. Hver av disse listepostene lar deg aktivere eller deaktivere en type sted fra listen. Toggle-knappen er en CSS-komponent. Vi trenger bare å bruke en avkrysningsboksinngang med denne spesifikke markup- og CSS-klassestrukturen for å få dem til å vises som mobile veksleknapper.

Denne visningen har en kontroller erklært i settings.js, men det injiserer a typer tjeneste som vi ikke har opprettet ennå. Vi vil fikse det ved å legge til en ny tjeneste til www / js / app.js.

.Fabrikk ('Types', funksjon () return [type: 'Park', aktivert: true, type: 'Hospital', aktivert: true, type: 'Library', aktivert: true, type : 'Museum', aktivert: true];)

Denne tjenesten inneholder en rekke stedtyper. Den har en eiendom for navnet på hvert stedstype og om det er aktivert eller deaktivert. Vi bruker den aktiverte egenskapen i svingknappen ngModel å spore staten hvis den typen skal vises.

På dette punktet kan du åpne sidemenyen og navigere til innstillingslenken. Du kan se de to kategoriene, preferanser og om. På fanen Innstillinger kan du slå av stedtyper på eller av.

Hvis du går til fanen om, kan du velge lisensen for å se hvordan den navigerer til en annen rute i kategorien. Hvis du bytter mellom innstillingene og om fanen etter at du har sett lisensen, kan du se at fanen husker at du var i lisensstaten, selv etter at du dro, og demonstrerte den statlige naturen til disse kategoriene.

Det siste trinnet i denne opplæringen er å oppdatere stedvisningen for å bruke typer service for å laste bare de ønskede typene steder og bruk historikstjenesten til å håndtere når du skal laste om eller bruke hurtigbufferen.

3. Caching og bruk av History Service

Ionic caches som standard de siste 10 visningene og holder dem i minnet. Mange apps kan ikke engang ha så mange stater, noe som betyr at hele appen din kan forbli i minnet. Dette er nyttig fordi det betyr at ionisk ikke trenger å gjøre visningen igjen før du navigerer, noe som øker appen.

Dette kan føre til atferdsmessige problemer, fordi du kanskje tror at statene dine alltid laster opp og reinitialiserer kontrolleren når som helst når staten er tilgjengelig. Siden bare 10 visninger er bufret, hvis du har 20 visninger, vil bare de siste 10 være i hurtigbufferen. Det betyr at du ikke kan garantere at en visning er i hurtigbufferen eller ikke. Så du bør unngå å utføre oppsettlogikken i dine kontrollere utenfor livscykluskrokene. Du kan også konfigurere caching strategier ved hjelp av $ ionicConfigProvider.

Noen ganger må du se på brukerens navigasjonshistorikk for å finne ut hva du skal gjøre. For eksempel, i denne appen, vil vi beholde listen over steder som er cached hvis brukeren tapper på et sted og deretter tilbake til listen. Hvis vi automatisk oppdaterte listen på hvert besøk, kan brukerne miste plass i listen etter at de har rullet og sett på et sted.

På den annen side, hvis en bruker navigerer til innstillingssiden og deretter tilbake til stedlisten, vil vi oppdatere listen, siden de kan ha endret typer stedene de ønsker å vise.

Vi skal bruke en kombinasjon av livssyklusarrangementene som vi har sett på før med $ ionicHistory service for å legge til noen logikk som vil bidra til å bestemme når stedstilstanden skal laste på listen. Vi vil også bruke typer tjeneste for å hjelpe oss med å laste inn bare de stedene brukeren ønsker å se.

Åpen www / visninger / steder / places.js og oppdater det for å matche følgende kode. Vi må endre måten data er lastet inn og bruke $ ionicHistory service for å inspisere historien for å avgjøre når du skal laste på nytt.

angular.module ('App') .config (funksjon ($ stateProvider) $ stateProvider.state ('steder', url: '/ places', kontroller: 'PlacesController as vm', templateUrl: 'visninger / steder / steder .html ');) .controller (' PlacesController ', funksjon ($ http, $ scope, $ ionicLoading, $ ionicHistory, Geolocation, Types) var vm = dette; var base =' https: // civinfo-apis .herokuapp.com / civic / places? location = '+ Geolocation.geometry.location.lat +', '+ Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = [] ; vm.load = funksjonsbelastning () $ ionicLoading.show (); var url = base; var query = []; angular.forEach (Typer, funksjon (type) hvis (type.enabled === sann)  query.push (type.type.toLowerCase ());); url + = '& query =' + query.join ('|'); hvis (token) url + = '& token =' + token; $ http.get (url) .then (funksjonshåndtakResponse (respons) vm.places = vm.places.concat (response.data.results); token = response.data.next_page_token; hvis (! response.data.next_page_token) vm.canLoad = false; $ omfang. $ kringkasting ( 'scroll.infiniteScrollComplete'); $ IonicLoading.hide (); ); ; $ scope ($ $) ($ $ ionicView.beforeEnter ', funksjon () var tidligere = $ ionicHistory.forwardView (); if (! previous || previous.stateName! =' place ') token = "; vm.canLoad = false; vm.places = []; vm.load ();;;);

Først har vi endret måten nettadressen er bygd for at API-en vår skal endres fra å laste inn bare parker for å laste inn de forespurte typene. Hvis du sammenligner dette med forrige versjon, bruker den primært angular.forEach å sløyfe over hver type og legge den til nettadressen.

Vi har også endret måten $ ionicLoading tjenesten oppfører seg. I stedet for å kjøre umiddelbart når kontrolleren kjører i utgangspunktet, utløser vi det når som helst vm.load () Metoden kalles. Dette er viktig fordi kontrolleren vil bli cachelagret og vil ikke gjenopplate data som standard.

Den største forandringen er $ ionicView.beforeEnter livssyklus hendelse handler. Denne hendelsen brenner før visningen er i ferd med å bli den neste aktive visningen, og lar oss gjøre noe oppsett. Vi bruker $ IonicHistory.forwardView () Metode for å få informasjon om siste visning brukeren var på.

Hvis det er den første belastningen, blir dette tomt, ellers returnerer det noen data om siste tilstand. Vi kontrollerer deretter om forrige tilstand var stedstilstanden, og i så fall bruker vi den cacherte resultatlisten. Også, siden vi har mindre enn 10 stater, vet vi at staten alltid vil bli holdt i minnet.

Ellers vil den tilbakestille de bufrete verdiene og utløse en ny last med data. Dette betyr at når jeg går tilbake til stedvisningen, etter at jeg har gått til innstillinger, vil den laste om dataene. Avhengig av appdesign, vil du sannsynligvis ønske å designe ulike betingede regler for hvordan du håndterer caching og lasting.

Historiktjenesten gir mer informasjon, for eksempel hele historibakken, evnen til å endre historien, detaljer om gjeldende tilstand og mer. Du kan bruke denne tjenesten for å finjustere opplevelsen mens du navigerer i appen.

Vi skal lage to andre små tweaks til vår stedmal. Åpen www / visninger / steder / places.html og endre tittelen til Lokale steder.

Deretter oppdaterer du uendelig rullekomponent med en ekstra attributt, umiddelbar sjekk, for å hindre at uendelig rullekomponent laster inn data samtidig som den opprinnelige belastningen oppstår. Dette bidrar i hovedsak til å hindre dupliserte forespørsler om flere data.

På dette tidspunktet har vi bygget en ganske solid app som har et ganske fint sett med funksjoner. Vi vil pakke opp denne serien med en siste opplæring som ser på Cordova og integrere med noen av enhetens funksjoner, for eksempel å få tilgang til GPS-data.

Konklusjon

Navigasjon med ionisk begynner alltid med å erklære noen stater. Å eksponere den navigasjonen kan gjøres på flere måter som vi har sett i denne opplæringen. Dette er hva vi har dekket i denne opplæringen:

• Side-menykomponentene gjør det enkelt å lage en eller to sidemenyer som kan aktiveres på forespørsel eller ved å sveipe.
• Faner kan være statsløse eller stateful. Stateful-faner kan ha individuelle visninger med separate navigasjonshistorier.
• Faner har mange konfigurasjonsalternativer for hvordan ikonene og tekstvisningen vises.
• En veksleknapp er en CSS-komponent som fungerer som en avkrysningsboks, men den er designet for mobil.
• Du kan bruke $ ionicHistory tjeneste for å lære mer om navigasjonshistorikken til appen for å tilpasse opplevelsen.