În partea anterioară a acestei serii, am creat pagina de înscriere, am setat rutele și, de asemenea, am făcut niște validări de formă utilizând AngularJS. În acest tutorial vom implementa funcționalitatea de înscriere prin cablul AngularJS și cea mai recentă versiune de Firebase. De asemenea, vom modifica codul de conectare conform noului Firebase API.

Noțiuni de bază

Să începem prin clonarea celei de-a doua părți a tutorialului de la GitHub.

git clone https://github.com/jay3dec/AngularJS_Firebase_Part2.git

După ce ați clonat codul sursă, navigați la directorul proiectului și instalați dependențele necesare.

cd AngularJS_Firebase_Part2 Instalare npm

După instalarea dependențelor, porniți serverul.

npm start

Punctați browser-ul dvs. la http: // localhost: 8000 / app / și ar trebui să aveți aplicația să ruleze.

Firebase Script Referințe

Firebase a lansat recent o versiune mai nouă, iar clientul FirebaseSimpleLogin pe care l-am folosit în primul nostru tutorial pentru a vă conecta la utilizator a fost depreciat și inclus în principala bibliotecă Firebase. Deci, deschide-te app / index.html și eliminați referințele Firebase existente și includeți următoarele referințe de script:

Modificarea implementării de conectare

Navigheaza catre app / home și se deschide home.js. Îndepărtați injecția $ simplefirebaselogin de la controler și injectați $ firebaseAuth. Utilizați-l pentru a crea loginObj așa cum se arată.

.controlerul ("HomeCtrl", ['$ scope', '$ firebaseAuth', funcția ($ scope, $ firebaseAuth) var firebaseObj = noua Firebase ("https://blistering-heat-2473.firebaseio.com"); loginObj = $ firebaseAuth (firebaseObj);)));

Noua Firebase oferă o metodă API numită $ authWithPassword pentru a vă autentifica utilizând adresa de e-mail și parola. Înlocuiți metoda de conectare cu $ authWithPassword în Conectare funcția după cum se arată:

$ scope.SignIn = funcția (e) e.preventDefault (); var username = $ scope.user.email; var parola = $ scope.user.password; (nume de utilizator, parolă: parolă) .then (funcția (utilizator)) // succes de apel inversă console.log ("Autentificare reușită"); funcția (eroare) // Consola de apel invers. jurnal ("Eroare de autentificare");); 

Salvați modificările, reporniți serverul și încercați să vă conectați utilizând o adresă de e-mail și o parolă valide. Ar trebui să aveți un mesaj de succes în consola browserului.

Implementarea funcționalității de înscriere

Vom folosi metoda Firebase createUser pentru a crea un utilizator nou folosind o adresă de e-mail și o parolă. Deoarece deja am validat datele din tutorialul nostru anterior, vom lega un apel pentru funcția de înscriere la clic pe butonul de înregistrare. Adăugați directiva ngClick la butonul de înregistrare după cum se arată:

Inregistreaza-te

Deschide register.js și în interior RegisterCtrl controler, creați o nouă funcție numită Inscrie-te. 

