Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular

Creiamo una web app da zero usando AngularJS a Firebase: Parte 2

by
Read Time:7 minsLanguages:
This post is part of a series called Creating a Web App From Scratch Using AngularJS and Firebase.
Creating a Web App From Scratch Using AngularJS and Firebase
Creating a Web App From Scratch Using AngularJS and Firebase: Part 3

Italian (Italiano) translation by Giuseppe D. Barbagallo (you can also view the original English article)

Nella prima parte di questa serie abbiamo visto come iniziare a creare un'applicazione usando AngularJS e Firebase. Abbiamo creato una pagina di entrata e implementato la fuznionalità di sign-in usando Firebase come back-end.

In questo tutorial porteremo la serie al livello successivo. Creeremo e con figureremo una pagina di registrazione e vedremo come fare un form di validazione in AngularJS.

Iniziamo

Iniziamo con il clonare la prima parte del tutorial da GitHub.

Una volta che il codice è sincronizzato, spostiamoci nella directory del progetto e installiamo le dipendenze richieste.

Una volta che tutte le dipendenze sono installate, avviamo il server.

Punta il tuo browser all'indirizzo http://localhost:8000/app/#/home e dovresti avere l'app avviata.

Creiamo una schermata di registrazione

Inizieremo creando una pagina per la registrazione degli utenti ospiti. Spostiamoci in AngularJS_Firebase_Part1/app e creiamo la cartella register. All'interno della cartella register creiamo i file register.html e register.js. Ecco come appare register.html:

Come si vede nel codice HTML sopra, abbiamo utilizzato Bootstrap per il nostro progetto HTML.

All'interno di register.js dichiariamo i percorsi per l'applicazione per accedere alla vista di registrazione. $routeProvider ha un metodo chiamato when che useremo per creare un percorso per la nostra vista di registrazione. Quando definiamo un nuovo percorso, verrà impostato un TemplateURL che sarà renderizzato nel index.html. Insieme a questo, imposteremo un controller per il nuovo $scope che verrà creato per la vista di registrazione. Un controller è una logica che appunto controlla una particolare vista. Ecco come dovrebbe apparire:

Adesso apriamo app.js e includiamo il modulo di registrazione myApp.register nell'app.

Per visualizzare la pagina di registrazione bisogna includere register.js all'interno del template HTML generale dell'app. Apriamo index.html e includiamo il seguente codice:

Riavviamo il server e puntiamo il browser all'indirizzo http://localhost:8000/app/index.html#/register e verrà visualizzata la nostra schermata di registrazione:

Sign-up screen for AngularJS Firebase AppSign-up screen for AngularJS Firebase AppSign-up screen for AngularJS Firebase App

Step seguente colleghiamo la schermata di registrazione con quella di accesso. In home.html e in register.html c'è rispettivamente un href a sign up e a sign in. Imposteremo entrambi i puntamenti href così che siano accessibili da entrambe le pagine.

In home.html:

E in register.html:

Validazione Form in AngularJS

Quando un utente immette la propria email e la propria password nella schermata di registrazione bisogna validare un po' di cose. In primo luogo, l'e-mail di ID inserita deve avere un formato di e-mail valido, e in secondo luogo la password inserita deve avere una lunghezza minima.

AngularJS fornisce FormController, che tiene traccia di ogni elemento all'interno del Form. Dalla documentazione AngularJS:

FormController tiene traccia di tutti i suoi controlli e le form nidificate, nonché il loro stato, come l'essere valido/non valido o sporco/incontaminata.

FormController ha diverse proprietà come $pristine, $dirty, $invalid, $valid, ecc. Vedremo quali sono queste proprietà e ne useremo qualcuna per implementare la validazione del form per la nostra pagina di registrazione.

Prima di tutto dobbiamo modificare in nostro form HTML per aggiungere i messaggi di validazione. In register.html modifichiamo il form HTML come mostrato.

Salviamo le modifiche, riavviamo il server e ricarichiamo la pagina register. Dovremmo ottenere una pagina come questa:

AngularJS Firebase App register pageAngularJS Firebase App register pageAngularJS Firebase App register page

Come possiamo vedere nella schermata di sopra adesso i messaggio di validazione sono visibili. Li mostreremo solamente quando l'e-mail e la password non sono valide.

