Share
I den første delen av denne serien så vi hvordan du kommer i gang med å lage et program ved hjelp av AngularJS og Firebase. Vi opprettet vår påloggingsside og implementerte påloggingsfunksjonaliteten med Firebase som bakre ende.
I denne opplæringen tar vi denne serien til neste nivå. Vi lager og oppretter registreringssiden og ser hvordan du gjør skjemavalideringer i AngularJS.
La oss begynne med å klone den første delen av opplæringen fra GitHub.
git klon https://github.com/jay3dec/AngularJS_Firebase_Part1.git
Når koden er hentet, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
cd AngularJS_Firebase_Part1 npm installere
Når alle avhengighetene er installert, start serveren.
npm start
Pek nettleseren din til http: // localhost: 8000 / app / # / home, og du bør få appen å kjøre.
Vi starter med å lage en side for gjestenes brukere å registrere seg. Navigere til AngularJS_Firebase_Part1 / app og opprett en mappe som heter registrere. Inne i registrere mappe, opprett register.html og register.js filer. Her er hvordan register.html utseende:
AngularJS & Firebase Web App AngularJS & Firebase App!
Som vist i HTML koden ovenfor har vi brukt Bootstrap for vår HTML-design.
Innsiden register.js, Vi vil erklære ruter for søknaden for å få tilgang til registervisningen. $ routeProvider har en metode kalt når, som vi skal bruke til å lage en rute for vår registreringsvisning. Når vi definerer en ny rute, setter vi inn en templateUrl som ville bli gjengitt i index.html. Sammen med det, vil vi også sette en kontrollerenfor den nyopprettede $ omfang av registervisningen. En kontroller er en logikk som styrer en bestemt visning. Slik ser det ut:
Accentsconagua
'bruk streng'; angular.module ('myApp.register', ['ngRoute']) // Deklarert rute .config (['$ routeProvider', funksjon ($ routeProvider) $ routeProvider.when ('/ register', templateUrl: 'register /register.html ', kontroller:' RegisterCtrl ');]) // Register controller .controller (' RegisterCtrl ', [function () ]);Åpne nå opp app.js og inkludere registermodulen myApp.register i appen.
'bruk streng'; angular.module ('myApp', ['ngRoute', 'myApp.home', 'myApp.register' // Nylig lagt til registerrute]). config (['$ routeProvider', funksjon ($ routeProvider) // Angi defualt visning av vår app til hjemme $ routeProvider.otherwise (redirectTo: '/ home');]);For å vise registreringssiden må vi inkludere register.js inne i hoved HTML-malfilen til appen. Åpne opp index.html og inkludere følgende:
Start serveren på nytt og pek nettleseren din til http: // localhost: 8000 / app / index.html # / register og du bør se registreringsskjermen:
Deretter la vi lage påloggingsskjermen koblingen til påloggingsskjermen. I home.html og register.html det er en melde deg på og Logg inn href henholdsvis. Vi setter begge href-kildene slik at de er tilgjengelige fra begge sidene.
I home.html:
Melde deg på
I register.html:
Logg inn
Når en bruker skriver inn e-postadressen og passordet på registreringsskjermen, må vi validere noen få ting. Først skal e-post-IDen ha et gyldig e-post-ID-format, og for det andre må passordet som er oppgitt, ha en minimumslengde.
AngularJS gir FormController, som holder styr på hvert element i et skjema. Fra AngularJS-dokumentene:
FormController holder styr på alle kontroller og nestede skjemaer i tillegg til tilstanden til dem, for eksempel å være gyldig / ugyldig eller skitten / uberørt.
FormController har noen egenskaper som $ uberørte, $ skitne, $ ugyldig, $ gyldig, etc. Vi vil se hva disse egenskapene er, og vi vil bruke noen av disse egenskapene til å implementere skjema validering for vår registreringsside.
Først må vi modifisere vårt skjema HTML for å legge til valideringsmeldinger. I register.html endre skjemaet HTML som vist.
Lagre endringene, start serveren på nytt og oppdatere registrere side. Du bør se en side som dette:
Nå, som vi kan se på skjermbildet ovenfor, er valideringsmeldingene synlige. Vi må bare vise dem når e-postadressen og passordet ikke er gyldige.
AngularJS gir et direktiv kalt ngShow for å vise HTML basert på et bestemt uttrykk. (Et AngularJS-direktiv er et utvidet HTML-attributt levert av AngularJS for å forbedre elementernes evner.) Så vi bruker ngShow til å vise valideringsmeldingen når inngangs-e-postadressen har ugyldige data. Men hvordan vet vi om inntaksmeldingen er ugyldig? Vel, husk FormController egenskaper som vi diskuterte tidligere. FormController har en eiendom som kalles $ ugyldig som er ekte hvis en kontroll er ugyldig. regForm.email. $ ugyldig ville være sant hvis e-posten er ikke gyldig. Så vi skal bruke $ ugyldig og ngShow for å vise valideringsmeldingen. Endre e-postmeldingsspenningen som vist nedenfor:
Skriv inn en gyldig epost.
Lagre endringene, start serveren på nytt, og bla til registreringssiden. Du ser at bekreftelsesmeldingen for e-post-ID ikke vises lenger. Prøv nå å legge inn noen data i e-postmeldingen, og feilmeldingen vil dukke opp. Prøv å skrive inn en gyldig e-postadresse og valideringsmeldingen vil være borte. Men meldingen for minimumslengden for passord oppstår først, først. La oss fikse det opp.
AngularJS gir et annet direktiv kalt ng-minlength for å stille inn minimumslengden for hvilken som helst inngangskontroll. Vi bruker det til å angi minimumslengden for passordfeltet og deretter bruke ngShow å vise / skjule valideringsmeldingen. Endre passordfeltet for å inkludere ng-minlength Direktivet som vist:
Endre endre valideringsmeldingsspenningen for passordfeltet som vist:
Min passordlengde er 8 tegn.
Så, hvis minimumslengden på passordfeltet ikke er i forhold til minimumslengden som er angitt i inntastingsfeltet for passord, så regForm.password. $ error.minlength vil bli satt til "true" og valideringsmeldingen vil bli vist.
Lagre alle endringene, start serveren på nytt, og bla til registreringssiden. Prøv å skrive inn en verdi for passord, og valideringsmeldingen vises til passordlengden er 8.
Nå, for å markere de ugyldige elementene, kan vi bruke noen stiler. Ved hjelp av et AngularJS-direktiv kalt ngClass kan vi dynamisk markere de defekte inngangselementene ved hjelp av $ ugyldig eiendom. Så legg til ngClass Direktiv til foreldre div av e-post og passord elementer.
Skriv inn en gyldig epost.
Min passordlengde er 8 tegn.
Lagre endringene, start serveren på nytt, og prøv å bla til registreringssiden. Nå, med ugyldige oppføringer, vises valideringsmeldingene som følger:
Nå, som du kan se i ovenstående skjerm, på valideringsfeil Registrere knappen er aktivert. La oss gjøre det deaktivert med mindre e-postadressen og passordet er gyldige. AngularJS gir et direktiv kalt ngDisabled som bidrar til å deaktivere elementer basert på et uttrykk. Hvis e-post og passord er validerte da user.email og bruker passord Modeller vil bli satt. Så, vi bruker disse to objektene for å aktivere / deaktivere registerknappen ved hjelp av ngDisabled. Endre registerknappen HTML som vist:
Som du kan se, ng-deaktivert vil være sant hvis user.email eller bruker passord er ikke feil, som bare vil være tilfelle når dataene er ugyldige.
Lagre alle endringene, start serveren på nytt og oppdater registreringssiden. Som du vil merke, er Register-knappen deaktivert, og det forblir slik, til en gyldig e-postadresse og et passord er oppgitt.
Implementering av validering på påloggingsskjermen er ganske lik den måten vi gjorde for oppmeldingsskjermbildet. Jeg foreslår at du implementerer validering selv for påloggingsskjermen som en øvelse. Hvis du sitter fast, ta en titt på den endrede HTML-koden for Logg inn skjema i home.html som vist under:
I denne delen av opplæringen lagde vi opp registreringssiden og satte opp ruter for den. Vi så også hvordan du implementerer valideringer ved hjelp av AngularJS for registreringssiden.
I neste del fokuserer vi på å implementere påloggingsfunksjonaliteten og noen andre funksjoner. Kildekoden fra denne veiledningen er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker i kommentarene nedenfor!
