Nella parte precedente di questa serie, abbiamo creato la pagina di registrazione, impostato le rotte e anche alcune convalide dei form utilizzando AngularJS. In questo tutorial, implementeremo la funzionalità di registrazione collegando AngularJS e l'ultima versione di Firebase. Modificheremo anche il codice di accesso secondo la più recente API Firebase.

Iniziare

Iniziamo clonando la seconda parte del tutorial da GitHub.

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

Dopo la clonazione del codice sorgente, accedere alla directory del progetto e installare le dipendenze richieste.

cd AngularJS_Firebase_Part2 npm install

Una volta installate le dipendenze, avviare il server.

inizio di npm

Puntare il browser su http: // localhost: 8000 / app / e si dovrebbe avere l'applicazione in esecuzione.

Riferimenti Script di Firebase

Firebase ha recentemente rilasciato una versione più recente e il client FirebaseSimpleLogin che abbiamo usato nel nostro primo tutorial per accedere all'utente è stato deprecato e incluso nella libreria principale di Firebase. Quindi apriti app / index.html e rimuovi i riferimenti Firebase esistenti e includi i seguenti riferimenti di script:

Modifica dell'implementazione di accesso

Navigare verso App / home e apri home.js. Rimuovere l'iniettato $ simplefirebaselogin dal controller e iniettare $ firebaseAuth. Usalo per creare il loginObj come mostrato.