AngularJS fornisce una direttiva chiamata ngShow che permette di mostrare codice HTML sulla base di una certa espressione. (Una direttiva AngularJS e un'estensione degli attributi HTML fornita da AngularJS per potenziare la capacità degli elementi Html) Quindi useremo ngShow per mostrare i messaggi di validazione quando l'email immessa ha dati non validi. Come facciamo a sapere se l'email immessa è valida? Riprendiamo il discorso sulle proprietà del FormController di cui parlavamo prima. FormController ha una proprietà chiamata $invalid che risulterà True, vera, se un controllo non è valido. regForm.email.$invalid dovrebbe essere vera se l'email inserita non è un'email valida. Quindi useremo $invalid e ngShow per mostrare il messaggio di validazione. Modifichiamo la riga riguardante il messaggio dell'email come illustrato di seguito:

Salviamo i cambiamenti, riavviamo il server e apriamo la pagina di registrazione. Possiamo vedere che il messaggio di validazione per Email ID non viene più mostrato. Adesso, proviamo a inserire qualche dato nella casella dell'email e il messaggio comparirà. Proviamo a immettere un indirizzo email valido e il messaggio scomparirà. Il messaggio di lunghezza minima della password viene ancora mostrato, inizialmente. Sistemiamo il tutto.

AngularJS fornisce un'altra direttiva chiamata ng-minlenght per impostare il controllo della lunghezza minima di un qualsiasi input. Lo useremo per configurare la lunghezza minima per il campo password e quindi useremo ngShow per mostrare e nascondere il messaggio di validazione. Modifichiamo il campo password in modo da includere la direttiva ng-minlength come mostrato:

Adesso modifichiamo la parte di codice inerente al messaggio di validazione della password:

Così, se la lunghezza minima del campo password non rientra nella lunghezza minima impostata per questo campo, regForm.password.$error.minlength sarà impostato come "true" e il messaggio di validazione sarà mostrato.

Salviamo le modifiche, riavviamo il server e ricarichiamo la pagina di registrazione. Proviamo a immettere un valore per la password, il messaggio di validazione verrà mostrato fino a quando la lunghezza della password non sarà di 8 caratteri o più.

Ora per evidenziare un'immissione di dati non valida possiamo modificare un po' lo stile. Con l'utilizzo della direttiva ngClass possiamo dinamicamente evidenziare l'elemento immesso non corretto usando la proprietà $invalid. quindi aggiungiamo la direttiva ngClass al div genitore degli elementi email e password.

Salviamo i cambiamenti, riavviamo il server e proviamo ad aprire la pagina di registrazione. Adesso in presenza di immissioni non valide i messaggi di validazione verranno mostrati come sotto:

Validation messages showing on registration pageValidation messages showing on registration pageValidation messages showing on registration page

Come possiamo vedere nella schermata sopra, in presenza di errori di validazione il pulsante Register è abilitato. Disabilitiamolo fino a quando non vengano inserite email e password valide. AngularJS ci fornisce una direttiva ngDisabled che ci aiuta a disabilitare gli elementi in base a un'espressione. Se email e password sono validi, i modelli user.email e user.password risulteranno correttamente impostati. Useremo quindi questi due oggetti per abilitare/disabilitare il pulsante di registrazione usando ngDisabled. Modifichiamo il codice HTML del pulsante register come mostrato:

Come possiamo vedere, ng-disabled sarà vera se user.email o user.password saranno non falsi, che è il caso solo quando il dato non è valido.

Salviamo i cambiamenti, riavviamo il server e ricarichiamo la pagina di registrazione. Notiamo che il pulsante Register è disabilitato e rimarrà così fino a quando non saranno inserite un'email e una password valide.

Registration screen with Register button disabledRegistration screen with Register button disabledRegistration screen with Register button disabled

Validazione della Schermata di Sign-In

Implementare la validazione nella schermata di Sign-in è molto simile al metodo usato per la schermata di registrazione. Ti suggeriamo di implementare da solo la validazione della schermata di Sign-in come esercizio. Se trovassi difficoltà dai un'occhiata al codice HTML modificato per il form Sign in nel file home.html mostrato sotto:

Riassumiamo

In questa parte abbiamo creato la pagina di registrazione e configurato i percorsi necessari. Abbiamo visto come implementare la validazione usando AngularJS per la pagina di Registrazione.

Nella prossima parte ci soffermeremo su come implementare ulteriormente la registrazione e qualche altra caratteristica. Il codice sorgente di questa parte è disponibile su GitHub.

Fateci sapere le vostre opinioni nei commenti! Alla prossima!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.