Share
Ce veți creaAm acoperit deja destul de mult în această serie, inclusiv navigația. Cu toate acestea, Ionic oferă câteva componente care oferă caracteristici suplimentare pentru construirea navigației mai funcționale. În acest tutorial, adăugăm meniul lateral și componentele filelor în aplicație și analizăm și câteva servicii suplimentare pentru a face navigarea mai inteligentă a aplicației noastre.
Fișierele de proiect tutorial sunt disponibile pe GitHub. Premisa generală a aplicației este că ea prezintă câteva informații despre facilitățile locale. În acest tutorial, adăugăm capacitatea de a afișa biblioteci, muzee, parcuri și spitale. În prezent, afișează numai locații în Chicago, lucru pe care îl rezolvăm în următorul tutorial.
Puteți descărca proiectul finalizat pentru acest tutorial de la GitHub la. Dacă clonați proiectul, puteți, de asemenea, să codificați folosind Git și să rulați git checkout -b start. Exemplul final este, de asemenea, disponibil pentru previzualizare.
Rețineți că am eliminat rezolvarea din vizualizarea locului pe care am avut-o în cea de-a treia parte a acestei serii. Nu vreau să o acoperim în profunzime, dar controlerul încarcă datele acum și face navigarea noastră mai simplă.
Unul dintre cele mai frecvente modele de navigație din aplicațiile mobile este un meniu lateral. Acesta este un sertar care se strecoare din lateral și expune legăturile de navigare și poate un alt conținut, cum ar fi starea actuală de conectare. Prin design, ele sunt off-screen și sunt deschise de un buton, adesea pictograma hamburger, chiar dacă oamenii nu sunt de acord cu utilizarea acestei pictograme.
Meniurile laterale sunt adesea capabile să fie deschise prin rotirea din lateral pentru ao trage sau deschide glisa înapoi pentru al împinge. Acest lucru poate fi la îndemână, dar uneori poate împiedica alte gesturi și trebuie să țineți cont de comportamentele conflictuale. Ar trebui să țineți cont de cea mai bună utilizare a jocului cu toată viziunea și experiența aplicației dvs. în minte și, dacă există o problemă, o puteți dezactiva.
Ionic oferă o serie de componente care fac banale crearea unui meniu lateral. Puteți crea până la două meniuri laterale, una în partea dreaptă și una în partea stângă. Un meniu lateral cuprinde mai multe componente, ionSideMenus, ionSideMenu, și ionSideMenuContent.
Pentru a vedea acest lucru în acțiune, să actualizăm www / index.html și configurați un meniu lateral. Veți înlocui conținutul existent cu codul de mai jos, care adaugă componentele din meniul lateral în jurul codului nostru existent.
Civinfo
Locuri Setări Înapoi
Pentru a activa un meniu lateral, începem să împachetăm conținutul aplicației noastre ionSideMenus. Acesta permite Ionicului să coordoneze meniul lateral și zonele de conținut. Apoi avem un ionSideMenu cu side = "stânga" atribut pentru a desemna partea pe care o ocupă.
În meniul lateral, putem pune orice conținut dorim. În acest caz, și probabil cel mai frecvent scenariu, conținutul este unul ionHeaderBar componenta și an ionList componenta pentru a face titlul aplicației și o listă de linkuri respectiv. Nu am definit încă vizualizarea de setări, astfel încât linkul să nu funcționeze momentan. De asemenea, rețineți că ionItem componentele au a meniu close atribut. Aceasta închide automat meniul lateral atunci când un utilizator face clic pe link, în caz contrar rămâne deschis.
ionSideMenuContent componenta este utilizată pentru a conține zona de conținut primar. Această zonă de conținut ocupă întregul ecran, dar această componentă ajută doar la redarea corespunzătoare a componentei din meniul lateral. Am folosit de asemenea drag-content = "false" atribuiți pentru a dezactiva gesturile de tragere, deoarece acestea vor interfera cu lista de defilare și cu filele.
De asemenea, am adăugat un nou buton la bara de navigare utilizând ionNavButtons. Aceasta este pictograma din meniul lateral care apare în partea dreaptă sus drept trei linii stivuite. Acest buton are funcția meniul de comutare = „left“ , care declanșează meniul din stânga pentru a comuta la selectare.
Acum, dacă meniul nostru lateral este în vigoare, să lucrăm la configurarea următoarei componente importante pentru navigație prin adăugarea filelor pentru vizualizarea setărilor.
Tab-urile sunt un alt model de navigare obișnuit pentru navigarea pe o aplicație. Tab-urile sunt ușor de înțeles, deoarece le vedem în atât de multe tipuri de interfețe, nu doar aplicații mobile.
Taburile pot fi statale sau apatride. O filă care afișează conținut care nu păstrează o memorie a oricăror modificări este apatridă, în timp ce o filă care menține o stare bazată pe interacțiunea utilizatorului este statală (de exemplu persistând un rezultat al căutării). Ne uităm cum să construim filele statale cu ioni, deoarece sunt mai complexe și mai puternice.
Configurarea filelor este destul de ușoară cu ionTabs și ionTab componente. La fel ca și meniurile laterale, puneți cât mai multe componente ale tab-urilor în interior. Nu există nici o limită greu, dar eu găsesc cinci este un maxim sănătos. Pe dispozitivele mai mici, prea multe pictograme fac dificilă selectarea unei file.
Vom configura setările făcând câteva fișiere noi. Mai întâi, să setăm șablonul creând un fișier nou la www / opinii / Setări / settings.html. Adăugați următorul cod în noul fișier.
ionTabs componentă este folosit pentru a înveli interior ionTab componente. Există mai multe clase care pot defini modul în care apar filele, cum ar fi plasarea filelor în partea de sus sau în partea de sus, utilizând pictogramele cu sau fără titluri și multe altele. Aici am decis să folosim filele care au un titlu cu pictograma din partea de sus cu presetări de culoare stabile.
ionTab componenta are un număr de atribute care pot fi folosite pentru a defini comportamentul său. Acesta acceptă multe funcții, cum ar fi afișarea unei insigne mici de notificare, conectarea filelor la stări, comportamentul icoanelor și multe altele. Pentru filele noastre, fiecare are a titlu, o clasă de pictograme pentru momentul în care fila este activă (icon-on) sau inactiv (icon-off) și legături către un stat care utilizează Sref-ui.
În fiecare filă este alta ionNavView. Acest lucru poate părea în afara locului, deoarece avem deja unul ionNavView înființat în index.html. Ceea ce facem este să declarăm locații suplimentare pe care o stare poate fi redată, care pot fi considerate drept vederi copilului.
Fiecare filă este capabilă să aibă propriul său istoric de navigație, deoarece fiecare ionNavView este independent de ceilalți. Fiecare filă are, de asemenea, un nume unic, care va fi util, astfel încât să putem defini anumite stări care să apară în denumire ionNavView.
S-ar putea să fi observat că nu există ionView element pe această pagină și care este important de notat când se utilizează filele statale. Nu este necesar atunci când utilizați ionTabs în acest fel, dacă utilizați filele fără stat, versiunea CSS, veți avea nevoie de ele.
acum trebuie să stabilim câteva state suplimentare pentru a face acest exemplu funcțional. Creați un alt fișier la www / views / settings / settings.js și adăugați codul următor.
Accentsconagua
angular.module ( 'App') .config (funcția ($ stateProvider, $ urlRouterProvider) $ stateProvider.state ( 'Setări' URL: '/ Setări', abstract: true, templateUrl: „vizualizări / setări / setări. html ') .state ( 'settings.about'url: '/ despre', vizualizări: despre: templateUrl: 'vizualizări / setările / tab.about.html') .state (' setări. licență“, url: '/ licență', vizualizări: despre: templateUrl: 'vizualizări / setări / tab.license.html') .state ( 'settings.preferences', URL: '/' preferințele , vizualizări: preferințele: controlor: 'PreferencesController', controllerAs: 'vm', templateUrl: 'vizualizări / setările / tab.preferences.html'); $ urlRouterProvider.when ( '/ setările', „/ setări / preferences ');) .controller (' PreferencesController ', funcția (Types) var vm = this; vm.types = Types;);Puteți vedea că noi înființăm câteva state noi, dar acestea par diferite de alte state pe care le-am definit până acum. Primul stat este o stare abstractă, care este, în esență, un stat care nu poate fi încarcat în mod direct pe cont propriu și are copii. Acest lucru are sens pentru noi cu interfața tab-uri, deoarece setări statul încarcă șablonul componentelor filelor, dar utilizatorii nu se află niciodată doar pe componenta filelor. Ele vizionează întotdeauna fila activă, care conține o altă stare. Așadar, folosirea abstractului ne dă această capacitate de a face aceste lucruri în mod corespunzător.
Celelalte trei state sunt definite ca setări. [nume]. Acest lucru ne permite să definim relația părinte-copil între aceste stări, care reflectă în esență relația părinte-copil a ionTabs și ionTab componente. Aceste stări utilizează proprietatea de vizualizare, care este un obiect cu o proprietate denumită pentru vizualizare.
Numele pe care îl dați în șablon cu ionNavView ar trebui să se potrivească cu numele proprietății. Valoarea acelei proprietăți este atunci aceeași definiție de stat, fără URL-ul care a fost declarată în mod obișnuit. URL-ul urmează de asemenea relația părinte-copil prin combinarea celor două. Deci, toate aceste stări de copii se comportă / setări / preferințe.
Trebuie să adăugați settings.js la index.html utilizând o altă etichetă de script. Odată ce ați făcut acest lucru, veți vedea unele erori deoarece facem referire la un număr de fișiere pe care nu le-am creat încă. Să terminăm cu șabloanele filelor.
Trebuie să creăm trei. Primele două sunt conținut static, așa că nu voi trece peste ele în detaliu. Creați un fișier la www / opinii / Setări / tab.about.html și adăugați la el conținutul următor.
Proiect pe GitHub
Faceți clic pentru a vizualiza proiectul
Licență
Vedeți licența completă
Acesta conține un șablon care afișează câteva informații. Acesta face legătura cu proiectul GitHub și cu licența. Asa arata.
Creați un alt fișier la www / opinii / Setări / tab.license.html și adăugați la el conținutul următor.
Drepturi de autor (c) 2016 Jeremy Wilken
Permisiunea este acordată gratuit tuturor persoanelor care obțin o copie a acestui software și a fișierelor de documentație asociate ("Software"), pentru a trata Software-ul fără restricții, incluzând, fără limitare, drepturile de utilizare, copiere, modificare, îmbinare , să publicați, să distribuiți, să sublicenți și / sau să vindeți copii ale Software-ului și să permiteți persoanelor cărora le este furnizat Software-ul să facă acest lucru, sub rezerva următoarelor condiții:
Notificarea privind drepturile de autor de mai sus și acest aviz de permisiune vor fi incluse în toate exemplarele sau părți substanțiale ale Software-ului.
SOFTWARE-UL ESTE OFERIT „CA ATARE“, FĂRĂ NICI UN FEL DE GARANȚIE, EXPLICITE SAU IMPLICITE, INCLUSIV, DAR FĂRĂ A SE LIMITA LA GARANȚII DE COMERCIALIZARE, POTRIVIRE PENTRU UN ANUMIT SCOP ȘI NEÎNCĂLCARE. ÎN NICI UN CAZ AUTORII SAU DEȚINĂTORII DREPTURILOR DE AUTOR NU VOR FI RESPONSABILI PENTRU ORICE REVENDICARE, DAUNE SAU DATORIE, FIE ÎN CONTRACT, PREJUDICIU SAU ALTFEL, DECURGE SAU ÎN LEGĂTURĂ CU SOFTWARE-UL SAU UTILIZAREA SAU ALTE TRANZACȚII CARE SOFTWARE.
Acesta conține conținutul de licență (MIT) pentru acest cod. Există o carte simplă care conține conținutul. Asa arata.
Șablonul final conține câteva elemente de formă. Voi trece mai departe în detaliu. Creați un fișier nou la www / opinii / Setări / tab.preferences.html și adăugați la el conținutul următor.
- Tipuri de locații
- Type.type
Această vizualizare conține o listă de comutări care afișează cele patru tipuri de locații pe care aplicația le poate afișa, muzeu, parc, bibliotecă și spital. Fiecare dintre aceste elemente de listă vă permite să activați sau să dezactivați un tip de loc din listă. Butonul de comutare este o componentă CSS. Trebuie doar să folosim o intrare din caseta de selectare cu acest markup specific și structura de clasă CSS pentru a le face să apară ca butoane de comutare mobile.
Această vizualizare are un controler declarat în settings.js, dar injectează a Tipuri serviciu pe care nu l-am creat încă. Vom remedia acest lucru prin adăugarea unui nou serviciu la www / js / app.js.
.fabrică ("Tipuri", funcție () returnează type: 'Park', activ: true : "Muzeu", activat: true];)Acest serviciu deține o serie de tipuri de locații. Are o proprietate pentru numele fiecărui tip de locație și dacă este activat sau dezactivat. Utilizăm proprietatea activată în butonul de comutare ngModel pentru a urmări starea dacă acest tip trebuie afișat.
În acest moment, puteți deschide meniul lateral și navigați la link-ul de setări. Puteți vedea cele două file, preferințe și altele. În fila Preferințe, puteți să activați sau să dezactivați tipurile de locații.
Dacă accesați fila Despre, puteți selecta licența pentru a vedea cum navighează către un alt traseu din fila. Dacă treceți între preferințe și fila după vizionarea licenței, puteți vedea că fila își amintește că sunteți în starea licenței chiar și după ce ați plecat, demonstrând caracterul statornic al acestor file.
Ultimul pas al acestui tutorial este să actualizați vizualizarea locațiilor pentru a utiliza Tipuri serviciu pentru a încărca numai tipurile de locuri dorite și pentru a utiliza serviciul de istorie pentru a gestiona momentul în care să reîncărcați sau să utilizați memoria cache.
Implicit, Ionic cache ultimele 10 de vizualizări și le păstrează în memorie. Multe aplicații ar putea să nu aibă chiar atâtea stări, ceea ce înseamnă că întreaga dvs. aplicație ar putea rămâne în memorie. Acest lucru este util pentru că înseamnă că ionicul nu trebuie să redea vederea înainte de a naviga, ceea ce accelerează aplicația.
Acest lucru poate cauza unele probleme comportamentale, deoarece s-ar putea să credeți că stările dvs. întotdeauna reîncărcați și reinitializați controlerul oricând se accesează statul. Din moment ce doar 10 vizualizări sunt stocate în cache, dacă aveți 20 de vizualizări, numai ultimele 10 vor fi în memoria cache. Aceasta înseamnă că nu puteți garanta că o vizualizare se află în cache sau nu. Deci, ar trebui să evitați să efectuați logica de configurare în controlorii dvs. în afara cârligelor ciclului de viață. De asemenea, puteți configura strategiile de cache folosind $ ionicConfigProvider.
Uneori trebuie să te uiți la istoricul navigației utilizatorului pentru a determina ce trebuie să faci. De exemplu, în această aplicație, dorim să păstrăm lista locurilor stocate în cache dacă utilizatorul se fixează într-un loc și apoi revine înapoi în listă. Dacă am reînnoi automat lista la fiecare vizită, utilizatorii ar putea să își piardă locul în listă după ce au derulat și au vizualizat un loc.
Pe de altă parte, dacă un utilizator navighează la pagina de setări și apoi înapoi la lista de locații, dorim să reîmprospătăm lista, deoarece s-ar putea să fi schimbat tipurile de locuri pe care doresc să le afișeze.
Vom folosi o combinație a evenimentelor din ciclul de viață pe care le-am analizat anterior cu $ ionicHistory serviciu pentru a adăuga o anumită logică care va ajuta la determinarea momentului în care starea locurilor ar trebui să reîncarce lista. De asemenea, dorim să folosim Tipuri serviciu pentru a ne ajuta să încărcăm doar tipurile de locuri pe care utilizatorul dorește să le vadă.
Deschis www / views / Locuri / places.js și actualizați-l pentru a se potrivi cu următorul cod. Trebuie să schimbăm modul în care sunt încărcate datele și să le folosim $ ionicHistory serviciu pentru a inspecta istoricul pentru a determina momentul în care trebuie să reîncărcați.
$ stateProvider.state ('places', url: '/ places', controler: 'PlacesController as vm', templateUrl: 'views / places / places .html ');) .controller (' PlacesController ', funcție ($ http, $ scope, $ ionicLoading, $ ionicHistory, Geolocation, Types) var vm = this; var base =' https: // civinfo-apis .herokuapp.com / civic / places? location = '+ Geolocation.geometry.location.lat +', '+ Geolocation.geometry.location.lng; var token = "; vm.canLoad = true; vm.places = [] ; vm.load = funcția de încărcare () $ ionicLoading.show (); var url = base; var interogare = []; angular.forEach (Tipuri, functie (tip) if (type.enabled === true) interogare ();; url + = '& interogare =' + interogare.join ('|'); if (token) url + = '& token =' + token; $ http.get (url) .then (funcția handleResponse (răspuns) vm.places = vm.places.concat (answer.data.results); token = answer.data.next_page_token; dacă (! response.data.next_page_token) vm.canLoad = false; domeniul de aplicare $ difuzare ( 'scroll.infiniteScrollComplete'); $ IonicLoading.hide (); ); ; $ ('$ ionicView.beforeEnter', funcția () var precedent = $ ionicHistory.forwardView (); dacă (! precedent || precedent.stateName! = 'loc') token = "; vm.canLoad = false; vm.places = []; vm.load ();););În primul rând, am modificat modul în care adresa URL este construită pentru API-ul nostru pentru a schimba de la încărcarea parcurilor doar la încărcarea tipurilor solicitate. Dacă comparați această versiune cu versiunea anterioară, se utilizează în primul rând angular.forEach pentru a bifa peste fiecare tip și a adăuga-o la adresa URL.
De asemenea, am modificat modul în care $ ionicLoading serviciul se comportă. În loc să rulați imediat când controlerul rulează inițial, îl declanșăm oricând vm.load () se numește metoda. Acest lucru este important deoarece controlerul va fi stocat în cache și nu va reîncărca datele în mod implicit.
Cea mai mare schimbare este $ ionicView.beforeEnter modul de gestionare a evenimentului ciclului de viață. Acest eveniment se declanșează înainte ca vizualizarea să devină următoarea vedere activă și ne permite să facem o anumită configurare. Noi folosim $ IonicHistory.forwardView () pentru a obține informații despre ultima vizualizare pe care a fost utilizatorul.
Dacă este prima încărcare, atunci aceasta va fi goală, altfel returnează unele date despre ultima stare. Apoi, verificăm dacă starea anterioară a fost starea locului și, dacă da, folosim lista de rezultate memorată în cache. De asemenea, având în vedere că avem mai puțin de zece state, știm că statul va fi întotdeauna ținut în memorie.
În caz contrar, va reseta valorile memorate și va declanșa o încărcare nouă de date. Aceasta înseamnă că oricând mă întorc la vizualizarea locurilor după ce am accesat setările, acesta va reîncărca datele. În funcție de designul aplicației dvs., probabil că veți dori să creați diferite reguli condiționale pentru modul de gestionare a memorării în cache și a reîncărcării.
Serviciul de istorie oferă mai multe informații, cum ar fi întregul istoric, capacitatea de a modifica istoricul, detalii despre starea curentă și multe altele. Puteți utiliza acest serviciu pentru reglarea fină a experienței în timpul navigării în aplicație.
Vom face alte două mici modificări în șablonul locațiilor noastre. Deschis www / opinii / locuri / places.html și schimbați titlul la Locurile locale.
Apoi, actualizați componenta de defilare infinită cu încă un atribut, imediată verificare, pentru a împiedica componenta infinită de defilare să încarce date în același timp cu încărcarea inițială. Acest lucru contribuie, în esență, la prevenirea solicitărilor duplicate pentru mai multe date.
În acest moment, am construit o aplicație destul de solidă, care are un set destul de frumos de caracteristici. Vom încheia această serie cu un ultim tutorial uitat la Cordova și integrarea cu unele dintre caracteristicile dispozitivului, cum ar fi accesarea datelor GPS.
Navigarea cu ionic începe întotdeauna cu declararea unor stări. Expunând că navigarea se poate face în mai multe moduri, așa cum am văzut în acest tutorial. Aceasta este ceea ce am abordat în acest tutorial:
$ ionicHistory pentru a afla mai multe despre istoricul navigației aplicației pentru a personaliza experiența.