Share
I den forrige delen av denne opplæringsserien implementerte vi redigere og slette postfunksjonalitet på velkomstsiden. I denne delen av opplæringen legger vi til en Last innlasting indikator i vår søknad. Å legge til en lastindikator er ganske viktig da det gjør applikasjonen mer interaktiv. Vi vil også fikse et par mindre problemer når opplæringen utvikler seg.
La oss begynne med å klone den forrige delen av opplæringen fra GitHub.
git klon https://github.com/jay3dec/AngularJS_Firebase_Part6.git
Etter kloning av kildekoden, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
cd AngularJS_Firebase_Part6 npm installere
Når avhengighetene er installert, start serveren.
npm start
Pek nettleseren din til http: // localhost: 8000 / app / # / home, og du bør ha programmet kjørt.
Ladda er et UI-konsept som fusjonerer en lastindikator i knapper, noe som gjør den interaktiv og brukervennlig. Fra den offisielle Last-siden,
Et brukergrensesnitt som fusjonerer lasting av indikatorer i handlingen som påkalte dem. Primært beregnet for bruk med skjemaer der det gir brukerne umiddelbar tilbakemelding på innsending, i stedet for å la dem lure på mens nettleseren gjør sin ting.
For å bruke Last inn i vår søknad, oppretter vi et AngularJS-direktiv for lasteindikatoren. Direktiver er en av kjernegenskapene til AngularJS, og de kontrollerer gjengivelsen av HTML inne i applikasjonen.
Åpne opp app / home / home.js og opprett et enkelt direktiv som vist nedenfor:
Accentsconagua
.direktiv ('lasteLading', [funksjon () retur link: funksjon (omfang, element, attrs) ;]);Vi starter og stopper ladingsindikatoren Last ned basert på a $ omfang variabel kalt login.loading. Når login.loading er sant, vi viser lasteindikatoren, og når det er feil, stopper vi lasteindikatoren. Så, i HomeCtrl, definer en variabel som heter Logg Inn og tilordne den til $ scope.login variabel.
var login = ; $ scope.login = login;
Neste inkluderer CSS og JavaScript-filer fra laste inn i home / home.html som vist under:
Etter at du har lagt til de ovennevnte skript og stilreferanser, endrer du Logg inn knappen i home.html som vist:
Som du kan se i koden ovenfor, har vi lagt til direktivet laddaLoading til knappen og har bestått login.loading. Vi angir og tilbakestiller passet inn login.loading for å veksle displayindikatorens display. Vi har også lagt til bestemte stiler, Segoe-ui-light og Laste-knappen, å stile lasteindikatorene.
Nå inne i direktivet link funksjon, legg til følgende kode for å holde et klokke på login.loading variabel variabel og start og stopp indikatoren tilsvarende.
.Direktiv ('lasteLading', [funksjon () return link: funksjon (omfang, element, attrs) var Ladda = window.Ladda; var laste = Last.create (element [0]); // Watching login.loading for change scope. $ watch (attrs.laddaLading, funksjon (newVal, oldVal) // Basert på verdien starter og stopper indikatoren hvis (newVal) load.start (); else load.stop (); );;]);Deretter når brukeren klikker på Logg inn knappen må vi sette lastindikatoren. Så, i HomeCtrl inne i Logg inn funksjon, sett login.loading for å starte ladingsindikatoren.
login.loading = true;
Tilsvarende når påloggingen suksess eller svikt tilbakeringing kalles, vi må sette login.loading å falle for å stoppe lasteindikatoren.
login.loading = false;
Lagre alle endringene og start serveren på nytt. Skriv inn en gyldig e-postadresse og et passord, og du bør kunne se lasteindikatoren i aksjon.
På samme måte kan vi legge til Ladda lasting indikator for Register-knappen i registrer / register.html. Inkluder de nødvendige referansene i registrer / register.html som vist:
Endre Registrere knappen for å inkludere direktivet som vist:
Inne i RegisterCtrl Legg til Logg Inn variabel for å angi og tilbakestille lasteindikatoren.
var login = ; $ Scope.login = innlogging;
Nå, for å aktivere lasteindikatoren når brukeren klikker på Registrere knappen, legg til følgende kode til melde deg på funksjon.
login.loading = true;
For å deaktivere ladingsindikatoren, på suksess eller svikt tilbakeringing legg til følgende kode.
login.loading = false;
Lagre alle endringene og prøv å registrere deg for en ny konto. Ved å klikke på Registrere knappen bør du kunne se lasteindikatoren.
På samme måte kan vi legge til lastingsindikatoren til Legg til innlegg side også. Det er akkurat det samme, så jeg vil ikke gjenta det igjen. Hvis du sitter fast, ta en titt på kildekoden på slutten av denne opplæringen.
På dette tidspunktet kan en innlogget bruker legge til, redigere og slette alle innleggene i programmet. Men det er ikke veldig rettferdig å la en bruker endre noen annen brukeres innlegg. Så vi filtrerer innleggene som vises på velkomstsiden og viser bare de innleggene som ble opprettet av den aktuelle brukeren.
For å søke etter en data fra Firebase kan vi bruke startAt og endAt API. Ved hjelp av start ved og endAt Vi kan hente resultater med angitt startpunkt og sluttpunkt. Men dataene som vi ville passere med start ved bør være en prioritet. Så først må vi sette e-postadressen som en prioritet mens du trykker dataene til Firebase.
Så, åpne opp addPost / addPost.js og se på en del der vi skyver dataene til Firebase.
fb. $ push (tittel: tittel, post: post, emailId: CommonProp.getUser ()) deretter (funksjon (ref) console.log (ref); $ location.path ('/ welcome'); , funksjon (feil) console.log ("Feil:", feil););Endre koden ovenfor for å angi e-postadressen som en prioritet mens du trykker på dataene.
var user = CommonProp.getUser (); fb. $ push (title: title, post: post, emailId: user, 'priority': user) .Then (funksjon (ref) console.log (ref); $ location.path (' / welcome ' );, funksjon (feil) console.log ("Feil:", feil););Så nå, hvis vi legger til et innlegg i vår søknad, blir det lagt til en prioritet for e-postadressen. Deretter åpner du opp Velkommen / welcome.js og ta en titt på den delen der vi lager den $ Fire objekt i WelcomeCtrl.
var sync = $ firebase (firebaseObj);
Endre koden ovenfor ved å legge til start ved og endAt metoder til firebaseObj.
var sync = $ firebase (firebaseObj.startAt ($ scope.username) .endAt ($ scope.username));
Nå vil det bare returnere innleggene lagt til av en bestemt logget bruker.
Lagre endringene ovenfor og start serveren på nytt. Fjern alle de gamle innleggene fra Firebase. Prøv nå å legge til innlegg etter å ha logget inn med en gyldig e-postadresse og passord. Når noen få innlegg er opprettet, kan du prøve å logge på som en annen bruker, og du vil ikke kunne se innleggene som ble opprettet av den forrige brukeren.
I denne veiledningen så vi hvordan du legger til lasteindikatoren i vår applikasjon for å gjøre appen din mer interaktiv. Vi så også hvordan du filtrerer dataresultatet mens du henter data fra Firebase. I neste del av denne serien implementerer vi loggingsfunksjonaliteten og løser også et par eksisterende problemer.
Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi oss beskjed om dine tanker, rettelser og forslag i kommentarene nedenfor!
