Share
Ce veți creaÎn acest tutorial, vom construi împreună prima noastră aplicație ionică și vom învăța elementele de bază ale componentelor JavaScript ale lui Ionic. Aceste componente oferă aplicației dvs. acces ușor la funcții, cum ar fi barele de navigare și de navigare, parcurgerea infinită și liste. Dacă nu ați setat încă ionic sau nu trebuie să reîmprospătați cum să utilizați CLI-ul ionic, puteți consulta primul tutorial din această serie.
Componența termenului este oarecum abuzată în dezvoltarea frontendurilor, deoarece multe cadre au propria lor noțiune care descrie o componentă. De fapt, Web Components ca standard HTML oficial poate complica conceptul, deci să definim în mod clar ce este o componentă în ionic.
Într-un sens general, o componentă este o implementare a unui set de caracteristici care sunt încapsulate de o anumită formă de convenție de codare. Cu alte cuvinte, vă puteți gândi la o componentă ca pe o modalitate de a izola o particularitate din restul aplicației. Vă puteți gândi cum în HTML există diferite tipuri de intrări de formular și fiecare dintre ele este un tip de componentă care are caracteristici specifice.
În Ionic există două tipuri de componente, CSS și JavaScript. Componentele CSS sunt implementate ca un set de clase CSS care modifică un element pentru a da un aspect specific, cum ar fi o bară de antet.
Componentele JavaScript sunt implementate din punct de vedere tehnic ca directive unghiulare și sunt folosite ca elemente HTML în aplicație. Acestea oferă un set mai bogat de caracteristici. Aceasta include, de obicei, abilitatea utilizatorilor de a interacționa cu acesta sau cu aplicația pentru a gestiona în alt mod componenta. Tab-urile, de exemplu, permit ca conținutul să fie afișat sau ascuns în funcție de utilizatorul care selectează o filă.
În acest tutorial ne vom concentra pe unele dintre componentele JavaScript. Mai târziu, în această serie, ne uităm mai atent la componentele CSS.
Uneori, Ionic implementează o componentă atât ca o componentă CSS, cât și ca o componentă JavaScript, cum ar fi componenta filelor. Aceasta înseamnă că vă decideți ce să utilizați. În general, recomand să optez pentru implementarea JavaScript. În majoritatea cazurilor, cheltuielile aferente utilizării componentei JavaScript sunt neglijabile și cred că ele fac codul dvs. mai ușor de utilizat.
În acest tutorial, vom crea o aplicație de la zero și vom continua să îmbunătățim aplicația în restul seriei. Premisa acestei aplicații este crearea unei aplicații informative civice care să ofere utilizatorilor informații despre facilitățile locale, cum ar fi bibliotecile și parcurile.
În acest tutorial, începem prin a construi o aplicație care afișează o listă de parcuri din Chicago și utilizează parcurgerea infinită pentru a păstra rezultatele de încărcare atâta timp cât acestea sunt disponibile. Vom extinde setul de caracteristici al aplicației în următoarele tutoriale.
Am creat un API care oferă informațiile de care are nevoie aplicația. API se bazează pe API-urile Google Maps. Puteți rula singur API-ul, dar necesită obținerea unei chei API personalizate de la Google și instrucțiuni pot fi găsite în proiectul API. Dacă există probleme cu ajutorul API-ului furnizat, cum ar fi cineva abuză API-ul și depășește limitele de utilizare a API, executarea versiunii proprii ar trebui să ajute.
Puteți examina aplicația care rulează pe Heroku și puteți vizualiza proiectul finalizat pe GitHub. Cu toate acestea, vă încurajez să urmați și să construiți aplicația împreună cu mine.
În primul rând, trebuie să începeți un nou proiect. Putem face acest lucru executând următoarea comandă:
ionic start civinfo https://github.com/ionic-in-action/starter
Descărcați un pachet de pornire care include un șablon Ionic gol pentru a ne lansa (construit pentru utilizare cu cartea mea Ionic în acțiune). Introduceți directorul, cd civinfo, și fugi ionice.
Acum puteți previzualiza încărcarea unei aplicații goale la adresa http: // localhost: 8100 (sau pe portul setat de Ionic). Vă recomandăm să deschideți instrumentele de dezvoltare ale browserului dvs. pentru a confirma că vedeți un ecran gol. Da, ar trebui să fie un ecran alb. Vă recomandăm, de asemenea, să utilizați emularea de dispozitive Chrome în timp ce previzualizați aplicația.
Navigarea este atât de importantă încât ar trebui să începem aici cu proiectarea aplicației noastre. Principalele componente de navigație sunt ionNavBarși ionNavView. Majoritatea aplicațiilor au o caracteristică de proiectare în care există o bară de navigare cu diferite titluri și butoane de acțiune, iar restul zonei este dedicat conținutului pentru vizualizarea curentă.
ionNavBarși ionNavView componentele oferă funcționalitatea cu unele inteligente încorporate pentru a ne ajuta. Aplicația noastră va avea în cele din urmă mai multe rute, dar noi construim doar unul în acest tutorial.
Ionic folosește UI Router sub capotă pentru a gestiona navigația și rutarea. Dacă sunteți familiarizat cu aceasta, atunci recunoașteți implementarea în Ionic. Există o mulțime de nuanțe, dar o păstrăm simplu în acest tutorial. Cea mai obișnuită și mai simpluă utilizare este definirea fiecărei pagini diferite a aplicației ca a stat, care este modulul Router Ionic / UI pentru a defini o anumită viziune.
Pentru a ne începe, vom include mai întâi cele două componente de navigație www / index.html cum vedeți mai jos, plasându-l în interiorul corpului.
Odată ce ați adăugat codul index.html, puteți reîncărca aplicația și ar trebui să apară o bară verde care să apară în partea de sus a aplicației.
Ați definit ionNavBar , care apare automat în partea de sus a ecranului. Mai târziu, atunci când creați vederi individuale, acele vederi vor putea să transmită un titlu și alte butoane pentru afișare. Este suficient de inteligent pentru a ști cât de înalt ar trebui să fie bara de navigare pentru diferite dispozitive. Acest lucru nu este consecvent între platforme, deci acest lucru este foarte util. Bara de navigare are o clasă de bar echilibrat pentru a da o culoare verde.
Apoi există ionNavView, care este substituentul care face conținutul pentru fiecare dintre vizualizări. Odată ce definim o vizualizare, aceasta va face marcajul rezultat aici și se va ajusta automat pentru a prelua spațiul disponibil rămas după poziționarea barei de navigare.
Componentele de navigare sunt exemple de componente JavaScript (cunoscute și sub denumirea de directive angulare). Acestea arată ca etichete personalizate HTML și, atunci când sunt utilizate împreună, sunt suficient de inteligente pentru a menține bara de titlu în sincronizare cu vizualizarea curentă și pentru a redacta conținutul corect pe baza alegerilor de navigare ale utilizatorului. Pentru a vedea acest lucru în acțiune, totuși, trebuie să adăugăm unele state. Să începem prin a face prima noastră stare care afișează o listă de parcuri.
Scopul principal al aplicației este afișarea unei liste de resurse civice. Inițial, aceasta va fi o listă de parcuri, dar o vom extinde pentru a include și alte tipuri de resurse cum ar fi bibliotecile. Vrem să includem câteva caracteristici în această perspectivă:
Acum, că avem câteva obiective pentru această vizualizare, să începem cu adăugarea fișierului nostru JavaScript care va înregistra această vizualizare. Creați un fișier nou places.js la www / opinii / locuri / și adăugați următoarele:
Accentsconagua
$ stateProvider.state ('places', url: '/ places', controler: 'PlacesController as vm', templateUrl: 'views / places / places .html ');) .controller (' PlacesController ', funcția () );Declarăm o nouă stare pentru Routerul UI folosind $ StateProvider.state () metodă. Acest lucru este disponibil numai pentru a fi configurat în interiorul lui Angular angular.config () metodă. Când declarați o stare, mai întâi treceți un șir pentru a denumi traseul, în acest caz locuri. Apoi treceți un obiect cu diferite proprietăți care definesc starea, cum ar fi o adresă URL, un controler și un șablon. Puteți consulta documentația UI Router pentru toate opțiunile de configurare posibile.
Am declarat un nou stat, numit-o locuri, i-a atribuit o adresă URL / locuri, numit a controlor utilizând controler ca sintaxă și enumerate a templateUrl a încărca. Aceasta este o definiție destul de comună a statului și vă vedeți că este folosit în cea mai mare parte în același mod cu alte state. Controlorul declarat aici este gol, dar vom adăuga în curând.
Acest model este o parte esențială a viziunii și descrie aspectele vizuale ale acestei viziuni. Majoritatea logicii și comportamentului de vizualizare vor fi gestionate în controler și în șablon. Statul nostru declară că dorim să încărcăm un fișier HTML pentru șablon, dar nu l-am făcut încă. Să rezolvăm acest lucru prin crearea unui nou fișier places.html la www / opinii / locuri / și adăugând codul de mai jos.
Până acum, în acest șablon, am declarat ionView și ionContent componente. ionView componentă este o învelitoare pe care o plasați în jurul unui șablon care este destinat încărcării în ionNavView componentă pe care am declarat-o mai devreme. vedere din titlu atributul este de asemenea folosit pentru a trece titlul pe care ar trebui să îl afișeze bara de navigare.
ionContent componentă este un wrapper de conținut util, care vă ajută să vă asigurați că spațiul de conținut este dimensionat la spațiul disponibil al ecranului, ajută la gestionarea derulării și poate expune alte comportamente mai puțin frecvente. Când această vizualizare este încărcată, veți vedea titlul barei de navigare să apară ca "Parcuri locale".
Acum trebuie să vă asigurați că aplicația încarcă scriptul pentru a executa adăugând places.js la index.html cum vedeți mai jos. Vă recomandăm să adăugați acest drept în fața etichetă.
Puteți să vedeți aplicația, dar tot nu veți vedea afișarea. Pentru a vedea vizualizarea, navigați la http: // localhost: 8100 / # / places. URL-ul mapat în definiția de stare poate fi utilizat pentru a naviga la un traseu. Apoi ar trebui să apară ca în următoarea imagine cu titlul setat la "Local Parks".
Acest lucru nu este încă prea interesant, dar aceasta reprezintă cea mai elementară viziune pe care probabil o veți stabili de cele mai multe ori. Acum să lucrăm la încărcarea datelor și afișarea lor pe ecran.
Înainte de a putea face altceva, trebuie să încărcăm unele date. Pentru a face acest lucru, trebuie să adăugăm un serviciu Angular pentru a ne ajuta să gestionăm localizarea geografică. Într-un tutorial viitor, locația unui utilizator va fi detectată de dispozitiv. Până atunci, vom trece manual la Chicago, unul dintre orașele mele preferate.
Deschis www / js / app.js și adăugați următorul serviciu la sfârșitul fișierului. Ar trebui să fie lant cu metodele existente de la angular.module.
.fabrică ("Geolocation", funcția () return "formatted_address": "Chicago, IL, SUA", "geometrie": " place_id ":" ChIJ7cv00DwsDogRAMDACa2m4K8 ";)Acesta este un serviciu Angular care returnează un obiect care se potrivește cu ceea ce se întoarce API-ul Google Maps pentru Chicago. Acum avem detalii despre locație pentru a putea încărca parcurile acolo.
Apoi, vom actualiza controlerul pentru a încărca lista din API. Pentru simplitate, încarc datele folosind $ http service în controler. Cea mai bună practică ar fi aceea de a abstracționa într-un serviciu. Deschis www / views / Locuri / places.js din nou și actualizați controlerul astfel:
.controler ('PlacesController', funcție ($ http, Geolocation) var vm = aceasta; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocation.geometry.location (+), + Geolocation.geometry.location.lng; vm.places = []; vm.load = funcția load () $ http.get (base) .then (funcția handleResponse (răspuns) vm.places = response.data.results;);; vm.load (););Controlerul are a vm.load () metoda de executare a solicitării HTTP și stocarea rezultatelor vm.places. Când salvați acest lucru, trebuie să vedeți tragerea cererii HTTP în instrumentele de dezvoltare ale browserului dvs. Chiar dacă sunteți familiarizat cu Angular, este posibil să nu recunoașteți această abordare exactă pentru stocarea datelor pe vm variabil. Vă recomand să revizuiți postul lui John Papa cu privire la motivul pentru care aceasta este o abordare recomandată dacă aveți nevoie de claritate.
Pentru a afișa datele, trebuie să actualizăm și șablonul și bucla din lista parcurilor pentru a le afișa. Deschis www / opinii / locuri / places.html și actualizați-o după cum se arată mai jos.
![]()
numele locului
Place.formatted_address
În șablon, folosim ionList și ionItem componente. ionList componenta este una dintre cele mai utile componente, deoarece listele sunt o alegere foarte des intalnita in designul mobil din cauza ecranelor mai mici si a utilizarii tipice in orientare portret. La fel ca o listă folosind ul și Li, ionList împachetează orice număr ionItem element.
Listele pot adopta o serie de apariții diferite, iar în acest exemplu elementul de listă afișează o imagine spre stânga declarând item-avatar clasa pe ionItem. Aceeași abordare ar putea fi utilizată într-o aplicație de mesagerie în care aveți o listă de chaturi cu un avatar de fiecare persoană.
În interiorul ionItem, afișați numele și adresa. Stingerea implicită este de a trunchia automat (folosind CSS) orice text care depășește pentru a păstra elementele la aceeași înălțime.
Am încărcat o listă de parcuri și le-am afișat ca o listă folosind ionList și ionItem. Putem face un pas mai departe și adăugăm derularea infinită pentru a încărca rezultate suplimentare pe măsură ce utilizatorul scroll lângă sfârșitul listei (dacă acestea sunt disponibile).
Pentru ca lista să încarce automat elementele suplimentare în funcție de utilizatorul derulat în partea de jos, putem folosi ionInfiniteScroll componentă. Această componentă este plasată la sfârșitul listei, urmărește când utilizatorul a derulat până la capăt și apoi apelează o metodă care poate încărca elemente suplimentare. De asemenea, are un dispozitiv de încărcare încorporat pentru a indica faptul că se încarcă mai multe elemente. Spinătorul este ascuns când răspunsul se rezolvă.
API-ul nostru trebuie, de asemenea, să sprijine o anumită formă de paginare pentru ca aceasta să funcționeze. În acest caz, API-ul Google Maps oferă un jeton care trebuie să fie trecut pentru a încărca următorul set de rezultate. Trebuie să actualizăm controlerul pentru a gestiona această logică, astfel încât să începem cu actualizarea www / views / Locuri / places.js așa cum se arată mai jos.
.controler ('PlacesController', funcție ($ http, $ scope, Geolocation) var vm = această; var base = 'https://civinfo-apis.herokuapp.com/civic/places?type=park&location=' + Geolocație. geometria.location.lat + ',' + Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = []; vm.load = funcția de încărcare () var url = base; dacă (token) url + = 'și token =' + token; $ http.get (url) .then (handle handleResponse (răspuns) vm.places = vm.places.concat (answer.data.results) = answer.data.next_page_token; dacă (! response.data.next_page_token) vm.canLoad = false; $ scope. $ broadcast ('scroll.infiniteScrollComplete'););;);Am adăugat o proprietate nouă, vm.canLoad, care este un boolean care indică dacă există elemente suplimentare de încărcat. Aceasta este Adevărat în mod implicit. Până la returnarea unei cereri, nu știm dacă există elemente suplimentare disponibile.
vm.load () metoda este actualizată pentru a adăuga jetonul, dacă este disponibil. Managerul de răspuns acum concatenează rezultatele pe matrice. Aceasta înseamnă că a doua pagină de rezultate este adăugată după prima pagină. API-ul Google Maps va returna a next_page_token oricând există mai multe rezultate care pot fi încărcate. Dacă această proprietate lipsește, putem presupune că nu mai există elemente de încărcat și vm.canLoad este setat sa fals. Componenta de derulare infinită utilizează această valoare pentru a determina momentul în care opriți încărcarea mai multor elemente.
Modificarea finală este adăugarea $ Domeniul de aplicare. $ Difuzare ( 'scroll.infiniteScrollComplete'). Componenta de derulare infinită nu are cunoștință de momentul când cererea HTTP a terminat sau exact când este salvată pentru a dezactiva simbolul de încărcare. Prin urmare, componenta ascultă ca evenimentele să se actualizeze. În acest caz, scroll.infiniteScrollComplete evenimentul îi spune componentei să oprească spinner-ul și să continue să vizioneze ghidul de derulare în partea de jos.
Piesa finală este de a permite acest lucru în șablon. Deschis www / opinii / locuri / places.html și adăugați linia dintre sfârșitul ionList și ionContent componente.
Componenta de derulare infinită este acum activată în șablonul dvs. Începe să urmărească când componenta este vizibilă, care este declanșată și pe sarcină, deoarece nu sunt vizibile locuri și atunci când este vizibilă componenta de defilare infinită. Se numește metoda declarată în la-infinit o dată când devine vizibilă (aici este vm.load ()) și așteaptă până când evenimentul complet de derulare a fost declanșat.
ngIf este utilizat pentru a dezactiva parcurgerea infinită după ce API a returnat toate rezultatele posibile. În acest caz, derularea către partea inferioară nu mai declanșează încărcarea a mai multor resurse.
Când utilizați parcurgerea infinită, este important să utilizați un ngIf pentru ao dezactiva. Poate fi ușor de implementat componenta astfel încât componenta încearcă să se încarce și să se încarce și nu se oprește niciodată.
Aceasta finalizează vizualizarea locurilor. Privind înapoi, există destul de puțină funcționalitate activată de 12 linii de HTML în șablon și aproximativ 20 de linii de JavaScript în controler.
Am analizat o serie de componente, pe care le veți folosi frecvent în aplicațiile dvs. ionice.
ionNavView și ionNavBar pentru a sprijini navigarea coordonată cu vizionări diferite.ionList și ionItem componente ușurează crearea listelor mobile prietenoase.ionInfiniteScroll componentă declanșează automat un apel pentru a încărca elementele suplimentare și a le adăuga în listă.Următorul tutorial va arunca o privire asupra unora dintre serviciile utile pe care Ionic le oferă, cum ar fi indicatorii de încărcare și popovers.
Dacă sunteți deja confortabil cu cadrul ionic, atunci vă recomandăm să luați în considerare intrarea în concursul Envato's Most Wanted pentru șabloanele ionice. Cum? Creați un șablon Ionic unic și îl trimiteți la Envato Market până la 27 aprilie 2016.
Cele cinci cele mai bune șabloane primesc 1000 $. Interesat? Citiți mai multe pe site-ul concursului pentru detalii despre cerințele și recomandările concursului.