.controlerul ('RegisterCtrl', ['$ scope', funcția ($ scope) $ scope.signUp = function () // Înscrieți-vă implementarea ar fi aici!;]);

În Inscrie-te vom verifica dacă formularul nostru este valabil:

$ scope.signUp = funcția () if (! $ scope.regForm. $ este nevalidă) console.log ("Trimitere validă a formularului"); ;

Adaugă ngController directivă corp tag în register.html.

Reporniți serverul și încercați să navigați la pagina de înregistrare. apasă pe Inregistreaza-te după introducerea adresei de e-mail și a parolei. Acum, dacă verificați consola browserului, ar trebui să vedeți Trimitere validă a formularului mesaj.

Deci, înainte de a apela API Firebase pentru a crea un utilizator nou, va trebui să injectăm firebase în aplicația noastră. Deschide register.js și adăugați firebase modul.

angular.module ("myApp.register", ['ngRoute', 'firebase'])

Apoi, va trebui, de asemenea, să injectăm $ firebaseAuth în controlerul nostru de registru.

.controler ('RegisterCtrl', ['$ scope', '$ firebaseAuth', functie ($ scope, $ firebaseAuth) 

Folosind URL-ul nostru Firebase vom crea o instanță Firebase și folosind acea instanță Firebase, vom crea o $ firebaseAuth obiect. Vom folosi asta $ firebaseAuth obiect pentru a face apelul nostru API. Adăugați următorul cod în register.js, în interiorul controlerului de registru.

var firebaseObj = noua Firebase ("https://blistering-heat-2473.firebaseio.com"); var auth = $ firebaseAuth (firebaseObj);

Acum, vom primi adresa de e-mail și parola domeniul de aplicare $ și apelați creaza utilizator Metoda Firebase. Aici este modificat Inscrie-te metodă.

$ scope.signUp = funcția () if (! $ scope.regForm. $ nevalidă) var email = $ scope.user.email; var parola = $ scope.user.password; dacă (e-mail && parola) auth. $ createUser (email, parolă) .then (funcția () // face lucruri dacă succesul console.log lucruri dacă eșuează console.log (eroare);); ;

După cum puteți vedea în cele de mai sus Inscrie-te funcția, am sunat $ createUser pentru a crea un utilizator nou. În crearea de succes de utilizatori, vom fi logat mesajul de succes în apelul de succes de succes creaza utilizator funcţie. 

Reporniți serverul și îndreptați-l la http: // localhost: 8000 / app / # / register și încercați să vă înregistrați pentru un nou cont de utilizator utilizând o adresă de e-mail și o parolă. Verificați consola browserului după ce faceți clic pe butonul de înregistrare a utilizatorului. Dacă reușiți, ar trebui să aveți mesajul de succes în crearea consolei browserului. 

Apoi, îndreptați browserul spre http: // localhost: 8000 / app / # / home și încercați să vă conectați utilizând noile acreditări de utilizator.

Manipularea apelurilor de înregistrare ale utilizatorilor

Crearea unui apel de succes al utilizatorului

Când înregistrarea unui utilizator este reușită, trebuie să redirecționăm utilizatorul la pagina de conectare. Pentru a redirecționa utilizatorul, va trebui să injectăm serviciul AngularJS de localizare $ în controlorul nostru. Deci, injectați $ locație așa cum se arată:

.controler ('RegisterCtrl', ['$ scope', '$ location', '$ firebaseAuth', functie ($ scope, $ location, $ firebaseAuth) 

Adăugați următorul cod la apelul de reușită al auth. $ createUser pentru a redirecționa utilizatorul la pagina de conectare la înregistrarea reușită a utilizatorului.

$ Location.path ( '/ home');

Salvați modificările, reporniți serverul și încercați să vă înregistrați pentru un alt cont de utilizator. În cazul înregistrării reușite a utilizatorilor, trebuie să fiți redirecționat (ă) la pagina de conectare.

Creați apelul de returnare a utilizatorului

Înregistrarea utilizatorilor poate eșua din cauza unor probleme, de exemplu dacă adresa de e-mail a utilizatorului există deja. Deci, atunci când apare o eroare în timpul înregistrării utilizatorului, trebuie să o afișăm utilizatorului. Vom adăuga un alt mesaj de eroare sub câmpul de parolă și vom seta afișarea acestuia pentru a afișa când apare o eroare. Iată mesajul de eroare:

RegErrorMessage

Așa cum am văzut în codul de mai sus, am folosit ngShow directivă pentru a afișa mesajul de eroare de mai sus când regError este adevarat. Mesajul este afișat utilizând domeniul de aplicare $ variabil regErrorMessage. În creaza utilizator apăsați tasta de eroare, adăugați următorul cod pentru a afișa mesajul de eroare.

$ scope.regError = adevărat; $ scope.regErrorMessage = error.message;

Aici este modificat Inscrie-te funcţie:

$ scope.signUp = funcția () if (! $ scope.regForm. $ nevalidă) var email = $ scope.user.email; var parola = $ scope.user.password; dacă (e-mail && parola) auth. $ createUser (email, parola) .then (function () // face lucruri dacă succesul console.log (' ;, funcția (eroare) // face lucruri dacă eșuează console.log (eroare); $ scope.regError = true; $ scope.regErrorMessage = error.message;); ;

Salvați modificările, reporniți serverul și încercați să vă înregistrați utilizând o adresă de e-mail și o parolă pe care ați utilizat-o deja. În acest sens, ar trebui să aveți un mesaj de eroare afișat pe ecran așa cum este arătat:

Crearea ecranului inițial

Când un utilizator se conectează cu succes la aplicație, vom redirecționa utilizatorul la pagina de pornire. Pagina de pornire va afișa posturile create de utilizator și va avea de asemenea opțiunea de a crea postări noi. Deci, să creăm pagina de pornire.

Navigați la dosarul aplicației din directorul aplicației și creați un nou dosar numit Bine ati venit. Acest dosar va conține șabloane și fișiere legate de pagina de pornire. În interiorul Bine ati venit folder, creați pagini numite welcome.html și welcome.js. Adăugați următorul cod la welcome.html.

          
 
  
 
 
 
 
AngularJS & Firebase App
 
 
Bine ai venit acasa !!
 
   

Interior welcome.js vom defini rutele aplicației pe pagina de întâmpinare. Vom folosi $ routeProvider pentru a crea o rută pentru Bine ati venit vedere. Când definim un nou traseu, vom seta a templateUrl care ar fi prestate în index.html. Împreună cu asta, vom seta și a controlor (un controler este o logică care controlează o anumită imagine) pentru noul creat domeniul de aplicare $ din viziunea de bun venit. Iată ce welcome.js în cele din urmă arată:

"utilizarea strictă"; "$ routeProvider" ($ routeProvider) $ routeProvider.when ('/ welcome', templateUrl: 'welcome / welcome.html'). ', controler:' WelcomeCtrl ');]) .controller (' WelcomeCtrl ', [' $ scope ', functie ($ scope) ]);

Acum, deschide-te app / app.js și include modulul nou adăugat.

angular.module ('myApp', 'ngRoute', 'myApp.home', 'myApp.register', 'myApp.welcome' // Modul nou adăugat])

De asemenea, deschideți-vă app / index.html și să includă nou adăugat register.js scenariu.

Când un utilizator se conectează cu succes, vom redirecționa utilizatorul către pagina de întâmpinare. Deschide app / home / home.js și injectați $ locație în HomeCtrl. 

.controler ("HomeCtrl", ['$ scope', '$ location', '$ firebaseAuth', functie ($ scope, $ location, $ firebaseAuth) 

Vom folosi $ locație pentru a redirecționa utilizatorul către pagina de întâmpinare. În home.js, în interiorul Conectare funcția, la apelul de succes de succes adăugați următorul cod:

$ Location.path ( '/ bun venit');

Salvați modificările, reporniți serverul și încercați să vă conectați la aplicație. La conectarea reușită, ar trebui să puteți vedea un ecran după cum se arată mai jos:

Accesarea domeniului $ între controlorii 

Acum, să afișăm e-mailul utilizatorului conectat în pagina de întâmpinare. Dar există o problemă. În timpul conectării, avem detaliile utilizatorului în HomeCtrl, dar când redirecționăm spre vizualizare de bun venit, domeniul de aplicare $ de HomeCtrl nu este accesibilă în interiorul WelcomeCtrl. Deci, pentru a face acest lucru posibil, vom folosi serviciile AngularJS.

Serviciile unghiulare sunt obiecte substituibile care sunt legate prin cablu cu ajutorul injecției de dependență (DI). Puteți utiliza servicii pentru a organiza și distribui codul în întreaga aplicație.

Folosind servicii putem partaja date între controlere diferite. Așa că home.js vom crea serviciul nostru numit CommonProp.

.service ('CommonProp', functie () var user = '; retur getUser: function () retur utilizator;, setUser: functie (valoare) user = value;;

În CommonProp serviciu am creat o variabilă numită utilizator, unde vom seta e-mailul utilizatorului conectat. Deoarece serviciul poate fi accesat de la toți controlorii, ar fi posibilă partajarea datelor între controlorii care utilizează serviciul CommonProp.

Injectați serviciul CommonProp în HomeCtrl așa cum se arată:

.controler ("HomeCtrl", ['$ scope', '$ location', 'CommonProp', '$ firebaseAuth', funcția ($ scope, $ location, CommonProp, $ firebaseAuth)

La autentificarea cu succes a utilizatorului setați utilizator variabilă în CommonProp după cum se arată.

CommonProp.setUser (user.password.email);

De asemenea, injectați CommonProp serviciu în WelcomeCtrl în welcome.js.

.controler ("WelcomeCtrl", ['$ scope', 'CommonProp', funcție ($ scope, CommonProp) 

În welcome.html modificați mesajul de întâmpinare pentru a include a domeniul de aplicare $ variabilă după cum se arată.

Bine ai venit acasa nume de utilizator !!

Acum în WelcomeCtrl setați valoarea $ scope.username din CommonProp Servicii getUser metodă.

$ scope.username = CommonProp.getUser ();

Salvați toate modificările, reporniți browserul și încercați să vă conectați utilizând orice adresă de e-mail și parolă. În cazul conectării reușite, ar trebui să vedeți adresa dvs. de e-mail pe pagina de întâmpinare.

Înfășurați-o

În acest tutorial, am luat tutorialul de dezvoltare a aplicațiilor pe blog folosind AngularJS și Firebase la nivelul următor. Am implementat funcționalitatea de înscriere și am văzut cum să împărtășim date între doi controlori.

În următoarea parte a acestei serii, vom vedea cum să începeți să implementați pagina "Creați postarea blogului". 

Codul sursă din acest tutorial este disponibil în GitHub.

Spuneți-ne gândurile dvs. în comentariile de mai jos!