Komme i gang med ionisk Tjenester

1. Innføring i tjenester

I den første og andre delen av denne serien om ionisk opprettet vi lokal utvikling og bygget et par visninger for å laste inn en liste over parker ved hjelp av noen av de ioniske komponentene, for eksempel base navigasjon og listekomponenter. I denne opplæringen skal vi grave på hvordan ionisk gir en rekke tjenester som gjør det mulig å programmere administrere appen og grensesnittet.

Tidligere viste vi hvordan ionisk gir interaktive funksjoner gjennom komponenter, som brukes som HTML-elementer (implementert som Angular Directives). Det er imidlertid noen grensesnittelementer som ikke gir mening som komponenter som er instantiated med HTML, for eksempel en overlegg for loader eller handlingsark.

La oss begynne med å se på hvilken rolle tjenestene spiller i appen din. Jeg har identifisert tre primære typer tjenester i ionisk:

• komponenttjenester
• delegere tjenester
• assisterende tjenester

Komponenttjenester

Komponenttjenester tillater bruken av komponenter, men i stedet for å bruke HTML for å erklære dem (som vi så med ionNavBar) de administreres ved hjelp av JavaScript. Med andre ord, vil du utnytte disse komponentene ved å legge til kode til dine kontrollere. Vi bruker to av disse i eksemplet nedenfor.

Det kan være nyttig å tenke på disse tjenestene som komponenter som har en livssyklus. Vanligvis vil du at de skal lastes på et bestemt tidspunkt, og etter at de er ferdige, blir de fjernet. For eksempel, $ ionicModal lar deg lage en modal. Modeller har en livssyklus, de åpnes og lukkes av spesifikke grunner. Du kan ha en modal som ber brukerne å logge inn, eller de kan lukke modellen for å hoppe over den, og dermed fullføre livssyklusen.

Delegate Services

Noen av komponentene har en følgesvenntjeneste som kan endre eller administrere komponenten. Du vil kanskje programmere en komponent etter at den ble opprettet, og disse tjenestene er utformet for å gjøre det mulig. De er så navngitt siden de delegerer oppførsel til komponenten.

De ionNavBar komponent har en delegertjeneste kalt $ ionicNavBarDelegate. Denne tjenesten har flere metoder, men et eksempel er tittel() metode, som lar deg oppdatere tittelen på navigasjonslinjen. Omfanget av funksjonene som er tilgjengelige for hver delegatstjeneste varierer, men de skal være enkle å se i dokumentasjonen ved navn.

Hjelpestjenester

Den siste kategorien er tjenester som gir noen form for hjelpefunksjonalitet eller gir informasjon. Det er bare noen få av dem, og de passer ikke helt inn i de to andre kategoriene. Noen eksempler er:

• $ ionicPlatform: hjelper deg med å kommunisere med maskinvareenheten
• $ ionicGesture: lar deg håndtere gestusbegivenheter
• $ ionicPosition: forteller deg plasseringen av elementer på skjermen

Disse hjelpestøttene har en tendens til å hjelpe deg med å utvikle logikk eller håndtere samhandling. De genererer eller endrer ikke komponenter på egen hånd.

Vi vil også se på noen andre ting i denne opplæringen:

• CSS-komponenter, som kun er visuelle og gir ingen funksjonell logikk i motsetning til deres JavaScript-komponentsøsken
• Joniske hendelser, som vi kan utnytte til å koble til hendelser, for eksempel når visningen lastes eller er ferdig lastet
  
• Flere navigasjonsfunksjoner, som gjør det enkelt å navigere, administrere tilstand og legge til knapper i navigasjonslinjen

Kildefiler

I denne opplæringen skal vi utvide appen vi startet i tidligere opplæring. Bare en påminnelse, er appen utformet for å gi brukerne informasjon om deres lokale offentlige anlegg, for eksempel biblioteker og parker. Appen viser allerede en liste over parker i Chicago, og nå vil vi legge til muligheten til å vise lasteindikatorer, vise individuelle parkdetaljskjermbilder, åpne en handlingsmeny og implementere noen grunnleggende delingsfunksjoner.

Du kan se det gjennomførte prosjektet på GitHub. Det endelige eksemplet er også tilgjengelig for forhåndsvisning.

Du kan laste ned filene eller sjekke dem ut ved hjelp av Git. Når du har filene på maskinen din, må du kjøre npm installasjon å sette opp prosjektet. Hvis du sjekker koden ut med Git, kan du kode sammen hvis du tilbakestiller repoen for å matche hvor den siste delen endte med å løpe git checkout -b start. Når du har filene, start din joniske server ved å kjøre ionisk servering.

