Share
In het eerste deel van deze serie zagen we hoe je aan de slag kon gaan met het maken van een applicatie met AngularJS en Firebase. We hebben onze aanmeldingspagina gemaakt en de inlogfunctie geïmplementeerd met Firebase als back-end.
In deze zelfstudie nemen we deze serie naar een hoger niveau. We zullen de aanmeldingspagina maken en instellen en zien hoe formuliervalidaties in AngularJS kunnen worden gedaan.
Laten we beginnen met het klonen van het eerste deel van de tutorial vanuit GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git
Nadat de code is opgehaald, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.
cd AngularJS_Firebase_Part1 npm installeren
Zodra alle afhankelijkheden zijn geïnstalleerd, start u de server.
npm start
Richt uw browser op http: // localhost: 8000 / app / # / home en u moet de app laten draaien.
We beginnen met het maken van een pagina waarop de gastgebruikers zich kunnen aanmelden. Navigeren naar AngularJS_Firebase_Part1 / app en maak een map genaamd registreren. Binnen in de registreren map, maken register.html en register.js bestanden. Hier is hoe register.html ziet:
AngularJS & Firebase Web App AngularJS & Firebase-app!
Zoals te zien is in de bovenstaande HTML-code, hebben we Bootstrap gebruikt voor ons HTML-ontwerp.
Binnen register.js, we verklaren de routes voor de toepassing om toegang te krijgen tot de registerweergave. $ routeProvider heeft een methode genaamd wanneer, die we zullen gebruiken om een route te creëren voor onze registerweergave. Wanneer u een nieuwe route definieert, stellen we een templateUrl welke zou worden gerenderd in de index.html. Samen met dat zullen we ook een instellen controleurvoor de nieuw gecreëerde $ scope van de registerweergave. Een controller is een logica die een bepaalde weergave bestuurt. Hier is hoe het eruit zou moeten zien:
Accentsconagua
'gebruik strikt'; angular.module ('myApp.register', ['ngRoute']) // Opgegeven route .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ register', templateUrl: 'registreer /register.html ', controller:' RegisterCtrl ');]) // Registreer controller .controller (' RegisterCtrl ', [function () ]);Open nu app.js en neem de registermodule op myApp.register in de app.
'gebruik strikt'; angular.module ('myApp', ['ngRoute', 'myApp.home', 'myApp.register' // Nieuw toegevoegde registerroute]). config (['$ routProvider', function ($ routeProvider) // Stel de standaardweergave van onze app in op home $ routeProvider.otherwise (redirectTo: '/ home');]);Om de aanmeldingspagina weer te geven, moeten we deze opnemen register.js in het HTML-hoofdsjabloonbestand van de app. Doe open index.html en omvatten het volgende:
Start de server opnieuw op en wijs uw browser naar http: // localhost: 8000 / app / index.html # / register en u zou het aanmeldscherm moeten zien:
Laten we vervolgens het aanmeldingsscherm koppelen aan het inlogscherm. In home.html en register.html er is een inschrijven en aanmelden href respectievelijk. We stellen beide href-bronnen zo in dat ze toegankelijk zijn vanaf beide pagina's.
In home.html:
Inschrijven
In de register.html:
Aanmelden
Wanneer een gebruiker zijn of haar e-mailadres en wachtwoord invoert op het registratiescherm, moeten we een paar dingen valideren. Ten eerste moet de ingevoerde e-mailidentificatie een geldig e-mail-ID-formaat hebben en ten tweede moet het ingevoerde wachtwoord een minimale lengte hebben.
AngularJS biedt FormController, die elk element binnen een formulier bijhoudt. Van de AngularJS-documenten:
FormController houdt alle besturingselementen en geneste formulieren bij, evenals de status ervan, zoals geldig / ongeldig of vies / onaangetast zijn.
FormController heeft een paar eigenschappen zoals $ ongerepte, $ dirty, $ ongeldig, $ geldig, etc. We zullen zien wat deze eigenschappen zijn en we zullen enkele van deze eigenschappen gebruiken om formuliervalidatie voor onze registratiepagina te implementeren.
Ten eerste moeten we onze formulier-HTML wijzigen om validatieberichten toe te voegen. In register.html wijzig het formulier HTML zoals weergegeven.
Sla de wijzigingen op, start de server opnieuw op en vernieuw de registreren pagina. U zou een pagina als deze moeten zien:
Nu, zoals we in het bovenstaande scherm kunnen zien, zijn de validatieberichten zichtbaar. We moeten ze alleen tonen als de e-mail en het wachtwoord niet geldig zijn.
AngularJS biedt een richtlijn genaamd ngShow om HTML weer te geven op basis van een bepaalde uitdrukking. (Een AngularJS-richtlijn is een uitgebreid HTML-kenmerk dat wordt geleverd door AngularJS om de mogelijkheden van de elementen te verbeteren.) We gebruiken ngShow dus om het validatiebericht weer te geven wanneer de ingevoerde e-mail ongeldige gegevens bevat. Maar hoe weten we of de ingevoerde e-mail ongeldig is? Wel, onthoud dat FormController eigenschappen die we eerder hebben besproken. FormController heeft een eigenschap genaamd $ ongeldig welke is waar als een controle ongeldig is. regForm.email. $ ongeldig zou waar zijn als de ingevoerde e-mail geen geldige is. Dus we zullen gebruiken $ ongeldig en ngShow om het validatiebericht te tonen. Pas het bereik van het e-mailbericht aan zoals hieronder getoond:
Vul een geldig e-mailadres in.
Sla de wijzigingen op, start de server opnieuw op en blader naar de registratiepagina. U ziet dat het validatiebericht voor e-mail-ID niet langer wordt weergegeven. Probeer nu wat gegevens in te voeren in de invoermail en het foutbericht verschijnt. Voer een geldig e-mailadres in en het validatiebericht is verdwenen. Maar de boodschap voor de minimumlengte van het wachtwoord verschijnt nog steeds, aanvankelijk. Laten we het oplossen.
AngularJS biedt een andere richtlijn met de naam ng-minlength om de minimumlengte in te stellen voor elk invoerbesturingselement. We gebruiken dit om de minimumlengte voor het wachtwoordveld in te stellen en vervolgens te gebruiken ngShow om het validatiebericht te tonen / verbergen. Wijzig het wachtwoordveld om de ng-minlength richtlijn zoals getoond:
Pas vervolgens de geldigheid van de geldigheid van het bericht aan voor het wachtwoordveld zoals getoond:
Min. Wachtwoordlengte is 8 tekens.
Dus als de minimale lengte van het wachtwoordveld niet overeenkomt met de minimumlengte die is ingesteld in het wachtwoordinvoerveld, dan regForm.password. $ error.minlength wordt ingesteld op "true" en het validatiebericht wordt weergegeven.
Sla alle wijzigingen op, start de server opnieuw op en blader naar de registratiepagina. Voer een waarde voor het wachtwoord in en het validatiebericht wordt weergegeven totdat de wachtwoordlengte 8 is.
Nu, om de ongeldige invoerelementen te markeren, kunnen we enkele stijlen gebruiken. Met behulp van een AngularJS-instructie genaamd ngClass kunnen we de defecte invoerelementen dynamisch markeren met behulp van de $ ongeldig eigendom. Dus voeg de ngClass naar de parent div van de e-mail- en wachtwoordelementen.
Vul een geldig e-mailadres in.
Min. Wachtwoordlengte is 8 tekens.
Sla de wijzigingen op, start de server opnieuw op en probeer naar de registratiepagina te bladeren. Nu verschijnen bij ongeldige vermeldingen de validatieberichten zoals hieronder:
Nu, zoals u in het bovenstaande scherm kunt zien, op validatiefouten de Registreren knop is ingeschakeld. Laten we het uitschakelen, tenzij de ingevoerde e-mail en het wachtwoord geldig zijn. AngularJS biedt een richtlijn met de naam ngDisabled die elementen op basis van een uitdrukking helpt uitschakelen. Als e-mail en wachtwoord zijn gevalideerd dan de user.email en gebruikerswachtwoord modellen worden ingesteld. We gebruiken deze twee objecten dus om de kistknop in of uit te schakelen ngDisabled. Wijzig de HTML-knop in de register-knop zoals getoond:
Zoals je kunt zien, ng-disabled zal waar zijn als user.email of gebruikerswachtwoord is niet onjuist, wat alleen het geval zal zijn als de gegevens ongeldig zijn.
Sla alle wijzigingen op, start de server opnieuw op en vernieuw de registratiepagina. Zoals u zult merken, is de knop Registreren uitgeschakeld en blijft dit zo totdat een geldig e-mailadres en wachtwoord zijn ingevoerd.
Het implementeren van validatie op het inlogscherm lijkt sterk op de manier waarop we het hebben gedaan voor het aanmeldingsscherm. Ik zou willen voorstellen dat u zelf validatie implementeert voor het aanmeldscherm als een oefening. Als je vastloopt, bekijk dan de aangepaste HTML-code voor de aanmelden vorm in home.html zoals hieronder getoond:
In dit deel van de zelfstudie hebben we de aanmeldingspagina gemaakt en de routes ervoor ingesteld. We hebben ook gezien hoe validaties kunnen worden geïmplementeerd met AngularJS voor de aanmeldingspagina.
In het volgende deel zullen we ons concentreren op het implementeren van de aanmeldfunctionaliteit en een paar andere functies. Broncode van de bovenstaande zelfstudie is beschikbaar op GitHub.
Laat het ons weten in de reacties hieronder!
