Share
În prima parte a acestei serii, am văzut cum să începeți să creați o aplicație utilizând AngularJS și Firebase. Am creat pagina noastră de conectare și am implementat funcția de conectare cu Firebase ca și back-end.
În acest tutorial, vom lua această serie la nivelul următor. Vom crea și seta pagina de înscriere și vom vedea cum să facem validări de formulare în AngularJS.
Să începem prin clonarea primei părți a tutorialului de la GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git
Odată ce codul este preluat, navigați la directorul proiectului și instalați dependențele necesare.
cd AngularJS_Firebase_Part1 npm instalare
Odată ce toate dependențele sunt instalate, porniți serverul.
npm start
Punctați browserul la http: // localhost: 8000 / app / # / home și ar trebui să aveți aplicația să ruleze.
Vom începe prin crearea unei pagini pentru utilizatorii clienților care să se înscrie. Navigheaza catre AngularJS_Firebase_Part1 / app și creați un dosar numit Inregistreaza-te. În interiorul Inregistreaza-te folder, creați register.html și register.js fișiere. Iată cum register.html arată:
Aplicația AngularJS & Firebase Web AngularJS & Firebase App!
După cum se vede în codul HTML de mai sus, am folosit Bootstrap pentru designul HTML.
Interior register.js, vom declara rutele aplicației pentru a accesa vizualizarea înregistrării. $ routeProvider are o metodă numită cand, pe care o vom folosi pentru a crea un traseu pentru vizualizarea noastră de registru. Când definim un nou traseu, vom seta a templateUrl care ar fi prestate în index.html. Împreună cu asta, vom seta și a controlorpentru nou-creat domeniul de aplicare $ din vizualizarea registrului. Un controler este o logică care controlează o anumită imagine. Iată cum ar trebui să arate:
Accentsconagua
"utilizarea strictă"; ($ 'RouteProvider', funcția ($ routeProvider) $ routeProvider.when ('/ register', templateUrl: 'register /register.html ", controler: 'RegisterCtrl');]) // Înregistrați controlerul .controller ('RegisterCtrl', [function () ]);Deschide acum app.js și include modulul de înregistrare myApp.register în aplicație.
"utilizarea strictă"; angular.module ("myApp", ['ngRoute', 'myApp.home', 'myApp.register' // Traseu registru nou adăugat]). config (['$ routeProvider', funcție ($ routeProvider) // Setați vizualizarea defualt a aplicației noastre la domiciliul $ routeProvider.otherwise (redirectTo: '/ home');]);Pentru a afișa pagina de înscriere, trebuie să includeți register.js în interiorul fișierului HTML principal al aplicației. Deschide index.html și includ următoarele:
Reporniți serverul și îndreptați-l la http: // localhost: 8000 / app / index.html # / register și ar trebui să vedeți ecranul de înscriere:
Apoi, hai să conectăm ecranul de înscriere la ecranul de conectare. În home.html și register.html este un Inscrie-te și conectare href respectiv. Vom seta ambele surse href astfel încât să fie accesibile din ambele pagini.
În home.html:
Inscrie-te
În register.html:
Conectare
Când un utilizator își introduce adresa de e-mail și parola pe ecranul de înregistrare, trebuie să validăm câteva lucruri. În primul rând, ID-ul de e-mail introdus trebuie să aibă un format de e-mail valid și, în al doilea rând, parola introdusă trebuie să aibă o lungime minimă.
AngularJS furnizează FormController, care urmărește fiecare element din interiorul unui formular. Din documentele AngularJS:
FormController ține evidența tuturor controalelor și formularelor imbricate, precum și a stării acestora, cum ar fi valabilitatea / nevaliditatea sau murdăria / curățenia.
FormController are câteva proprietăți $ curat, $ murdar, $ nevalid, $ validă, etc. Vom vedea ce sunt aceste proprietăți și vom folosi câteva dintre aceste proprietăți pentru a implementa validarea formularului pentru pagina noastră de înregistrare.
În primul rând, trebuie să modificăm formularul HTML pentru a adăuga mesaje de validare. În register.html modificați formularul HTML după cum se arată.
Salvați modificările, reporniți serverul și actualizați-l Inregistreaza-te pagină. Ar trebui să vedeți o pagină ca aceasta:
Acum, după cum vedem în ecranul de mai sus, mesajele de validare sunt vizibile. Trebuie să le afișăm numai atunci când e-mailul și parola nu sunt valide.
AngularJS oferă o directivă numită ngShow pentru a afișa codul HTML pe baza unei anumite expresii. (Directiva AngularJS este un atribut HTML extins furnizat de AngularJS pentru a îmbunătăți capabilitățile elementelor.) Deci, vom folosi ngShow pentru a afișa mesajul de validare când e-mailul de intrare are date nevalide. Dar cum putem ști dacă e-mailul de intrare este nevalid? Ei bine, amintiți-vă FormController proprietăți pe care le-am discutat mai devreme. FormController are o proprietate numită $ nevalid care este Adevărat dacă un control este nevalid. regForm.email. $ nevalid ar fi adevărat dacă e-mailul introdus nu este unul valid. Așa că vom folosi $ nevalid și ngShow pentru a afișa mesajul de validare. Modificați intervalul de mesaje e-mail așa cum se arată mai jos:
Introduceți un e-mail valid.
Salvați modificările, reporniți serverul și navigați la pagina de înregistrare. Veți vedea că mesajul de validare pentru id-ul de e-mail nu mai arată. Acum, încercați să introduceți anumite date în e-mailul de intrare și mesajul de eroare se va afișa. Încercați să introduceți o adresă de e-mail validă și mesajul de validare va dispărea. Dar mesajul pentru lungimea minimă a parolei se afișează inițial. Să rezolvăm problema.
AngularJS oferă o altă directivă numită ng-minlength pentru a seta lungimea minimă pentru orice control de intrare. Vom folosi pentru a seta lungimea minimă pentru câmpul de parolă și apoi pentru a utiliza ngShow pentru a afișa / ascunde mesajul de validare. Modificați câmpul de parolă pentru a include ng-Minlength directivă după cum se arată:
Apoi, modificați intervalul de validare a mesajului pentru câmpul de parolă după cum se arată:
Partea minimă a parolei este de 8 caractere.
Deci, dacă lungimea minimă a câmpului de parolă nu corespunde cu lungimea minimă stabilită în câmpul de introducere a parolei, atunci regForm.password. $ error.minlength va fi setat la "true" și mesajul de validare va fi afișat.
Salvați toate modificările, reporniți serverul și răsfoiți pagina de înregistrare. Încercați să introduceți o valoare pentru parolă și mesajul de validare va apărea până când lungimea parolei este de 8.
Acum, pentru a evidenția elementele de intrare nevalide, putem folosi anumite stiluri. Utilizând o directivă AngularJS numită ngClass, putem evidenția dinamic elementele de intrare defecte folosind $ nevalid proprietate. Adăugați astfel ngClass directivă către divizia părinte a elementelor de e-mail și parolă.
Introduceți un e-mail valid.
Partea minimă a parolei este de 8 caractere.
Salvați modificările, reporniți serverul și încercați să navigați la pagina de înregistrare. Acum, la intrările nevalide, mesajele de validare se afișează mai jos:
Acum, după cum puteți vedea în ecranul de mai sus, pe erorile de validare Inregistreaza-te butonul este activat. Să o dezactivăm cu excepția cazului în care e-mailul și parola introduse sunt valide. AngularJS oferă o directivă numită ngDisabled, care ajută la dezactivarea elementelor bazate pe o expresie. Dacă e-mail și parola sunt validate atunci user.email și Parolă de utilizator modelele vor fi setate. Deci, vom folosi aceste două obiecte pentru a activa / dezactiva butonul de înregistrare folosind ngDisabled. Modificați butonul de înregistrare HTML după cum se arată:
După cum puteți vedea, ng-dezactivat va fi adevărat dacă user.email sau Parolă de utilizator nu este falsă, ceea ce va fi cazul numai atunci când datele sunt nevalide.
Salvați toate modificările, reporniți serverul și actualizați pagina de înregistrare. După cum veți observa, butonul Înregistrare va fi dezactivat și va rămâne astfel, până când vor fi introduse o adresă de e-mail și o parolă valide.
Implementarea validării pe ecranul de conectare este destul de similară cu modul în care am făcut-o pentru ecranul de înscriere. Aș sugera să implementați validarea pentru ecranul de conectare ca un exercițiu. În cazul în care rămâneți blocat, examinați codul HTML modificat pentru conectare forma în home.html așa cum se arată mai jos:
În această parte a tutorialului, am creat pagina de înscriere și am creat rutele pentru aceasta. De asemenea, am văzut cum să implementăm validări utilizând AngularJS pentru pagina de înscriere.
În partea următoare, ne vom concentra pe implementarea funcționalității de înscriere și a câtorva alte caracteristici. Codul sursă din tutorialul de mai sus este disponibil pe GitHub.
Spuneți-ne gândurile dvs. în comentariile de mai jos!