2. Implementere en ladingindikator

For øyeblikket laster appen data og det er en liten sirkelindikator fra den uendelige rullekomponent som viser til den laster. Men vi vil faktisk legge over hele appen, så det er veldig klart at appen lastes inn.

De $ ionicLoading tjenesten er veldig nyttig å overlappe og blokkere brukeren fra å samhandle med appen til data har lastet inn. Det kan konfigureres. For eksempel kan du erklære om et lastingsikon eller en tekst vises, hvis du vil ha bakgrunnen eller ikke, eller hvis den automatisk skal gjemme seg etter en viss tidsperiode. Du kan se lasteren i aksjon på skjermbildet nedenfor.

Åpen www / visninger / places.js å gjøre noen få modifikasjoner for å bruke lasteren. Først må vi injisere tjenesten i vår kontroller ved å legge til $ ionicLoading til funksjonsparametrene. Tjenesten er ganske enkel, den har bare to metoder, vise fram() og gjemme seg(). Vi kan gjøre loader showet og gjemme ved å ringe metodene som du ser her i denne utdrag.

.controller ('PlacesController', funksjon ($ http, $ scope, $ ionicLoading, Geolocation) var vm = dette; 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 = funksjonsbelastning () var url = base; hvis (token) url + = '& token =' + token; $ http.get (url) .then (funksjonshåndtakResponse (respons) vm.places = vm.places. concat (response.data.results); token = respons.data.next_page_token; hvis (! response.data.next_page_token) vm.canLoad = false; $ omfang. $ kringkasting ('scroll.infiniteScrollComplete'); $ ionicLoading. gjemme seg(); ); ; );

De $ IonicLoading.show () Metoden kalles så snart kontrolleren er lastet, noe som betyr at den brenner umiddelbart. Nå må vi fortelle lasteren å gjemme seg etter at dataene er ferdig lastet som du ser rett etter $ kringkasting.

Du kan legge merke til at $ IonicLoading.hide () Metoden kalles hver gang dataene lastes inn. Dette er ikke et problem. Siden lasteren er allerede skjult, har dette anropet ingen effekt.

Vi har nå implementert en ionisk tjeneste. Ganske enkelt. Ikke sant? Noen er litt mer komplekse, og vi skal jobbe med et annet eksempel ved hjelp av handlingsarket. Før vi kommer til det, vil vi imidlertid utvide vår app for å ha to visninger for både notatlisten og å se et notat individuelt.

3. Legge til notatvisningen

Vårt neste skritt er å lage en ny visning som vil vise mer detaljert informasjon om en bestemt park. Informasjonen kan variere fra park til park, men vi vil være fokusert på å få et bilde, nettsted, telefon og adresseinformasjon. Resultatene av å legge til denne visningen vises her.

For å lage en ny visning, opprett en fil på www / visninger / sted / place.js og ta med innholdet du ser nedenfor. Dette er kontrolleren og statens definisjon for sted utsikt.