.controller ('HomeCtrl', ['$ scope', '$ firebaseAuth', funzione ($ scope, $ firebaseAuth) var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com"); var loginObj = $ firebaseAuth (firebaseObj);));

Il nuovo Firebase fornisce un metodo API chiamato $ authWithPassword per autenticare usando l'indirizzo e-mail e la password. Sostituisci il metodo di accesso con $ authWithPassword nel Registrati funzione come mostrato:

$ scope.SignIn = function (e) e.preventDefault (); var nomeutente = $ scope.user.email; var password = $ scope.user.password; loginObj. $ authWithPassword (email: username, password: password) .then (funzione (utente) // Success callback console.log ('Autenticazione riuscita');, funzione (errore) // Failure callback console. log ('Autenticazione fallita');); 

Salva le modifiche, riavvia il server e prova ad accedere utilizzando un indirizzo email e una password validi. Dovresti avere un messaggio di successo nella console del browser.

Implementazione della funzionalità di registrazione

Useremo il metodo createUser Firebase per creare un nuovo utente utilizzando un indirizzo email e una password. Dal momento che abbiamo già convalidato i dati nel nostro tutorial precedente, associamo una chiamata di funzione di registrazione al clic del pulsante di registrazione. Aggiungi la direttiva ngClick al pulsante di registrazione come mostrato:

Registrare

Aprire Register.js e dentro il RegisterCtrl controller, creare una nuova funzione chiamata Iscriviti. 

.controller ('RegisterCtrl', ['$ scope', function ($ scope) $ scope.signUp = function () // L'implementazione della registrazione è qui !!;]);

Nel Iscriviti funzione controlleremo solo se il nostro modulo è valido:

$ scope.signUp = function () if (! $ scope.regForm. $ invalid) console.log ('Valid form submission'); ;

Aggiungi il ngController direttiva al corpo tag in register.html.

Riavvia il server e prova a navigare nella pagina di registrazione. premi il Registrare dopo aver inserito l'indirizzo e-mail e la password. Ora, se controlli la console del browser dovresti vedere il Invio valido del modulo Messaggio.

Pertanto, prima di chiamare l'API Firebase per creare un nuovo utente, è necessario eseguire l'iniezione Firebase nella nostra applicazione. Aprire Register.js e aggiungi il Firebase modulo.

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

Successivamente, avremo anche bisogno di iniettare il $ firebaseAuth nel nostro controller di registro.

.controller ('RegisterCtrl', ['$ scope', '$ firebaseAuth', function ($ scope, $ firebaseAuth) 

Usando il nostro URL di Firebase creeremo un'istanza di Firebase e useremo l'istanza di Firebase, creeremo a $ firebaseAuth oggetto. Lo useremo $ firebaseAuth oggetto per rendere la nostra chiamata API. Aggiungi il seguente codice in Register.js, all'interno del controller del registro.

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

Ora, otterremo l'indirizzo email e la password da $ portata e chiama il creare un utente Metodo Firebase. Ecco la modifica Iscriviti metodo.

$ scope.signUp = function () if (! $ scope.regForm. $ invalid) var email = $ scope.user.email; var password = $ scope.user.password; if (email && password) auth. $ createUser (email, password) .then (function () // fa cose se successo console.log ('User creation success');, function (error) // do cose se errore console.log (errore);); ;

Come puoi vedere sopra Iscriviti funzione, abbiamo chiamato il $ createUser metodo per creare un nuovo utente. In caso di creazione di un utente di successo, registreremo il messaggio di successo nel callback di successo di creare un utente funzione. 

Riavvia il server e indirizza il browser a http: // localhost: 8000 / app / # / register e prova a registrarsi per un nuovo account utente utilizzando un indirizzo email e una password. Controllare la console del browser dopo aver fatto clic sul pulsante di registrazione dell'utente. In caso di successo, dovresti avere il messaggio di successo per la creazione dell'utente nella console del browser. 

Quindi, indirizza il browser a http: // localhost: 8000 / app / # / home e prova ad accedere utilizzando le nuove credenziali utente.

Gestione delle callback per la registrazione degli utenti

Crea callback con successo utente

Quando una registrazione utente ha esito positivo, è necessario reindirizzare l'utente alla pagina di accesso. Per reindirizzare l'utente, dovremo inserire il servizio $ location AngularJS nel nostro controller. Quindi, iniettati $ location come mostrato:

.controller ('RegisterCtrl', ['$ scope', '$ posizione', '$ firebaseAuth', funzione ($ scope, $ posizione, $ firebaseAuth) 

Aggiungere il seguente codice al callback di successo di auth. $ createUser funzione per reindirizzare l'utente alla pagina di accesso alla corretta registrazione dell'utente.

$ Location.path ( '/ home');

Salvare le modifiche, riavviare il server e provare a registrarsi per un altro account utente. In caso di registrazione dell'utente avvenuta con successo, dovresti essere reindirizzato alla pagina di accesso.

Crea callback di errore utente

Le registrazioni degli utenti potrebbero non riuscire a causa di alcuni problemi, ad esempio se l'indirizzo email dell'utente esiste già. Quindi, quando si verifica un errore durante la registrazione dell'utente, è necessario mostrarlo all'utente. Aggiungeremo un altro messaggio di errore sotto il campo della password e imposteremo il suo display per mostrare quando si verifica un errore. Ecco il messaggio di errore:

 RegErrorMessage

Come visto nel codice sopra, abbiamo usato il ngShow direttiva per mostrare il messaggio di errore sopra quando regError è vero. Il messaggio viene visualizzato utilizzando il $ portata variabile regErrorMessage. Nel creare un utente callback di errore, aggiungere il seguente codice per visualizzare il messaggio di errore.

$ scope.regError = true; $ scope.regErrorMessage = error.message;

Ecco la modifica Iscriviti funzione:

$ scope.signUp = function () if (! $ scope.regForm. $ invalid) var email = $ scope.user.email; var password = $ scope.user.password; if (email && password) auth. $ createUser (email, password) .then (function () // fa cose se successo console.log ('User creation success'); $ location.path ('/ home') ;, function (error) // fa cose se errore console.log (errore); $ scope.regError = true; $ scope.regErrorMessage = error.message;); ;

Salva le modifiche, riavvia il server e prova a registrarti utilizzando un indirizzo email e una password che hai già utilizzato. In questo modo, dovresti visualizzare un messaggio di errore sullo schermo come mostrato:

Creazione della schermata principale

Quando un utente accede con successo all'applicazione, reindirizzeremo l'utente alla pagina iniziale. La home page mostrerà i post creati dall'utente e avrà anche un'opzione per creare nuovi post. Quindi creiamo la home page.

Passare alla cartella dell'app nella directory dell'applicazione e creare una nuova cartella chiamata benvenuto. Questa cartella conterrà modelli e file relativi alla pagina iniziale. Dentro il benvenuto cartella, creare pagine chiamate welcome.html e welcome.js. Aggiungere il seguente codice a welcome.html.

          
 
  
 
 
 
 
AngularJS & Firebase App
 
 
Benvenuto a casa !!
 
   

Dentro welcome.js definiremo i percorsi per l'applicazione alla pagina di benvenuto. Useremo $ routeProvider creare un percorso per il benvenuto vista. Quando definiamo un nuovo percorso, imposteremo a TemplateURL quale sarebbe reso nel index.html. Insieme a ciò, stabiliremo anche un controllore (un controller è una logica che controlla una vista particolare) per il nuovo creato $ portata della vista di benvenuto. Ecco cosa welcome.js finalmente sembra:

'usare rigoroso'; angular.module ('myApp.welcome', ['ngRoute']) .config (['$ routeProvider', funzione ($ routeProvider) $ routeProvider.when ('/ welcome', templateUrl: 'welcome / welcome.html ', controller:' WelcomeCtrl ');]) .controller (' WelcomeCtrl ', [' $ scope ', function ($ scope) ]);

Ora, apri app / app.js e includi il modulo appena aggiunto.

angular.module ('myApp', ['ngRoute', 'myApp.home', 'myApp.register', 'myApp.welcome' // Modulo appena aggiunto])

Inoltre, apri app / index.html e includere il nuovo aggiunto Register.js copione.

Quando un utente accede con successo, reindirizzeremo l'utente alla pagina di benvenuto. Aprire app / home / home.js e iniettare il $ location nel HomeCtrl. 

.controller ('HomeCtrl', ['$ scope', '$ posizione', '$ firebaseAuth', funzione ($ scope, $ posizione, $ firebaseAuth) 

Useremo $ location per reindirizzare l'utente alla pagina di benvenuto. Nel home.js, dentro il Registrati funzione, sul callback di successo aggiungi il seguente codice:

$ Location.path ( '/ benvenuto');

Salva le modifiche, riavvia il server e prova ad accedere all'app. All'accesso riuscito dovresti riuscire a vedere una schermata come mostrato di seguito:

Accesso a $ scope Tra controller 

Ora mostriamo l'e-mail dell'utente che ha effettuato l'accesso nella pagina di benvenuto. Ma c'è un problema. Durante l'accesso, abbiamo i dettagli dell'utente nel file HomeCtrl, ma quando reindirizziamo per dare il benvenuto alla vista, il $ portata di HomeCtrl non è accessibile all'interno del WelcomeCtrl. Quindi, per rendere questo possibile, faremo uso dei servizi di AngularJS.

I servizi angolari sono oggetti intercambiabili che sono collegati insieme utilizzando l'iniezione di dipendenza (DI). Puoi utilizzare i servizi per organizzare e condividere il codice attraverso la tua app.

Utilizzando i servizi possiamo condividere i dati tra diversi controller. Così dentro home.js creeremo il nostro servizio chiamato CommonProp.

.service ('CommonProp', function () var user = "; return getUser: function () return user;, setUser: function (value) user = value;;);

Nel CommonProp servizio abbiamo creato una variabile chiamata utente, dove imposteremo l'email dell'utente connesso. Poiché è possibile accedere al servizio da tutti i controller, è possibile condividere i dati tra i controller che utilizzano il servizio CommonProp.

Inietta il servizio CommonProp nel HomeCtrl come mostrato:

.controller ('HomeCtrl', ['$ scope', '$ posizione', 'CommonProp', '$ firebaseAuth', funzione ($ scope, $ posizione, CommonProp, $ firebaseAuth) 

In caso di autenticazione utente riuscita, impostare il utente variabile in CommonProp servizio come mostrato.

CommonProp.setUser (user.password.email);

Inoltre, iniettare il CommonProp servizio in WelcomeCtrl nel welcome.js.

.controller ('WelcomeCtrl', ['$ scope', 'CommonProp', function ($ scope, CommonProp) 

Nel welcome.html modificare il messaggio di benvenuto per includere a $ portata variabile come mostrato.

Benvenuto a casa nome utente !!

Ora nel WelcomeCtrl imposta il valore del $ scope.username a partire dal CommonProp Servizi getUser metodo.

$ scope.username = CommonProp.getUser ();

Salva tutte le modifiche, riavvia il browser e prova ad accedere utilizzando qualsiasi indirizzo email e password. In caso di accesso riuscito dovresti vedere il tuo indirizzo e-mail nella pagina di benvenuto.

Avvolgendolo

In questo tutorial, abbiamo portato il nostro tutorial sullo sviluppo di applicazioni per blog usando AngularJS e Firebase al livello successivo. Abbiamo implementato la funzionalità di registrazione e abbiamo anche visto come condividere i dati tra due controller.

Nella parte successiva di questa serie, vedremo come iniziare a implementare la pagina "Crea post di blog". 

Il codice sorgente di questo tutorial è disponibile in GitHub.

Fateci sapere i vostri pensieri nei commenti qui sotto!