Share
Nella prima parte di questa serie, abbiamo visto come iniziare a creare un'applicazione utilizzando AngularJS e Firebase. Abbiamo creato la nostra pagina di accesso e implementato la funzionalità di accesso con Firebase come back-end.
In questo tutorial, porteremo questa serie al livello successivo. Creeremo e configureremo la pagina di registrazione e vedremo come convalidare i moduli in AngularJS.
Iniziamo clonando la prima parte del tutorial da GitHub.
git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git
Una volta che il codice è stato recuperato, accedere alla directory del progetto e installare le dipendenze richieste.
cd AngularJS_Firebase_Part1 npm install
Una volta installate tutte le dipendenze, avviare il server.
inizio di npm
Puntare il browser su http: // localhost: 8000 / app / # / home e l'app dovrebbe essere in esecuzione.
Inizieremo creando una pagina per consentire agli utenti guest di registrarsi. Navigare verso AngularJS_Firebase_Part1 / app e creare una cartella chiamata Registrare. Dentro il Registrare cartella, creare register.html e Register.js File. Ecco come register.html sembra:
AngularJS & Firebase Web App AngularJS & Firebase App!
Come visto nel codice HTML precedente, abbiamo usato Bootstrap per il nostro design HTML.
Dentro Register.js, dichiareremo i percorsi per l'applicazione per accedere alla vista del registro. $ routeProvider ha un metodo chiamato quando, che useremo per creare un percorso per la nostra vista del registro. Quando definiamo un nuovo percorso, imposteremo a TemplateURL quale sarebbe reso nel index.html. Insieme a ciò, stabiliremo anche un controlloreper il nuovo creato $ portata della vista del registro. Un controller è una logica che controlla una vista particolare. Ecco come dovrebbe apparire:
Accentsconagua
'usare rigoroso'; angular.module ('myApp.register', ['ngRoute']) // Route dichiarata .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ register', templateUrl: 'register /register.html ', controller:' RegisterCtrl ');]) // Registra controller .controller (' RegisterCtrl ', [function () ]);Ora apri app.js e includere il modulo di registro myApp.register nell'app.
'usare rigoroso'; angular.module ('myApp', ['ngRoute', 'myApp.home', 'myApp.register' // percorso di registrazione appena aggiunto]). config (['$ routeProvider', function ($ routeProvider) // Imposta la vista defualt della nostra app su home $ routeProvider.otherwise (redirectTo: '/ home');]);Per visualizzare la pagina di registrazione, è necessario includere Register.js all'interno del file di modello HTML principale dell'app. Aprire index.html e includere quanto segue:
Riavvia il server e punta il tuo browser a http: // localhost: 8000 / app / index.html # / register e dovresti vedere la schermata di registrazione:
Successivamente, facciamo in modo che il link della schermata di registrazione rimandi alla schermata di accesso. Nel home.html e register.html c'è un Iscriviti e registrati href rispettivamente. Imposteremo entrambe le sorgenti href in modo che siano accessibili da entrambe le pagine.
Nel home.html:
Iscriviti
Nel register.html:
Registrati
Quando un utente immette il proprio indirizzo e-mail e password nella schermata di registrazione, è necessario convalidare alcune cose. Innanzitutto, l'ID e-mail immesso dovrebbe avere un formato di ID e-mail valido e, in secondo luogo, la password immessa dovrebbe avere una lunghezza minima.
AngularJS fornisce FormController, che tiene traccia di ogni elemento all'interno di un modulo. Dai documenti AngularJS:
FormController tiene traccia di tutti i suoi controlli e moduli nidificati, nonché lo stato di essi, come ad esempio essere valido / non valido o sporco / incontaminato.
FormController ha alcune proprietà come $ incontaminata, $ sporca, $ non valida, $ valida, ecc. Vedremo quali sono queste proprietà e utilizzeremo alcune di queste proprietà per implementare la convalida del modulo per la nostra pagina di registrazione.
Per prima cosa, dobbiamo modificare il nostro modulo HTML per aggiungere messaggi di convalida. Nel register.html modificare il modulo HTML come mostrato.
Salvare le modifiche, riavviare il server e aggiornare il Registrare pagina. Dovresti vedere una pagina come questa:
Ora, come possiamo vedere nella schermata sopra, i messaggi di convalida sono visibili. Dobbiamo mostrarli solo quando l'e-mail e la password non sono validi.
AngularJS fornisce una direttiva chiamata ngShow per mostrare l'HTML in base a una determinata espressione. (Una direttiva AngularJS è un attributo HTML esteso fornito da AngularJS per migliorare le funzionalità degli elementi.) Quindi, useremo ngShow per mostrare il messaggio di convalida quando l'email di input ha dati non validi. Ma come facciamo a sapere se l'email di input non è valida? Bene, ricorda il FormController proprietà che abbiamo discusso in precedenza. FormController ha una proprietà chiamata $ non valida che è Vero se un controllo non è valido. regForm.email. $ invalido sarebbe vero se l'email inserita non è valida. Quindi useremo $ non valida e ngShow per mostrare il messaggio di convalida. Modifica l'estensione del messaggio di posta elettronica come mostrato di seguito:
Inserisci un'e-mail valida.
Salvare le modifiche, riavviare il server e accedere alla pagina di registrazione. Vedrai che il messaggio di convalida per l'ID e-mail non verrà più visualizzato. Ora prova a inserire alcuni dati nell'e-mail di input e verrà visualizzato il messaggio di errore. Prova a inserire un indirizzo email valido e il messaggio di convalida sarà scomparso. Ma il messaggio per la lunghezza minima della password viene comunque visualizzato, inizialmente. Risolviamolo.
AngularJS fornisce un'altra direttiva chiamata ng-minlength per impostare la lunghezza minima per qualsiasi controllo di input. Lo useremo per impostare la lunghezza minima per il campo della password e poi usarlo ngShow per mostrare / nascondere il messaggio di convalida. Modificare il campo della password per includere il ng-minlength direttiva come mostrato:
Successivamente modificare lo span del messaggio di convalida per il campo password come mostrato:
La lunghezza minima della password è di 8 caratteri.
Quindi, se la lunghezza minima del campo della password non corrisponde alla lunghezza minima impostata nel campo di immissione della password, allora regForm.password. $ error.minlength sarà impostato su "true" e verrà mostrato il messaggio di convalida.
Salvare tutte le modifiche, riavviare il server e accedere alla pagina di registrazione. Prova a immettere un valore per la password e il messaggio di convalida verrà visualizzato fino a quando la lunghezza della password è 8.
Ora, per evidenziare gli elementi di input non validi, possiamo usare alcuni stili. Usando una direttiva AngularJS chiamata ngClass possiamo evidenziare dinamicamente gli elementi di input errati usando il comando $ non valida proprietà. Quindi aggiungi il ngClass direttiva al div genitore degli elementi email e password.
Inserisci un'e-mail valida.
La lunghezza minima della password è di 8 caratteri.
Salvare le modifiche, riavviare il server e provare a navigare nella pagina di registrazione. Ora, su voci non valide, i messaggi di convalida vengono visualizzati come di seguito:
Ora, come puoi vedere nella schermata sopra, sugli errori di validazione il Registrare il pulsante è abilitato. Rendiamolo disabilitato a meno che l'e-mail e la password immesse siano valide. AngularJS fornisce una direttiva denominata ngDisabled che aiuta a disabilitare elementi basati su un'espressione. Se e-mail e parola d'ordine sono convalidati allora user.email e password utente i modelli saranno impostati. Quindi, useremo questi due oggetti per abilitare / disabilitare il pulsante di registrazione usando ngDisabled. Modifica il pulsante di registrazione HTML come mostrato:
Come potete vedere, ng-disabled sarà vero se user.email o password utente non è falso, che sarà il caso solo quando i dati non sono validi.
Salvare tutte le modifiche, riavviare il server e aggiornare la pagina di registrazione. Come noterai, il pulsante Registra è disabilitato e rimarrà tale finché non verranno inseriti un indirizzo e-mail e una password validi.
L'implementazione della convalida sullo schermo di accesso è abbastanza simile a quella che abbiamo fatto per la schermata di registrazione. Ti suggerirei di implementare la convalida autonomamente per la schermata di accesso come esercizio. Nel caso rimani bloccato, dai un'occhiata al codice HTML modificato per registrati forma in home.html come mostrato di seguito:
In questa parte del tutorial, abbiamo creato la pagina di registrazione e impostato i percorsi per esso. Abbiamo anche visto come implementare le validazioni usando AngularJS per la pagina di registrazione.
Nella parte successiva, ci concentreremo sull'implementazione della funzionalità di registrazione e su alcune altre funzionalità. Il codice sorgente dell'esercitazione precedente è disponibile su GitHub.
Fateci sapere i vostri pensieri nei commenti qui sotto!
