Share
Hva du skal skapeI denne opplæringen skal vi bygge vår første joniske app sammen og lære grunnleggende om joniske JavaScript-komponenter. Disse komponentene gir appen din lett tilgang til funksjoner, for eksempel navigasjons- og navigasjonsfelt, uendelig rulle og lister. Hvis du ikke har konfigurert Ionic ennå, eller trenger å oppdatere hvordan du bruker Ionic CLI, kan du se gjennom den første opplæringen i denne serien.
Begrepet komponenter blir noe misbrukt i frontendutvikling, da mange rammer har sin egen oppfatning som beskriver en komponent. Faktisk kan webkomponenter som en offisiell HTML-standard ytterligere komplisere konseptet, så la oss tydelig definere hva en komponent er i ionisk.
I en generell forstand er en komponent en implementering av et sett av funksjoner som er innkapslet av en eller annen form for kodingskonvensjon. Med andre ord kan du tenke på en komponent som en måte å isolere en bestemt funksjon fra resten av programmet. Du kan tenke på hvordan i HTML er det forskjellige typer skjemainnganger, og hver av dem er en type komponent som har spesifikke funksjoner.
I ionisk er det to typer komponenter, CSS og Javascript. CSS-komponenter implementeres som et sett med CSS-klasser som endrer et element for å gi det et bestemt utseende, for eksempel en topplinje.
JavaScript-komponenter er teknisk implementert som Angular Directives, og de brukes som HTML-elementer i applikasjonen. De gir et rikere sett med funksjoner. Dette inkluderer vanligvis muligheten for brukerne å samhandle med den eller applikasjonen for ellers å administrere komponenten. Flikker, for eksempel, tillater innhold å bli vist eller skjult basert på brukeren som velger en fane.
I denne opplæringen skal vi fokusere på noen av JavaScript-komponentene. Senere i denne serien, ser vi nærmere på CSS-komponentene.
Noen ganger utfører ionisk en komponent som både en CSS og en JavaScript-komponent, for eksempel fanekomponenten. Dette betyr at du bestemmer hvilken du skal bruke. Jeg anbefaler generelt at du velger JavaScript-implementeringen. I de fleste tilfeller er overhead for å bruke JavaScript-komponenten ubetydelig, og jeg tror at de gjør koden enklere å jobbe med.
I denne opplæringen skal vi lage en app fra begynnelsen, og vi vil fortsette å forbedre appen i resten av denne serien. Forutsetningen for denne appen er å skape en informasjonsapplikasjon for borgerlig informasjon som gir brukerne informasjon om deres lokale fasiliteter, for eksempel biblioteker og parker.
I denne opplæringen begynner vi med å bygge en app som viser en liste over parker i Chicago og bruker uendelig rulle for å holde resultatene så lenge de er tilgjengelige. Vi vil utvide funksjonssettet av appen i de neste opplæringsprogrammene.
Jeg har opprettet en API som gir informasjonen appen trenger. API-en er basert på Google Maps-APIer. Du kan kjøre API selv, men det krever at du får en egendefinert API-nøkkel fra Google, og instruksjoner finner du på API-prosjektet. Hvis det er noen problemer ved hjelp av den angitte API, slik som at noen misbruker API-en og overskrider API-bruksgrensene, bør du kjøre din egen versjon for å hjelpe.
Du kan forhåndsvise den kjørende appen på Heroku og se det gjennomførte prosjektet på GitHub. Imidlertid oppfordrer jeg deg til å følge med og bygge appen med meg.
Først må du starte et nytt prosjekt. Vi kan gjøre dette ved å kjøre følgende kommando:
ionisk start civinfo https://github.com/ionic-in-action/starter
Dette laster ned en startpakke som inneholder en tom jonisk mal for å komme i gang (bygget for bruk med boken Ionic in Action). Skriv inn katalogen, cd civinfo, og løp ionisk servering.
Du kan nå forhåndsvise en tom app som lastes inn på http: // localhost: 8100 (eller på porten satt av ionisk). Jeg anbefaler at du åpner utviklerverktøyene i nettleseren din for å bekrefte at du ser en tom skjerm. Ja, det skal være en hvit skjerm. Jeg foreslår også å bruke Chrome Enhetsemulering mens du forhåndsviser appen din.
Navigasjon er så viktig at vi skal starte med å designe vår app. De primære navigasjonskomponentene er ionNavBarog ionNavView. De fleste apper har en designfunksjon der det er en navigeringslinje med forskjellige titler og handlingsknapper, og resten av området er viet til innholdet for den nåværende visningen.
De ionNavBarog ionNavView Komponenter gir den funksjonaliteten med litt innebygd intelligens for å hjelpe oss. Vår app skal ha flere ruter til slutt, men vi bygger bare en i denne opplæringen.
Ionisk bruker UI Router under hetten for å administrere navigering og ruting. Hvis du er kjent med det, gjenkjenner du implementeringen i ionisk. Det er mange nyanser, men vi holder det enkelt i denne opplæringen. Den vanligste og enkle bruken er å definere hver av de forskjellige sidene i appen din som en stat, som er den joniske / UI-ruteren måten å definere en bestemt visning på.
For å komme i gang legger vi først de to navigasjonskomponentene inn i www / index.html som du ser nedenfor, plasserer den inne i kroppen.
Når du har lagt til koden til index.html, Du kan laste appen på nytt, og det bør vises en grønn linje øverst på appen.
Du har definert ionNavBar komponent, som automatisk vises øverst på skjermen. Senere, når vi lager individuelle visninger, vil disse visningene kunne sende en tittel og flere knapper som skal vises. Det er smart nok til å vite hvor høy navigasjonslinjen skal være for forskjellige enheter. Dette er ikke konsistent på tvers av plattformer, så dette er svært nyttig. Navigasjonsfeltet er gitt en klasse av bar balansert for å gi den en grønn farge.
Så er det ionNavView, som er plassholderen som gjør innholdet for hver av visningene. Når vi definerer en visning, vil den gjengi den resulterende markeringen her, og den justeres automatisk for å ta opp ledig plass igjen etter at navigasjonslinjen er plassert.
Navigasjonskomponentene er eksempler på JavaScript-komponenter (også kjent som Angular Directives). De ser ut som egendefinerte HTML-koder, og når de brukes sammen, er de klare nok til å holde tittellinjen synkronisert med gjeldende visning og gjengi det riktige innholdet basert på brukerens navigasjonsvalg. For å se dette i aksjon, må vi imidlertid legge til noen stater. La oss starte med å lage vår første stat som viser en liste over parker.
Hovedformålet med appen er å vise en liste over medborgerrelaterte ressurser. I utgangspunktet vil dette være en liste over parker, men vi vil utvide den til å inkludere andre typer ressurser som biblioteker. Vi ønsker å inkludere noen få funksjoner i denne visningen:
Nå som vi har noen mål for denne visningen, la oss begynne med å legge til vår JavaScript-fil som vil registrere denne visningen. Opprett en ny fil places.js på www / visninger / steder / og legg til følgende for det:
Accentsconagua
angular.module ('App') .config (funksjon ($ stateProvider) $ stateProvider.state ('steder', url: '/ places', kontroller: 'PlacesController as vm', templateUrl: 'visninger / steder / steder .html ');) .controller (' PlacesController ', funksjon () );Vi erklærer en ny stat for UI Router ved hjelp av $ StateProvider.state () metode. Dette er kun tilgjengelig for å bli konfigurert innenfor Angular's angular.config () metode. Når du erklære en tilstand, sender du først en streng for å navngi ruten, i dette tilfellet steder. Deretter sender du et objekt med forskjellige egenskaper som definerer staten, for eksempel en URL, en kontroller og en mal. Du kan se på UI Router-dokumentasjonen for alle mulige konfigurasjonsalternativer.
Vi har erklært en ny stat, kalt den steder, tildelt det en URL til / steder, kalt a kontrolleren ved hjelp av kontrolleren som syntaks, og oppført a templateUrl å laste. Dette er en ganske vanlig tilstandsdefinisjon, og du ser den brukes på det meste på samme måte som andre stater. Kontrolleren som er oppgitt her er tom, men vi legger til det snart.
Denne malen er en viktig del av visningen og beskriver de visuelle aspektene av denne visningen. Mesteparten av visningslogikken og oppførselen blir styrt i kontrolleren og malen. Vår stat erklærer at vi vil laste inn en HTML-fil for malen, men vi har ikke laget en enda. La oss fikse det ved å opprette en ny fil places.html på www / visninger / steder / og legger til koden nedenfor.
Så langt i denne malen har vi erklært ionView og ionContent komponenter. De ionView komponent er en wrapper som du plasserer rundt en mal som er ment å bli lastet inn i ionNavView komponent vi erklærte tidligere. De view-tittelen Attributt brukes også til å passere tittelen navigeringslinjen skal vise.
De ionContent komponent er et nyttig innholdsinnpakning, som bidrar til å sikre at innholdsrommet er dimensjonert med tilgjengelig skjermrom, hjelper med å administrere rulling og kan avsløre andre mindre vanlige oppføringer. Når denne visningen er lastet, vil du se at navigeringslinjens tittel vises som "Local Parks".
Nå må vi sørge for at appen laster skriptet til å utføre ved å legge til places.js til index.html som du ser nedenfor. Jeg anbefaler å legge til dette rett før stikkord.
Du kan se appen, men du ser fortsatt ikke visningen. For å se visningen, naviger til http: // localhost: 8100 / # / places. Nettadressen som er kartlagt i tilstandsdefinisjonen, kan brukes til å navigere til en rute. Det skal da vises som i det følgende bildet med tittelen satt til "Local Parks".
Dette er ikke for spennende ennå, men dette representerer den mest grunnleggende visningen som du sannsynligvis vil sette opp mesteparten av tiden. La oss nå jobbe med å laste inn data og vise det på skjermen.
Før vi kan gjøre mye annet, må vi laste inn noen data. For å gjøre dette må vi legge til en kantetjeneste for å hjelpe oss med å administrere geolocation. I en fremtidig opplæring vil en bruker bli lokalisert av enheten. Inntil da skal vi manuelt sette den til Chicago, en av mine favorittbyer.
Åpen www / js / app.js og legg til følgende tjeneste til slutten av filen. Det skal kjede med eksisterende metoder fra angular.module.
.fabrikk ("Geolocation", funksjon () return "formatted_address": "Chicago, IL, USA", "geometri": "location": "lat": 41.8781136, "lng": -87.6297982, " place_id ":" ChIJ7cv00DwsDogRAMDACa2m4K8 ";)Dette er en kantetjeneste som returnerer et objekt som samsvarer med hva Google Maps API gir tilbake til Chicago. Vi har nå detaljer for stedet slik at vi kan laste parker der.
Deretter skal vi oppdatere kontrolleren for å laste listen fra API. For enkelhets skyld laster jeg dataene med $ http service i kontrolleren. Den beste praksisen ville være å abstrahere det ut i en tjeneste. Åpen www / visninger / steder / places.js igjen og oppdater kontrolleren slik:
.controller ('PlacesController', funksjon ($ http, Geolocation) 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 = funksjonsbelastning () $ http.get (base) .then (funksjonshåndtakResponse (respons) vm.places = response.data.results;);; vm.load (););Kontrolleren har a vm.load () metode for å utføre HTTP-forespørselen og lagrer resultatene i vm.places. Når du lagrer dette, skal du se HTTP-forespørselen i verktøylinjen i nettleseren din. Selv om du er kjent med Angular, kan du ikke gjenkjenne denne nøyaktige tilnærmingen for lagring av data på vm variabel. Jeg anbefaler å vurdere John Papa's innlegg på hvorfor dette er en anbefalt tilnærming hvis du trenger litt klarhet.
For å vise dataene må vi også oppdatere malen og gå over listen over parker for å vise dem. Åpen www / visninger / steder / places.html og oppdater det som vist nedenfor.
![]()
stedsnavn
Place.formatted_address
I malen bruker vi ionList og ionItem komponenter. De ionList komponent er en av de mest nyttige komponentene fordi lister er et svært vanlig designvalg i mobil på grunn av mindre skjermer og typisk bruk i stående orientering. Mye som en liste med ul og li, ionList bryter inn et hvilket som helst antall ionItem elementer.
Lister kan adoptere en rekke forskjellige utseende, og i dette eksemplet viser listeposten et bilde til venstre ved å deklarere element-avatar klasse på ionItem. Den samme tilnærmingen kan brukes i en meldingsapp hvor du har en liste over chatter med en avatar for hver person.
Inne i ionItem, du viser navn og adresse. Standard styling er å automatisk avkorte (ved hjelp av CSS) en hvilken som helst tekst som overflyter for å holde gjenstander i samme høyde.
Vi har lagt inn en liste over parker og vist dem som en liste med ionList og ionItem. Vi kan ta dette et skritt videre og legge til uendelig rulling for å laste flere resultater når brukeren ruller nær slutten av listen (hvis de er tilgjengelige).
For å gjøre at listen automatisk laster inn flere elementer basert på brukeren ruller til bunnen, kan vi gjøre bruk av ionInfiniteScroll komponent. Denne komponenten er plassert på slutten av en liste, overvåker når brukeren har rullet til slutten, og deretter kaller en metode som kan laste flere elementer. Den har også en innebygd lastespinn for å indikere at flere elementer lastes. Spinneren er skjult når svaret løser.
Vår API må også støtte noen form for paginering for at dette skal fungere. I dette tilfellet gir Google Maps API et token som må sendes for å laste neste sett med resultater. Vi må oppdatere kontrolleren for å administrere denne logikken, så la oss starte med å oppdatere www / visninger / steder / places.js som vist under.
.controller ('PlacesController', funksjon ($ http, $ scope, 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 = []; 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 = response.data.next_page_token; hvis (! response.data.next_page_token) vm.canLoad = false; $ omfang. $ broadcast ('scroll.infiniteScrollComplete'););;);Vi har lagt til en ny eiendom, vm.canLoad, som er en boolsk som indikerer om det er flere elementer å laste. Dette er ekte som standard. Inntil en forespørsel returneres, vet vi ikke om det finnes flere elementer tilgjengelig.
De vm.load () Metoden er oppdatert for å legge til symbolet hvis tilgjengelig. Response Handler sammenkaller nå resultatene på matrisen. Dette betyr at den andre siden med resultater er lagt til etter den første siden. Google Maps API gir tilbake en next_page_token når som helst er det flere resultater som kan lastes inn. Hvis den egenskapen mangler, kan vi anta at det ikke er flere elementer å laste inn og vm.canLoad er satt til falsk. Den uendelige rullekomponenten bruker denne verdien til å bestemme når du skal slutte å laste flere elementer.
Den endelige endringen er tillegg av $ $ Kringkasting ( 'scroll.infiniteScrollComplete') omfang.. Den uendelige rulleskomponent har ingen kjennskap til når HTTP-forespørselen er fullført eller nøyaktig når den er lagret for å deaktivere lastesymbolet. Derfor lytter komponenten til hendelser for å oppdatere seg selv. I dette tilfellet er det scroll.infiniteScrollComplete hendelsen forteller komponenten for å stoppe spinneren og fortsett å se etter at brukeren ruller til bunnen.
Det endelige stykket er å aktivere dette i malen. Åpen www / visninger / steder / places.html og legg til linjen mellom slutten av ionList og ionContent komponenter.
Den uendelige rulleskomponent er nå aktivert i malen. Det begynner å se etter når komponenten er synlig, som også utløses ved belastning fordi ingen steder er synlige da, og den uendelige rulleskomponent er synlig. Den kaller metoden deklarert i på-uendelig en gang når det blir synlig (her er det vm.load ()), og venter til bla-fullførelsen er utløst.
De ngIf brukes til å deaktivere den uendelige rulle når API-en har returnert alle mulige resultater. I så fall utløser rullingen til bunnen ikke lenger belastningen med flere ressurser.
Når du bruker uendelig rulle, er det viktig å bruke en ngIf å deaktivere den. Det kan være enkelt å implementere komponenten på en slik måte at komponenten forsøker å laste og laste og aldri stopper.
Dette fullfører stedvisningen. Ser tilbake, det er ganske mye funksjonalitet aktivert av 12 linjer med HTML i malen og ca. 20 linjer med JavaScript i kontrolleren.
Vi har tatt en titt på en rekke komponenter, som du ofte bruker i dine joniske apps.
ionNavView og ionNavBar å støtte koordinert navigasjon med ulike visninger.ionList og ionItem Komponenter gjør det enkelt å bygge mobile, vennlige lister.ionInfiniteScroll komponent utløser automatisk et anrop for å laste flere elementer og legge dem til listen.Den neste opplæringen vil ta en titt på noen av de nyttige tjenestene som ionisk gir, for eksempel lasting av indikatorer og popovers.
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.
