Share
In het vorige deel van deze tutorialserie hebben we het Bewerk en verwijderen post functionaliteit op de welkomstpagina. In dit deel van de tutorial voegen we een Ladda-laadindicator toe aan onze applicatie. Het toevoegen van een laadindicator is vrij essentieel omdat het de toepassing interactiever maakt. We zullen ook een paar kleine problemen oplossen naarmate de handleiding vordert.
Laten we beginnen met het klonen van het vorige deel van de tutorial vanuit GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part6.git
Nadat u de broncode hebt gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd AngularJS_Firebase_Part6 npm installeren
Zodra de afhankelijkheden zijn geïnstalleerd, start u de server.
npm start
Wijs je browser naar http: // localhost: 8000 / app / # / home en je zou de applicatie moeten laten draaien.
Ladda is een UI-concept dat een laadindicator combineert met knoppen, waardoor deze interactief en gebruiksvriendelijk is. Van de officiële Ladda-site,
Een UI-concept dat laadindicatoren samenvoegt in de actie die hen heeft aangeroepen. Hoofdzakelijk bedoeld voor gebruik met formulieren waarbij gebruikers onmiddellijk feedback krijgen bij het indienen in plaats van ze zich af te vragen terwijl de browser zijn ding doet.
Om Ladda in onze applicatie te gebruiken, maken we een AngularJS-richtlijn voor de LadDA-laadindicator. Richtlijnen zijn een van de kernfuncties van AngularJS en ze bepalen de weergave van HTML in de toepassing.
Doe open app / home / home.js en maak een eenvoudige richtlijn zoals hieronder getoond:
Accentsconagua
.directive ('laddaLoading', [function () return link: function (scope, element, attrs) ;]);We starten en stoppen de ladda-laadindicator op basis van a $ scope variabele genoemd login.loading. Wanneer login.loading is waar, we geven de laadindicator weer en wanneer deze false is, stoppen we de laadindicator. Dus, in HomeCtrl, definieer een variabele genaamd Log in en wijs het toe aan de $ scope.login veranderlijk.
var login = ; $ scope.login = login;
Voeg vervolgens de CSS- en JavaScript-bestanden van ladda dist in toe home / home.html zoals hieronder getoond:
Na het toevoegen van het bovenstaande script en stijlreferenties, wijzigt u de Aanmelden knoop binnen home.html zoals getoond:
Zoals u in de bovenstaande code kunt zien, hebben we de richtlijn toegevoegd laddaLoading naar de knop en zijn gepasseerd login.loading. We zullen het doorgeven instellen en resetten login.loading om het display van de laadindicator in te schakelen. We hebben ook bepaalde stijlen toegevoegd, Segoe-ui-light en Ladda-knop, om de Ladda-laadindicatoren in te richten.
Nu in de richtlijn link functie, voeg de volgende code toe om de login.loading bereikvariabele en start en stop de indicator dienovereenkomstig.
.directive ('laddaLoading', [function () return link: function (scope, element, attrs) var Ladda = window.Ladda; var ladda = Ladda.create (element [0]); // Kijken login.loading voor wijziging bereik. $ watch (attrs.laddaLoading, function (newVal, oldVal) // Op basis van de waarde start en stop de indicator als (newVal) ladda.start (); else ladda.stop (); );;]);Vervolgens klikt de gebruiker op Aanmelden knop moeten we de laadindicator instellen. Dus, in HomeCtrl binnen in de Aanmelden functie, instellen login.loading naar true om de laadindicator te starten.
login.loading = true;
Evenzo bij het inloggen succes of mislukking callback wordt gebeld, we moeten de login.loading naar false om de laadindicator te stoppen.
login.loading = false;
Sla alle wijzigingen op en start de server opnieuw op. Voer een geldig e-mailadres en wachtwoord in en u zou de laadindicator in actie kunnen zien.
Evenzo kunnen we de ladda laadindicator voor de knop Registreren in register / register.html. Vermeld de vereiste referenties in register / register.html zoals getoond:
Wijzig de Registreren knop om de richtlijn op te nemen zoals getoond:
Binnen in de RegisterCtrl voeg het toe Log in variabele om de ladda-laadindicator in te stellen en opnieuw in te stellen.
var login = ; $ Scope.login = login;
Nu, om de laadindicator in te schakelen wanneer de gebruiker op klikt Registreren knop, voeg de volgende code toe aan de inschrijven functie.
login.loading = true;
Om de laadindicator uit te schakelen, aan succes of mislukking callback voeg de volgende code toe.
login.loading = false;
Sla alle wijzigingen op en probeer u te registreren voor een nieuw account. Door op de te klikken Registreren knop moet je de laadindicator kunnen zien.
Evenzo kunnen we de laadindicator toevoegen aan de Voeg bericht toe pagina ook. Het is precies hetzelfde dus ik zal het niet nog een keer herhalen. Als je vastloopt, bekijk dan de broncode aan het einde van deze tutorial.
Op dit punt kan elke ingelogde gebruiker alle berichten in de toepassing toevoegen, bewerken en verwijderen. Maar het is niet echt eerlijk om een gebruiker toe te staan de post van een andere gebruiker te wijzigen. We filteren dus de berichten die worden weergegeven op de welkomstpagina en tonen alleen de berichten die door de betreffende gebruiker zijn gemaakt.
Voor het opvragen van gegevens uit Firebase kunnen we de API startAt en endAt gebruiken. Gebruik makend van begin bij en eindig op we kunnen resultaten ophalen met het gespecificeerde begin- en eindpunt. Maar de gegevens waarmee we zouden passeren begin bij zou een prioriteit moeten zijn. Dus eerst moeten we het e-mailadres instellen als een prioriteit terwijl we de gegevens naar Firebase verzenden.
Dus open addPost / addPost.js en bekijk een gedeelte waar we de gegevens naar Firebase pushen.
fb. $ push (title: title, post: post, emailId: CommonProp.getUser ()). then (function (ref) console.log (ref); $ location.path ('/ welcome'); , functie (fout) console.log ("Fout:", fout););Wijzig de bovenstaande code om het e-mailadres als prioriteit in te stellen terwijl u de gegevens pusht.
var user = CommonProp.getUser (); fb. $ push (title: title, post: post, emailId: user, '.priority': user). then (function (ref) console.log (ref); $ location.path ('/ welcome' );, function (error) console.log ("Error:", error););Dus als we nu een bericht toevoegen in onze applicatie, wordt het toegevoegd met een prioriteit voor het e-mailadres. Open vervolgens welkom / welcome.js en bekijk het gedeelte waar we het creëren $ firebase object in WelcomeCtrl.
var sync = $ firebase (firebaseObj);
Wijzig de bovenstaande code door de begin bij en eindig op methoden om de firebaseObj.
var sync = $ firebase (firebaseObj.startAt ($ scope.username) .endAt ($ scope.username));
Nu worden alleen de berichten weergegeven die door een bepaalde ingelogde gebruiker zijn toegevoegd.
Sla de bovenstaande wijzigingen op en start de server opnieuw. Verwijder alle oude berichten van Firebase. Probeer nu berichten toe te voegen na het inloggen met een geldig e-mailadres en wachtwoord. Zodra een paar berichten zijn gemaakt, probeert u in te loggen als een andere gebruiker en kunt u de berichten die door de vorige gebruiker zijn gemaakt niet zien.
In deze zelfstudie hebben we gezien hoe we de Ladda-laadindicator kunnen toevoegen aan onze applicatie om onze app interactiever te maken. We hebben ook gezien hoe het gegevensresultaat moet worden gefilterd tijdens het ophalen van gegevens uit Firebase. In het volgende deel van deze serie zullen we de uitlogfunctie implementeren en een aantal bestaande problemen oplossen.
Broncode van deze tutorial is beschikbaar op GitHub. Laat ons uw mening, correcties en suggesties weten in de opmerkingen hieronder!
