Share
Vad du ska skapaI denna handledning kommer vi att bygga vår första joniska app tillsammans och lära oss grunderna för joniska JavaScript-komponenter. Dessa komponenter ger din app enkel åtkomst till funktioner, till exempel navigations- och navigeringsfält, oändlig bläddring och listor. Om du inte har konfigurerat joniska eller behöver uppdatera hur du använder den joniska CLI kan du granska den första handledningen i denna serie.
Termen komponenter missbrukas något i frontend-utveckling, eftersom många ramverk har sin egen uppfattning som beskriver en komponent. I själva verket kan webbkomponenter som en officiell HTML-standard ytterligare komplicera konceptet, så låt oss tydligt definiera vad en komponent är i joniska.
I allmänhet är en komponent ett genomförande av en uppsättning funktioner som inkapslas av någon form av kodningskonvention. Med andra ord kan du tänka på en komponent som ett sätt att isolera en viss funktion från resten av programmet. Du kan tänka på hur i HTML finns olika typer av forminmatningar och var och en av dem är en typ av komponent som har specifika funktioner.
I ioniska finns det två typer av komponenter, CSS och JavaScript. CSS-komponenter implementeras som en uppsättning CSS-klasser som ändrar ett element för att ge det ett specifikt utseende, till exempel en rubrik.
JavaScript-komponenter implementeras tekniskt som vinkelföreskrifter och de används som HTML-element i applikationen. De ger en rikare uppsättning funktioner. Detta inkluderar vanligtvis möjligheten för användarna att interagera med det eller applikationen för att annars hantera komponenten. Flikar tillåter till exempel att innehåll visas eller döljs baserat på användaren väljer en flik.
I denna handledning kommer vi att fokusera på några av JavaScript-komponenterna. Senare i denna serie tar vi en närmare titt på CSS-komponenterna.
Ibland implementerar ikon en komponent som både en CSS och en JavaScript-komponent, till exempel flikkomponenten. Det betyder att du bestämmer vilken du ska använda. Jag rekommenderar generellt att välja JavaScript-implementering. I de flesta fall är överkostnaden för att använda JavaScript-komponenten försumbar och jag tror att de gör din kod lättare att arbeta med.
I den här handledningen kommer vi att skapa en app från början och vi fortsätter att förbättra appen i resten av denna serie. Förutsättningen för den här appen är att skapa en informationskampanj för medborgare som ger användarna information om sina lokala lokaler, till exempel bibliotek och parker.
I denna handledning börjar vi med att bygga en app som visar en lista över parker i Chicago och använder oändlig bläddring för att hålla resultat så länge de är tillgängliga. Vi kommer att expandera funktionens uppsättning av appen i nästa handledning.
Jag har skapat ett API som ger informationen som appen behöver. API: n är baserat på API-programmen för Google Maps. Du kan köra API själv, men det krävs att du får en anpassad API-nyckel från Google och instruktioner finns i API-projektet. Om det finns några problem med hjälp av det tillhandahållna API, som att någon missbrukar API: n och överskrider API-användningsgränserna, bör det vara en egen version som kör.
Du kan förhandsgranska den körbara appen på Heroku och se det färdiga projektet på GitHub. Jag uppmanar dock dig att följa med och bygga appen med mig.
Först måste du starta ett nytt projekt. Vi kan göra detta genom att springa följande kommando:
jonisk start civinfo https://github.com/ionic-in-action/starter
Detta laddar ner en startpaket som innehåller en tom jonisk mall för att få oss igång (byggd för användning med min bok Ionic in Action). Ange katalogen, cd civinfo, och springa jonisk tjäna.
Du kan nu förhandsgranska en tom app som laddas på http: // localhost: 8100 (eller på porten inställd av joniska). Jag rekommenderar att du öppnar utvecklarverktygen i din webbläsare för att bekräfta att du ser en tom skärm. Ja, det borde vara en vit skärm. Jag föreslår också att du använder Chrome Enhetsemulering medan du förhandsgranskar din app.
Navigation är så avgörande att vi bör börja med att designa vår app. De primära navigeringskomponenterna är ionNavBaroch ionNavView. De flesta appar har en designfunktion där det finns en navigeringsfält med olika titlar och åtgärdsknappar, och resten av området ägnas åt innehållet för den aktuella vyn.
De ionNavBaroch ionNavView Komponenter ger den funktionen med lite inbyggd intelligens för att hjälpa oss. Vår app kommer att ha flera rutter i slutet, men vi bygger bara en i denna handledning.
Joniska använder UI Router under huven för att hantera navigering och routing. Om du är bekant med det, känner du igen implementeringen i joniska. Det finns många nyanser, men vi håller det enkelt i den här handledningen. Den vanligaste och enkla användningen är att definiera var och en av de olika sidorna i din app som en stat, vilket är den joniska / UI Router sätt att definiera en viss vy.
För att komma igång börjar vi först de två navigeringskomponenterna in i www / index.html som du ser nedan, placerar den inuti kroppen.
När du har lagt till koden till index.html, du kan ladda appen igen och det bör visas en grön stapel längst upp i appen.
Du har definierat ionNavBar komponent som automatiskt visas längst upp på skärmen. Senare, när vi skapar enskilda visningar, kommer dessa åsikter att kunna skicka en titel och ytterligare knappar som ska visas. Det är smart nog att veta hur lång navigeringsfältet ska vara för olika enheter. Detta är inte konsekvent över plattformar, så det här är mycket användbart. Navigationsfältet ges en klass av bar-balanserad för att ge den en grön färg.
Då finns det ionNavView, vilken är platshållaren som gör innehållet för vart och ett av vyerna. När vi definierar en vy kommer den att göra den resulterande markeringen här och justeras automatiskt för att ta upp ledigt utrymme kvar efter att navigeringsfältet är placerat.
Navigeringskomponenterna är exempel på JavaScript-komponenter (även kända som Angular Directives). De ser ut som anpassade HTML-taggar och när de används tillsammans är de tillräckligt klara för att hålla titellinjen synkroniserad med den aktuella vyn och göra det rätta innehållet baserat på användarens navigationsval. För att se detta i åtgärd måste vi dock lägga till några stater. Låt oss börja med att göra vårt första tillstånd som visar en lista över parker.
Huvudsyftet med appen är att visa en lista över medborgerliga resurser. I början kommer det här att vara en lista över parker, men vi kommer att expandera det för att inkludera andra typer av resurser som bibliotek. Vi vill inkludera några funktioner i den här vyn:
Nu när vi har några mål för den här vyn, låt oss börja med att lägga till vår JavaScript-fil som registrerar den här vyn. Skapa en ny fil places.js på www / vyer / platser / och lägg till följande till det:
Accentsconagua
angular.module ('App') .config (funktion ($ stateProvider) $ stateProvider.state ('platser', url: '/ places', controller: 'PlacesController som vm', templateUrl: 'visningar / platser / platser .html ');) .controller (' PlacesController ', funktion () );Vi förklarar ett nytt tillstånd för UI Router med hjälp av $ StateProvider.state () metod. Detta är endast tillgängligt för att konfigureras inuti Angular's angular.config () metod. När du förklarar en stat, passerar du först en sträng för att namnge rutten, i det här fallet platser. Du skickar sedan ett objekt med olika egenskaper som definierar staten, till exempel en URL, en kontroller och en mall. Du kan titta på dokumentationen för UI Router för alla möjliga konfigurationsalternativ.
Vi har förklarat en ny stat, namngiven den platser, tilldelade den en URL till / platser, heter a kontrollant använder sig av controller som syntax och listade a templateUrl att ladda. Det här är en ganska vanlig tillståndsdefinition och du ser den användas på ungefär samma sätt med andra stater. Kontrollenheten som deklarerats här är tom, men vi kommer snart att lägga till det.
Denna mall är en viktig del av vyn och beskriver de visuella aspekterna av den vyn. De flesta visningslogiken och beteendet hanteras i kontrollern och mallen. Vår stat säger att vi vill ladda en HTML-fil till mallen, men vi har inte gjort en ännu. Låt oss fixa det genom att skapa en ny fil places.html på www / vyer / platser / och lägger till koden nedan.
Hittills i denna mall har vi förklarat ionView och ionContent komponenter. De ionView komponent är ett omslag som du placerar runt en mall som är avsedd att laddas in i ionNavView komponent vi förklarade tidigare. De vy-titel Attribut används också för att överföra titeln navigeringsfältet ska visa.
De ionContent komponent är ett användbart innehållsförpackning, vilket hjälper till att säkerställa att innehållsutrymmet är dimensionerat till tillgängligt skärmutrymme, hjälper till att skrolla och kan avslöja andra mindre vanliga beteenden. När den här vyn är laddad visas navigeringsfältets titel som "Lokala parker".
Nu måste vi se till att appen laddar skriptet som ska utföras genom att lägga till places.js till index.html som du ser nedan. Jag rekommenderar att du lägger till detta precis före märka.
Du kan visa appen, men du får fortfarande inte se vyn. För att se vyn, navigera till http: // localhost: 8100 / # / places. Webbadressen som är mappad i tillståndsdefinitionen kan användas för att navigera till en rutt. Det ska då visas som i följande bild med titeln som är inställd på "Lokala Parker".
Det här är inte alltför spännande än, men det här är den mest grundläggande uppfattningen som du förmodligen kommer att ställa upp mest av tiden. Låt oss nu arbeta med att ladda data och visa det på skärmen.
Innan vi kan göra mycket annat måste vi ladda vissa data. För att göra detta måste vi lägga till en vinkel tjänst för att hjälpa oss att hantera geolocation. I en framtida handledning kommer en användares plats att upptäckas av enheten. Fram till dess kommer vi att manuellt ställa in det till Chicago, en av mina favoritstäder.
Öppna www / js / app.js och lägg till följande tjänst i slutet av filen. Den bör kedja med befintliga metoder från angular.module.
.fabriks ("Geolocation", funktion () return "formatted_address": "Chicago, IL, USA", "geometri": "location": "lat": 41.8781136, "Lng": -87.6297982, place_id ":" ChIJ7cv00DwsDogRAMDACa2m4K8 ";)Detta är en Angular-tjänst som returnerar ett objekt som matchar vad Google Maps API returnerar för Chicago. Vi har nu detaljer för platsen så att vi kan ladda parker där.
Därefter kommer vi att uppdatera kontrollenheten för att ladda listan från API: n. För enkelhet laddar jag data med hjälp av $ http service i styrenheten. Den bästa praxisen skulle vara att abstrahera det ut i en tjänst. Öppna www / views / platser / places.js igen och uppdatera regulatorn så här:
.controller ('PlacesController', funktion ($ 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 = funktionsbelastning () $ http.get (bas) .then (funktionshandtagResponse (svar) vm.places = response.data.results;);; vm.load (););Kontrollenheten har a vm.load () metod för att utföra HTTP-förfrågan och lagrar resultaten i vm.places. När du sparar det här ser du HTTP-förfrågan i verktyget i din webbläsare. Även om du är bekant med Angular, kanske du inte känner igen denna exakta metod för lagring av data på vm variabel. Jag rekommenderar att du granskar John Pappas inlägg om varför det här är ett rekommenderat tillvägagångssätt om du behöver lite klarhet.
För att visa data måste vi uppdatera mallen också och gå över listan över parker för att visa dem. Öppna www / vyer / platser / places.html och uppdatera det enligt nedan.
![]()
Place.name
Place.formatted_address
I mallen använder vi ionList och ionItem komponenter. De ionList komponent är en av de mest användbara komponenterna eftersom listor är ett mycket vanligt designval i mobil på grund av mindre skärmar och typisk användning i stående orientering. Mycket som en lista med ul och li, ionList wraps något antal ionItem element.
Listor kan anta ett antal olika utseenden och i det här exemplet visar listobjektet en bild till vänster genom att deklarera post-avatar klass på ionItem. Samma tillvägagångssätt kan användas i en meddelandeprogram där du har en lista med chattar med en avatar för varje person.
Inuti ionItem, du visar namn och adress. Standard styling är att automatiskt avkorta (med CSS) någon text som överflödar för att hålla objekt i samma höjd.
Vi har laddat en lista över parker och visat dem som en lista med ionList och ionItem. Vi kan ta ett steg längre och lägga till oändlig bläddring för att ladda ytterligare resultat när användaren rullar nära slutet av listan (om de är tillgängliga).
För att få listan att automatiskt ladda ytterligare objekt baserat på användaren bläddrar till botten kan vi utnyttja ionInfiniteScroll komponent. Denna komponent placeras i slutet av en lista, tittar på när användaren har bläddrat till slutet och sedan ringer en metod som kan ladda ytterligare objekt. Det har också en inbyggd lastspinnare för att indikera att fler objekt laddas. Spinnaren är gömd när svaret löser sig.
Vårt API måste också stödja någon form av pagination för att detta ska fungera. I det här fallet tillhandahåller Google Maps API ett token som måste skickas för att ladda nästa uppsättning resultat. Vi behöver uppdatera regulatorn för att hantera denna logik så låt oss börja med uppdatering www / views / platser / places.js enligt nedanstående.
.controller ('PlacesController', funktion ($ http, $ scope, 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 = []; vm.load = funktionsbelastning () var url = bas; om (token) url + = '& token =' + token; $ http.get (url) .then (funktionshandtagResponse (svar) vm.places = vm.places.concat (response.data.results); token = response.data.next_page_token; om (! response.data.next_page_token) vm.canLoad = false; $ scope. $ broadcast ('scroll.infiniteScrollComplete'););;);Vi har lagt till en ny fastighet, vm.canLoad, vilket är en booleskt som indikerar om det finns ytterligare objekt att ladda. Detta är Sann som standard. Innan en begäran returneras vet vi inte om det finns ytterligare objekt tillgängliga.
De vm.load () Metoden är uppdaterad för att lägga till token om den är tillgänglig. Svarhanteraren sammanfattar nu resultaten på matrisen. Det betyder att den andra sidan med resultat läggs till efter första sidan. Google Maps API kommer att returnera en next_page_token när som helst finns det fler resultat som kan laddas. Om den här egenskapen saknas kan vi anta att det inte finns några fler objekt att ladda och vm.canLoad är satt till falsk. Den oändliga rullningskomponenten använder det här värdet för att bestämma när du ska sluta ladda nya objekt.
Den sista ändringen är tillägget av $ Omfattning. $ Sändning (scroll.infiniteScrollComplete). Den oändliga rullningskomponenten har ingen kännedom om när HTTP-förfrågan har slutförts eller exakt när det är spara för att inaktivera laddningssymbolen. Därför lyssnar komponenten på händelser för att uppdatera sig. I det här fallet scroll.infiniteScrollComplete händelsen berättar att komponenten stoppar spinnaren och fortsätter att titta på för att användaren bläddrar till botten.
Slutstycket är att aktivera detta i mallen. Öppna www / vyer / platser / places.html och lägg till raden mellan slutet av ionList och ionContent komponenter.
Den oändliga rullningskomponenten är nu aktiverad i din mall. Det börjar titta på när komponenten är synlig, vilken också utlöses på grund av att inga platser är synliga då och den oändliga rullningskomponenten är synlig. Det kallar metoden deklarerad i on-oändlig en gång när det blir synligt (här är det vm.load ()) och väntar tills bläddringshändelsen har blivit utlöst.
De ngIf används för att inaktivera den oändliga rullningen när API: n har returnerat alla möjliga resultat. I så fall tränger rullningen till botten inte längre belastningen med fler resurser.
När du använder oändlig rullning är det viktigt att använda en ngIf för att inaktivera det. Det kan vara enkelt att implementera komponenten på ett sådant sätt att komponenten försöker ladda och ladda och aldrig stannar.
Detta fyller i stället. Ser tillbaka, det finns en hel del funktionalitet aktiverad av 12 linjer HTML i mallen och cirka 20 rader med JavaScript i kontrollenheten.
Vi har tittat på ett antal komponenter, som du ofta använder i dina joniska appar.
ionNavView och ionNavBar att stödja samordnad navigering med olika åsikter.ionList och ionItem komponenter gör det enkelt att bygga mobila vänliga listor.ionInfiniteScroll komponenten utlöser automatiskt ett samtal för att ladda ytterligare objekt och lägga till dem i listan.Nästa handledning tar en titt på några användbara tjänster som joniska ger, till exempel laddning av indikatorer och popovers.
Om du redan är bekväm med det joniska ramverket, kanske du vill överväga att skriva in Envatos Most Wanted-tävling för joniska mallar. På vilket sätt? Skapa en unik jonisk mall och skicka den till Envato Market senast den 27 april 2016.
De fem bästa mallarna får $ 1000. Intresserad? Läs mer på tävlingens hemsida för detaljer om tävlingens krav och riktlinjer.
