Share
Ce veți creaÎn prima și a doua parte a acestei serii despre ionic, am creat o dezvoltare locală și am construit o serie de viziuni pentru a încărca o listă de parcuri utilizând câteva componente ionice, cum ar fi componente de bază de navigație și de listă. În acest tutorial, vom încerca să aflăm cum Ionic oferă un număr de servicii care vă permit să gestionați programatic aplicația și interfața.
Anterior, am demonstrat modul în care Ionic furnizează caracteristici interactive prin componente, care sunt folosite ca elemente HTML (implementate ca directive unghiulare). Cu toate acestea, există câteva elemente de interfață care nu au sens deoarece componentele au fost instanțiate cu HTML, cum ar fi un înveliș sau o foaie de acțiune.
Să începem să aruncăm o privire asupra rolului pe care serviciile îl joacă în aplicația dvs. Am identificat trei tipuri primare de servicii în Ionic:
Serviciile de componente permit utilizarea componentelor, dar în loc să utilizeze HTML pentru a le declara (așa cum am văzut cu ionNavBar) acestea sunt gestionate folosind JavaScript. Cu alte cuvinte, veți utiliza aceste componente adăugând codul controlerelor dvs. Vom folosi două dintre acestea în exemplul de mai jos.
Poate fi util să vă gândiți la aceste servicii ca și componente care au un ciclu de viață. De obicei, doriți ca acestea să se încarce într-un anumit punct și, după ce au terminat, să fie eliminate. De exemplu, $ ionicModal vă permite să creați un modal. Modalitățile au un ciclu de viață, sunt deschise și închise din motive specifice. S-ar putea să aveți un mod care cere utilizatorilor să se conecteze sau pot închide modelul pentru a sări peste acesta, completând ciclul de viață.
Unele componente au un serviciu delegat însoțitor care poate modifica sau gestiona componenta. Poate doriți să manipulați programatic o componentă după ce a fost creată și aceste servicii sunt proiectate pentru a face posibil acest lucru. Acestea sunt numite așa, deoarece delegă comportamentul la componentă.
ionNavBar componenta are un serviciu delegat numit $ ionicNavBarDelegate. Acest serviciu are mai multe metode, dar un exemplu este titlu() , care vă permite să actualizați titlul barei de navigare. Sfera caracteristicilor disponibile pentru fiecare serviciu delegat variază, dar ar trebui să fie ușor de identificat în documentație cu numele.
Ultima categorie sunt servicii care oferă un fel de funcționalitate de asistență sau furnizează informații. Sunt doar câteva dintre ele și nu se încadrează în celelalte două categorii. Câteva exemple sunt:
Accentsconagua
$ ionicPlatform: vă ajută să interacționați cu hardware-ul dispozitivului$ ionicGesture: vă permite să gestionați evenimentele de gest$ ionicPosition: vă spune locația elementelor de pe ecranAceste servicii de asistență au tendința de a vă ajuta să dezvoltați interacțiunea logică sau de manipulare. Ele nu generează și nu modifică componente pe cont propriu.
De asemenea, ne vom uita la câteva alte lucruri din acest tutorial:
În acest tutorial, vom extinde aplicația pe care am început-o în tutorialul anterior. Doar un memento, aplicația este concepută pentru a oferi utilizatorilor informații despre facilitățile publice locale, cum ar fi bibliotecile și parcurile. Aplicația afișează deja o listă de parcuri din Chicago și acum vom adăuga posibilitatea de a afișa indicatori de încărcare, vizualiza ecrane individuale detaliate ale parcului, deschideți un meniu de acțiune și implementați câteva caracteristici de partajare de bază.
Puteți vizualiza proiectul finalizat pe GitHub. Exemplul final este, de asemenea, disponibil pentru previzualizare.
Puteți descărca fișierele sau le puteți verifica folosind Git. După ce ai fișierele de pe mașină, trebuie să alergi npm install pentru a configura proiectul. Dacă verificați codul folosind funcția Git, puteți codifica dacă ați reseta repo-ul pentru a se potrivi în cazul în care ultima parte a fost terminată prin difuzare git checkout -b start. Odată ce aveți fișierele, porniți serverul Ionic rulând ionice.
În prezent, aplicația încarcă date și există un indicator de cerc mic din componenta de defilare infinită care se afișează până se încarcă. Cu toate acestea, de fapt, dorim să acoperim întreaga aplicație, astfel încât este foarte clar că aplicația se încarcă.
$ ionicLoading este foarte util să suprapuneți și să împiedicați utilizatorul să interacționeze cu aplicația până la încărcarea datelor. Este configurabil. De exemplu, puteți declara dacă o pictogramă de încărcare sau un text apare, dacă vreți sau nu fundalul sau dacă ar trebui să se ascundă automat după o anumită perioadă de timp. Puteți vedea încărcătorul în acțiune în imaginea de mai jos.
Deschis www / views / places.js pentru a face câteva modificări pentru a utiliza încărcătorul. În primul rând, trebuie să injectăm serviciul în controlorul nostru adăugând $ ionicLoading la parametrii funcției. Serviciul este destul de simplu, are doar două metode, spectacol() și ascunde(). Putem face încărcătorul să se afișeze și să se ascundă sunând la metodele pe care le vedeți aici în acest fragment.
.controlerul ('PlacesController', funcția ($ http, $ scope, $ ionicLoading, 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 = []; $ ionicLoading.show (); vm.load = funcția load () var url = base; if (token) url + = '& token =' + token; $ http.get (url) .then (handle handleResponse (răspuns) vm.places = vm.places. concatenat (răspuns.data.rezultate); token = answer.data.next_page_token; dacă (! answer.data.next_page_token) vm.canLoad = false; domeniul de aplicare $ broadcast ('scroll.infiniteScrollComplete'); $ ionicLoading. ascunde (););;); $ IonicLoading.show () metoda se numește imediat ce încărcătorul este încărcat, ceea ce înseamnă că se declanșează imediat. Acum trebuie să-i spunem încărcătorului să se ascundă după ce datele s-au terminat de încărcat după cum vedeți imediat după $ difuzare.
Puteți observa că $ IonicLoading.hide () metoda se numește de fiecare dată când sunt încărcate datele. Aceasta nu este o problemă. Deoarece încărcătorul este deja ascuns, acest apel nu are niciun efect.
Am implementat acum un serviciu ionic. Destul de simplu. Dreapta? Unele sunt mult mai complexe și vom lucra la un alt exemplu folosind foaia de acțiune. Înainte de a ajunge la acest lucru, totuși, dorim să extindem aplicația noastră pentru a avea două vederi atât pentru lista de note, cât și pentru a vedea o notă individual.
Următorul pas este să faceți o nouă vizualizare care va afișa mai multe detalii despre un anumit parc. Informațiile pot varia de la parc la parc, dar vom fi concentrate pe obținerea unei imagini, a unui site web, a unui telefon și a adresei. Rezultatele adăugării acestei vizualizări sunt afișate aici.
Pentru a crea o nouă vizualizare, creați un fișier la www / views / loc / place.js și includeți conținutul pe care îl vedeți mai jos. Acesta este controllerul și definiția de stat pentru loc vedere.
Înainte de a începe să se afișeze un fișier de tipul "placeController" loc / loc.html ", rezolvați: Place: funcția ($ http, $ stateParams) var url = 'https://civinfo-apis.herokuapp.com/civic/place?place_id=' + $ stateParams.place_id; returnați $ http.get (url););)) .controller ('PlaceController', funcție ($ scope, Place) var vm = aceasta; vm.place = Place.data.result;);Dacă te uiți la config () metodă, vedeți că declarăm un nou stat. Acesta este ui-router-ul în acțiune, deci ar trebui să consultați documentația ui-router-ului pentru toate detaliile despre stările de declarare.
Definiția obiectului arată că folosim o adresă URL de / Locuri /: place_id. Când vedeți o parte a adresei URL cu un colon în față, cum ar fi : place_id, marchează această parte a căii ca parametru de stat. Statul este capabil să extragă valoarea și să o furnizeze folosind $ stateParams obiect. De exemplu, / locuri / 12345 ar avea ca rezultat $ stateParams.place_id = '12345'.
Ați văzut alte părți ale definiției anterior, cu excepția rezolva proprietate. Aceasta este o caracteristică care vă permite să solicitați numeroase funcții care trebuie apelate înainte de crearea stării. Acceptă un obiect de valori cheie și funcționale, așa că avem aici Loc ca cheie și rezultatul funcției va fi atribuită acesteia.
În funcție, poate accepta parametrii de injectare, similar cu ceea ce puteți face cu un controler. Aici $ http și $ stateParams serviciile sunt injectate. Funcția utilizează apoi valoarea din place_id trecut prin adresa URL și construiește și returnează o cerere HTTP. Aceasta este, în esență, ceea ce se face în vizualizarea locurilor, cu excepția cazului în care controlerul o face.
Caracteristica de rezolvare este suficient de inteligentă pentru a determina că dacă veți reveni la o promisiune, va aștepta ca promisiunea să rezolve înainte de a crea statul. Cu alte cuvinte, $ Http.get () returnează o promisiune de a încărca datele și ui-ruterul așteaptă până când datele sunt disponibile înainte de a crea starea și de a trece Loc la controler. Caracteristica de rezolvare este destul de utilă pentru preîncărcarea datelor în aplicațiile dvs. și acesta este un exemplu destul de simplu de a le folosi.
Acum că avem statul definit, controlerul este declarat și atribuie datele rezultate din Loc (acest lucru a fost rezolvat în stat) vm.place. De asemenea, trebuie să facem șablonul nostru pentru această stare, așa că creați un fișier nou la www / opinii / loc / place.html și adăugați la el conținutul următor.
![]()
Acest șablon începe prin utilizarea funcției ionView pentru a împacheta conținutul, astfel încât sistemul de navigație ionic poate urmări în mod corespunzător acest lucru. De asemenea, atribuie un titlu bazat pe numele locului. ionContent wrap conține conținutul principal și veți observa că șablonul utilizează clase CSS în locul elementelor pentru a crea o componentă a cardului.
În partea anterioară, am vorbit despre modul în care unele componente sunt doar clase CSS. Cardul este un exemplu în acest sens. Conceptual, este ca o listă. Conținutul interior se situează vertical ca o listă, dar stilul pare mai mult ca un card. Aceasta folosește stilistii de carduri, care includ funcții cum ar fi suportul imaginilor, pictograme și alte structuri îngrijite prezentate în documentație.
Sunt cateva ngIf directivele utilizate deoarece nu există nici o garanție că datele returnate vor avea un număr de telefon sau un site web. ngIf directivă asigurați-vă că nu sunt afișate valori goale. De asemenea, utilizează ngHref sau ngSrc pentru a construi corect legături.
Veți observa, de asemenea, utilizarea tel: // protocol, care, atunci când este utilizat pe un telefon, ar trebui să solicite utilizatorului să sune numărul când îl selectează. Este o caracteristică la îndemână care este ușor de utilizat și se integrează frumos pe un dispozitiv fizic. Unele programe de pe computer, cum ar fi Skype, pot încerca, de asemenea, să se ocupe de efectuarea unui apel telefonic pentru dvs., în funcție de setările dvs..
Acest lucru ar trebui să ne dea o vedere de lucru, dar cum să navigăm la el? Va trebui să facem câteva modificări minore pentru a face munca de navigare din vizualizarea locațiilor.
Ui-router-ul oferă o Sref-ui directivă care este utilizată pentru a lega articolele de o altă stare. În acest caz, dorim ca fiecare element din lista de vizualizări a locațiilor să fie conectat la vizualizarea corespunzătoare locului.
Deschis www / opinii / locuri / places.html și adăugați directiva pentru a vă conecta la fiecare loc. Actualizați ionItem cu noul atribut aici.
Sref-ui directiva are un format în care puteți să vă conectați la alt stat cu numele său, nu prin intermediul unei adrese URL ca dvs. href. Acest lucru este util deoarece adresele URL se pot schimba. De asemenea, poate accepta parametrii de utilizat pentru a construi adresa URL și, în cazul nostru, dorim să trecem place.place_id proprietate. Sref-ui ia proprietățile ca obiect, deci nume-stare (param: value) este sintaxa.
Acum previzualizați aplicația și selectați un parc, acesta va naviga la noul loc vizualizați și puteți să vă uitați la bara de adrese pentru a vedea adresa URL adăugată a place_id valoare. Cu toate acestea, acum avem o problemă. Cum ne întoarcem la listă?
Noi folosim ionNavBackButton pentru a ne oferi un buton automat de spate. Deschis www / index.html și adăugați următorul fragment în interiorul ionNavBar. Acest lucru adaugă un buton din spate, care va fi afișat numai atunci când există un loc unde să vă întoarceți.
Înapoi
Navigarea lui Ionic este suficient de inteligentă pentru a urmări istoria în timp ce utilizați aplicația. Dacă există o viziune anterioară la care să reveniți, va afișa butonul din spate. Altfel, va fi pur și simplu ascuns.
De asemenea, dorim să afirmăm că vizualizarea locurilor nu ar trebui să afișeze niciodată butonul din spate, pe care îl putem adăuga hideBackButton directivă în www / opinii / locuri / places.html.
În timp ce dezvoltați și previzualizați în browser, uneori istoria devine resetată. De exemplu, când vă aflați în vizualizarea locației și salvați o modificare în editorul dvs., browserul se reîncarcă automat și resetează istoricul. În acest caz, butonul din spate nu apare așa cum era de așteptat. Puteți remedia această problemă prin revenirea în listă și actualizarea corectă a istoricului.
Am făcut progrese bune, dar acum, când atingeți un element din listă, așteaptă să treacă la noua vizualizare până când apelul API revine cu datele. S-ar putea să ți se pară rapid, dar uneori poate fi lent dacă API-ul este lent. Ar putea determina pe cineva să creadă că aplicația este blocată, încetinită sau că nu a înregistrat robinetul, deoarece nu a început imediat să reacționeze la robinet. Adresăm acest lucru cu câteva evenimente din ciclul de viață care ne ajută să înființăm un încărcător care să fie afișat în această perioadă.
Pentru a oferi o experiență mai bună pentru utilizatori, vom folosi $ ionicLoading serviciu pentru a suprapune aplicația în timp ce datele se încarcă pentru vizualizarea locației. Pentru a ști când să afișăm și să ascundem încărcătorul, folosim evenimentele ciclului de viață.
Aceste evenimente sunt declanșate în funcție de evenimentele de navigare, cum ar fi înainte sau după introducerea unei vizualizări sau înainte sau după părăsirea unei vizualizări. Puteți face orice s-ar putea solicita în aceste momente în timp, cum ar fi resetarea unor date sau, eventual, utilizarea acesteia pentru a trimite informații de utilizare.
Pentru ao demonstra, să adăugăm un ascultător de evenimente la vizualizarea locurilor care se ocupă cu declanșarea încărcătorului atunci când începeți să navigați la vizualizarea locului. Deschis www / views / Locuri / places.js și adăugați următoarele la controler. De asemenea, trebuie să vă asigurați că domeniul de aplicare $ este declarat în parametrii funcției controlerului, astfel încât acesta este disponibil.
$ scope ('$ ionicView.beforeLeave', funcția () $ ionicLoading.show (););Acesta este un ascultător al evenimentului, care ascultă pentru $ ionicView.beforeLeave eveniment (a se vedea evenimentele de aplicație unghiulară). Ionic transmite acest eveniment către controlorul dvs. și sună la funcția anonimă declarată aici. Această funcție numește simplu $ IonicLoading.show () pentru a activa încărcătorul.
Acest lucru declanșează încărcătorul să apară de îndată ce utilizatorul întrerupe un element. Acum adăugăm un fragment similar la vizualizarea locului care se ocupă cu ascunderea încărcătorului atunci când vizualizarea sa terminat. Deschis www / views / loc / place.js și adăugați următoarele la controler. Trebuie să adăugați ambele $ ionicLoading și domeniul de aplicare $ la parametrii funcției controlerului, deoarece acestea nu sunt injectate în prezent.
$ $ $ ('$ ionicView.afterEnter', funcția () $ ionicLoading.hide (););Aceasta ascultă pentru un eveniment diferit de domeniu care se declanșează când vizualizarea sa terminat și apelează funcția pentru a ascunde încărcătorul. Încărcătorul este afișat în momentul în care utilizatorul fixează un loc pentru vizualizare până când vizualizarea sa încărcat complet. Puteți încerca alte evenimente și puteți vedea când declanșează.
Ultimul lucru pe care îl facem în acest tutorial este crearea unui buton de partajare a foii de acțiune care vă permite să postați pe Twitter, pe Facebook sau prin e-mail și să partajați informațiile parcului.
Fișele de acțiune sunt destul de utile pentru furnizarea unei liste de opțiuni suplimentare. Intenția este de obicei pentru situațiile în care doriți să prezentați o listă de acțiuni care sunt grupate și, în exemplul nostru, este o listă cu modalitățile de partajare a informațiilor despre parc. Foaia de acțiune pe care o vom construi arată așa.
Serviciul de foi de lucru este un pic mai complex decât serviciul de încărcare, deoarece gestionează intrările de configurare și de utilizator. Deschis www / views / loc / place.js și adăugați această nouă metodă la controlerul dvs. De asemenea, trebuie să vă asigurați că $ ionicActionSheet este injectat în controlerul dvs..
vm.openSheet = function () var foaie = $ ionicActionSheet.show (titleText: 'Partajați acest loc', butoane: [text: : 'Trimiteți prin e-mail'], cancelText: 'Anulare', butonClicked: funcție (index) if (index === 0) window.open ('https://twitter.com/intent/tweet?text= '+ encodeURIComponent (' Am găsit acest loc minunat! '+ vm.place.url)); altceva dacă (index === 1) window.open (' https://www.facebook.com/sharer/sharer .php? u = '+ vm.place.url); altceva dacă (index === 2) window.open (' mailto:? subject = '+ encodeURIComponent (' & body = '+ vm.place.url); foaie ();); ; openSheet () metoda este responsabilă pentru crearea foii de acțiune. Face acest lucru prin apelare $ IonicActionSheet.show (), care returnează o funcție pe care sunt stocate foaie. Acest lucru vă permite să închideți foaia după terminarea ulterioară a apelului foaie(). spectacol() metoda ia un obiect cu un număr de proprietăți pe care le vom descompune. Există mai multe exemple de servicii ionice care urmează acest model, cum ar fi modals și popovers, astfel încât să puteți trata întotdeauna închiderea lor.
Fișa gestionează titlul folosind titleText proprietate și este de obicei folosit pentru a informa utilizatorul cum să folosească butoanele. cancelText proprietatea acceptă un șir care este folosit pentru a activa un buton de anulare. Dacă nu declarați acest lucru, nu va fi selectat niciun buton de anulare. De asemenea, puteți să anulați prin atingerea în fundal în afara butoanelor.
Pentru a declara butoanele pe care le utilizați butoane proprietate, care este o serie de obiecte care au o text proprietate. Ele sunt afișate în ordinea în care sunt declarate, deci sortați-le în consecință.
buttonClicked proprietatea are o funcție și trece indexul butonului care a fost selectat (așa cum a fost declarat în butoane). Prin urmare, vă puteți da seama ce trebuie să faceți în funcție de ce index este trecut. În această funcție, indexul este bifat și se deschide fie Facebook, Twitter, fie se folosește mailto: pentru a declanșa clientul de e-mail.
Poate deschide aceste link-uri în Facebook, Twitter sau aplicații de e-mail, în funcție de setările utilizatorului și probabil de dispozitivul, dar va deschide cel puțin linkurile din afara aplicației dvs. (într-un browser extern). Piesa finală este de a apela foaie() , care închide foaia de acțiune.
Foaia de acțiune este acum pregătită pentru acțiune, dar trebuie să adăugăm încă un buton pentru a declanșa foaia. Pentru a face acest lucru, adăugăm un buton de bare de navigare în vizualizarea locului care vă apelează vm.openSheet (). Deschis www / opinii / loc / place.html și adăugați ionNavButtons fragmentul dintre ionView și ionContent.
Aici este o altă caracteristică utilă de navigare ionică care vă permite să adăugați un buton de bare de navigare la o anumită vizualizare folosind ionNavButtons. Orice butoane din interior sunt adăugate în bara de navigare și puteți configura partea în care acestea apar.
În acest moment, totul funcționează. Utilizatorii pot deschide foaia de acțiune pentru a partaja parcul cu prietenii lor.
În acest tutorial, am acoperit serviciile ionice și modul în care sunt folosite. Pe parcurs, am descoperit o serie de alte caracteristici ionice:
$ ionicLoading este util să afișați și să ascundeți un indicator de încărcare în timp ce aplicația dvs. încarcă date sau trebuie să blocheze interfața utilizatorului.$ ionicActionSheet serviciul prezintă utilizatorului o listă de butoane care suprapune aplicația pentru a oferi acces facil la acțiuni importante.ionNavBackButton pentru a afișa automat un buton înapoi când este posibil să reveniți. ionNavButtons vă permite să adăugați butoane de bare de navigare la vizualizări specifice.În următoarea tranșă, vom explora și mai mult câteva dintre caracteristicile de navigație ale lui Ionic.
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.