angular.module ('App') .config (funksjon ($ stateProvider) $ stateProvider.state ('sted', url: '/ places /: place_id', kontroller: 'PlaceController as vm', templateUrl: 'visninger / sted / sted.html ', løs: Sted: funksjon ($ http, $ stateParams) var url =' https://civinfo-apis.herokuapp.com/civic/place?place_id= '+ $ stateParams.place_id; returnere $ http.get (url);;) .controller ('PlaceController', funksjon ($ omfang, sted) var vm = dette; vm.place = Place.data.result;);

Hvis du tar en titt på konfig () Metoden, du ser at vi erklærer en ny stat. Dette er ui-router i aksjon, så du bør konsultere ui-router dokumentasjonen for alle detaljer om deklarerte tilstander.

Objektdefinisjonen viser at vi bruker en URL til / Steder /: place_id. Når du ser en del av nettadressen med et kolon foran, for eksempel : place_id, den markerer denne delen av banen som en tilstandsparameter. Staten er i stand til å trekke verdien og gi den til deg ved hjelp av $ stateParams gjenstand. For eksempel, / steder / 12345 ville resultere i $ stateParams.place_id = '12345'.

Du har sett de andre delene av definisjonen tidligere, bortsett fra Løse eiendom. Dette er en funksjon som lar deg be om ulike funksjoner som skal kalles før staten blir opprettet. Den aksepterer et objekt med nøkkel- og funksjonsverdier, så her har vi Sted som nøkkelen og resultatet av funksjonen vil bli tildelt den.

I funksjonen kan det akseptere parametere for å injisere, ligner på hva du kan gjøre med en kontroller. Her, $ http og $ stateParams tjenester injiseres. Funksjonen bruker da verdien fra place_id passert via nettadressen og bygger og returnerer en HTTP-forespørsel. Dette er i hovedsak hva som gjøres på stedet, unntatt kontrolleren gjør det.

Løsningsfunksjonen er smart nok til å bestemme at hvis du returnerer et løfte, vil det vente på at løftet løser seg før du oppretter staten. Med andre ord, $ Http.get () returnerer et løfte om å laste dataene og ui-router venter til dataene er tilgjengelige før du oppretter staten og passerer Sted til kontrolleren. Løsningsfunksjonen er ganske nyttig for forhåndsinnlasting av data i appene dine, og dette er et ganske grunnleggende eksempel på hvordan du kan utnytte den.

Nå som vi har definert staten, er kontrolleren deklarert og tilordner de resulterende dataene fra Sted (dette er det som ble løst i staten) til vm.place. Vi må også lage vår mal for denne tilstanden, så opprett en ny fil på www / synspunkter / sted / place.html og legg til følgende innhold til det.

  
 
  Vm.place.formatted_address
 
 
  
   Vm.place.website    Vm.place.formatted_phone_number  
  

Denne malen starter ved å bruke ionView å pakke inn innholdet, slik at det joniske navigasjonssystemet kan holde orden på det på riktig måte. Den tildeler også en tittel basert på navnet på stedet. De ionContent wrapper inneholder det primære innholdet, og du vil legge merke til at malen bruker CSS-klasser i stedet for elementer for å lage en kortkomponent.

I den forrige delen snakket vi om hvordan noen av komponentene bare er CSS-klasser. Kortet er et eksempel på det. Konseptuelt er det som en liste. Det indre innholdet stabler vertikalt som en liste, men stylingen ser ut som et kort. Dette utnytter kortformatene, som inkluderer funksjoner som bildestøtte, ikoner og andre pene oppsett som er omtalt i dokumentasjonen.

Det er noen få ngIf Direktiver som brukes siden det ikke er noen garanti for at dataene som returneres, vil ha et telefonnummer eller et nettsted. De ngIf Direktivet sørger for at ingen tomme verdier vises. Det bruker også ngHref eller ngSrc å bygge linker riktig.

Du vil også legge merke til bruken av tlf: // protokollen, som, når den brukes på en telefon, bør be brukeren om å ringe nummeret når de velger det. Det er en praktisk funksjon som er enkel å bruke og integrerer pent på en fysisk enhet. Noen programmer på datamaskinen, som Skype, kan også prøve å håndtere å ringe for deg, avhengig av innstillingene dine.

Dette burde gi oss en fungerende visning, men hvordan navigerer vi til det? Vi må gjøre noen få små modifikasjoner for å gjøre navigasjonsarbeidet fra stedvisningen.

4. Navigere mellom visninger

Ui-router gir en ui-sref Direktiv som brukes til å koble elementer til en annen stat. I dette tilfellet ønsker vi at hvert av elementene i listen over stedvisningene skal kobles til den tilsvarende stedvisningen.

Åpen www / visninger / steder / places.html og legg til direktivet for å koble til hvert sted. Oppdater ionItem med det nye attributet her.

De ui-sref Direktivet har et format der du kan koble til en annen stat ved navn, ikke av noen nettadresse som du gjør med href. Dette er nyttig siden nettadresser kan endres. Det kan også akseptere parametere som skal brukes til å bygge nettadressen, og i vårt tilfelle vil vi passere place.place_id eiendom. De ui-sref tar egenskaper som et objekt, så tilstandsnavn (param: verdi) er syntaksen.

Forhåndsvis forhåndsvisning av appen og velg en park, den vil navigere til den nye sted se og du kan se på adressefeltet for å se nettadressen legger til en place_id verdi. Vi har imidlertid nå et problem. Hvordan kommer vi tilbake til listen?

Vi bruker ionNavBackButton funksjonalitet for å gi oss en automatisk tilbakeknapp. Åpen www / index.html og legg til følgende utdrag inne i ionNavBar. Dette legger til en tilbakeknapp som bare vises når det er et sted å gå tilbake til.

   Tilbake  

Ions navigasjon er smart nok til å holde oversikt over historien mens du bruker appen. Hvis det er en tidligere visning for å komme tilbake til, vil den vise tilbakeknappen. Ellers vil det bare være skjult.

Vi ønsker også å erklære at stedvisningen aldri skal vise tilbakeknappen, noe vi kan gjøre ved å legge til hideBackButton Direktivet i www / visninger / steder / places.html.

Mens du utvikler og forhåndsviser i nettleseren, blir historien noen ganger gjenopprettet. For eksempel, når du er på stedet, og du lagrer en endring i editoren din, lastes nettleseren automatisk tilbake og tilbakestiller historien. I dette tilfellet vises ikke tilbakeknappen som forventet. Du kan fikse dette ved å returnere tilbake til listen og forfriskende for å sette historien rett.

Vi har gjort gode fremskritt, men akkurat nå, når du trykker på et element i listen, venter det på overgang til den nye visningen til API-samtalen returnerer med dataene. Det kan virke rask til deg, men noen ganger kan det være sakte hvis API-en er treg. Det kan få noen til å tro at appen er fast, sakte, eller at den ikke registrerte trykknappen, siden den ikke umiddelbart begynte å reagere på kranen. Vi adresserer dette med noen av livssyklushendelsene som hjelper oss med å sette opp en laster som skal vises i løpet av denne tiden.

5. Legge til lasteren under overganger

For å gi en bedre brukeropplevelse, skal vi bruke $ ionicLoading tjeneste for å overlappe appen mens dataene lastes for stedvisningen. For å vite når du skal vise og skjule lasteren, bruker vi livssyklus hendelsene.

Disse hendelsene blir avbrutt basert på navigeringshendelser, for eksempel før / etter å gå inn i en visning eller før / etter å ha forlatt en visning. Du kan gjøre alt som kan være nødvendig på disse punktene, for eksempel å tilbakestille noen data, eller kanskje bruke den til å sende inn bruksinformasjon.

For å demonstrere det, la vi legge til en hendelseslytter til stedvisningen som håndterer utløseren av lasteren når du begynner å navigere til stedvisningen. Åpen www / visninger / steder / places.js og legg til følgende til kontrolleren. Du må også sørge for at $ omfang er erklært i kontrollfunksjonsparametrene slik at den er tilgjengelig.

$ scope. $ on ('$ ionicView.beforeLeave', funksjon () $ ionicLoading.show (););

Dette er en hendelse for innholdshendelse som lytter etter $ ionicView.beforeLeave arrangement (se Angular scope events). Ionic sender denne hendelsen til kontrolleren din og ringer den anonyme funksjonen deklarert her. Denne funksjonen kaller bare $ IonicLoading.show () metode for å slå på lasteren.

Dette utløser laderen til å vises så snart brukeren tapper et element. Nå legger vi til en lignende utdrag til stedetvisningen som håndterer gjemmeren når visningen er fullført. Åpen www / visninger / sted / place.js og legg til følgende til kontrolleren. Du må legge til begge deler $ ionicLoading og $ omfang til kontrollfunksjonsparametrene siden de ikke er injisert i øyeblikket.

$ scope. $ on ('$ ionicView.afterEnter', funksjon () $ ionicLoading.hide (););

Dette lytter etter en annen omfangshendelse som brenner når visningen er ferdig og kaller funksjonen for å skjule lasteren. Lasteren vises i tiden mellom øyeblikket, og brukeren tapper et sted å se til visningen er fullt lastet. Du kan prøve andre hendelser og se når de utløser.

Den siste tingen vi gjør i denne opplæringen, er opprettet en handlingsdelingsknapp som lar deg legge inn på Twitter, Facebook eller e-post og dele parkinformasjonen.

6. Delingsknapp Bruke Action Sheet Service

Handlingsark er ganske nyttig for å gi en liste over tilleggsalternativer. Intensjonen er vanligvis for situasjoner der du vil presentere en liste over handlinger som er gruppert, og i vårt eksempel er det en liste over måter å dele parkinformasjonen med. Handlingsarket vi skal bygge ser slik ut.

Handlingstjenesten er litt mer kompleks enn lastetjenesten, fordi den håndterer konfigurasjon og brukerinnganger. Åpen www / visninger / sted / place.js og legg til denne nye metoden til kontrolleren din. Du må også sørge for at $ ionicActionSheet injiseres i kontrolleren din.

vm.openSheet = funksjon () var ark = $ ionicActionSheet.show (titleText: 'Del dette stedet', knapper: [text: 'Del via Twitter', text: 'Del via Facebook', text : 'Del via e-post'], avbrytText: 'Avbryt', knappKlikket: funksjon (indeks) if (index === 0) window.open ('https://twitter.com/intent/tweet?text= '+ encodeURIComponent (' Jeg fant dette flotte stedet! '+ vm.place.url)); ellers hvis (index === 1) window.open (' https://www.facebook.com/sharer/sharer .php? u = '+ vm.place.url); annet hvis (index === 2) window.open (' mailto:? subject = '+ encodeURIComponent (' Jeg fant dette flotte stedet! ') +' & body = '+ vm.place.url); ark ();); ;

De openSheet () Metoden er ansvarlig for å lage handlingsarket. Det gjør dette ved å ringe $ IonicActionSheet.show (), som returnerer en funksjon som er lagret på ark. Det lar deg lukke arket når du er ferdig med det senere ved å ringe ark(). De vise fram() Metoden tar et objekt med en rekke egenskaper som vi vil bryte ned. Det finnes flere eksempler på ioniske tjenester som følger dette mønsteret, for eksempel modeller og popovers, slik at du alltid kan håndtere å lukke dem.

Arket håndterer tittelen ved hjelp av titleText eiendom og brukes vanligvis til å informere brukeren om hvordan man bruker knappene. De cancelText eiendom aksepterer en streng som brukes til å aktivere en avbryt-knapp. Hvis du ikke erklærer dette, vil ingen avbrytingsknapp bli valgt. Du kan også avbryte ved å trykke på baksiden utenfor knappene.

For å deklarere knappene du bruker knapper eiendom, som er en rekke objekter som har a tekst eiendom. De vises i den rekkefølgen de er erklært, så sorter dem deretter.

De buttonClicked Egenskapen tar en funksjon, og den passerer indeksen for knappen som ble valgt (som den ble deklarert i knapper). Derfor kan du finne ut hva du skal gjøre ut fra hvilken indeks som er bestått. I denne funksjonen er indeksen sjekket og enten åpnes Facebook, Twitter eller bruker mailto: for å utløse e-postklienten.

Det kan åpne disse koblingene i Facebook, Twitter eller e-postprogrammer, avhengig av brukerinnstillingene og kanskje enheten, men det vil i det minste åpne koblingene utenfor appen din (i en ekstern nettleser). Det endelige brikken er å ringe ark() metode som lukker handlingsarket.

Handlingsarket er nå klar for handling, men vi må fortsatt legge til en knapp for å utløse arket. For å gjøre dette, legger vi til en navigeringslinjeknapp til stedvisningen som ringer vm.openSheet (). Åpen www / synspunkter / sted / place.html og legg til ionNavButtons kutt mellom ionView og ionContent.

Her er enda en nyttig jonisk navigasjonsfunksjon som lar deg legge til en navigeringslinjeknapp til en bestemt visning ved hjelp av ionNavButtons. Noen knapper på innsiden legges til navigasjonslinjen, og du kan konfigurere hvilken side de vises på.

På dette punktet jobber alt. Brukere kan åpne handlingsarket for å dele parken med sine venner.

Konklusjon

I denne opplæringen dekket vi joniske tjenester og hvordan de brukes. Underveis oppdaget vi en rekke andre ioniske funksjoner:

• Ioniske tjenester kalles i kontroller og har vanligvis en livssyklus uavhengig av dagens visning.
• De $ ionicLoading tjenesten er nyttig for å vise og skjule en lastindikator mens appen laster inn data eller ellers må blokkere brukergrensesnittet.
• De $ ionicActionSheet tjenesten presenterer brukeren med en liste over knapper som overlegger appen, for å gi enkel tilgang til viktige handlinger.
• Ioniske navigasjonsfunksjoner inkluderer også ionNavBackButton å automatisk vise en tilbakeknapp når det er mulig å gå tilbake. ionNavButtons lar deg legge til navigeringslinjeknappene til bestemte visninger.
• Ionic har CSS-komponenter, som kortet, som ikke har noen spesielle interaktive funksjoner, og brukes kun ved å deklarere CSS-klasser.

I neste avdeling vil vi grave enda lenger inn i noen av navigasjonsfunksjonene i Ionic.

Opprett en jonisk mal og vinn $ 1000

Hvis du allerede er komfortabel med det joniske rammeverket, vil du kanskje vurdere å legge inn Envato's Most Wanted-konkurranse for joniske maler. Hvordan? Lag en unik jonisk mal og send den til Envato Market innen 27. april 2016.

De fem beste malerne mottar $ 1000. Interessert? Les mer på konkurransens hjemmeside for detaljer om konkurransens krav og retningslinjer.