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

Creare un App per Blogging Utilizzando Angular e MongoDB: Login

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Home

Italian (Italiano) translation by Stefano Pizzacalla (you can also view the original English article)

Angular è un framework one-stop utilizzato per creare applicazione mobili e web riutilizzando lo stesso codice. Programmando con Angular puoi dividere l'intera applicazione in componenti riutilizzabili, che rendono semplice conservare e riutilizzare il codice.

In questa serie di tutorial, imparerai come creare un applicazione web utilizzando Angular con MongoDB come back end. Utilizzerai Node.js per l'esecuzione del server.

Nel corso di questo tutorial, costruirai un'applicazione per il blogging utilizzando Angular, Node.js e MongoDB.

In questo tutorial, vedrai come impostare l'applicazione e creare il componente Login

Iniziamo

Cominciamo installando Angular CLI.

Una volta installato Angular CLI, creare una cartella progetto chiamata AngularBlogApp.

Dalla cartella del progetto, creare una nuova app Angular utilizzando il seguente comando:

Una volta creata l'app client, navigare all'interno della cartella del progetto e installare le dipendenze richieste utilizzando la Gestione Pacchetti di Node (npm).

Avviare il client server utilizzando npm.

Dovresti adesso avere l'applicazione in esecuzione all'indirizzo http://localhost:4200/.

Impostare l'Applicazione

La tua applicazione web Angular avrà un componente radice. Creare una cartella chiamata root all'interno della cartella src/app. Creare un file chiamato root.component.html e aggiungere il seguente codice HTML:

Aggiungi un file chiamato root.component.ts e aggiungi il seguente codice:

Rimuovere i file app.component.html, app.component.ts, app.component.scss, e app.component.spec.ts. Dovrà rimanere soltanto un file chiamato app.module.ts all'interno della cartella src/app.

Importare RootComponent all'interno del file app.module.ts.

Includere RootComponent in ngModules e nel bootstrap.

Salvare i cambiamenti e ravviare il server. Il RootComponent verrà visualizzato al caricamento dell'applicazione.

Userete il Router di Angular per il routing nella nostra applicazione di blogging. A questo punto importare le dipendenze relative al routing in un nuovo file chiamato app.routing.ts all'interno della cartella src/app.

Definire il path del route insieme con i componenti come illustrato:

Esportare il routers per creare un modulo con tutti i route providers.

Ecco come il file app.routing.ts dovrebbe apparire:

Come si vede nel precedente codice, non hai ancora creato il LoginComponent. È stato aggiunto per rendere più chiaro il codice.

Importare la classe ROUTING nel file app.module.ts.

Includerlo in NgModule.

Inserire RouterOutlet nella pagina root.component.html. Qui è dove viene eseguio il rendering del componente route.

Creare una cartella chiamata login all'interno della cartella src/app. All'interno della cartella login, creare un file chiamato login.component.ts e aggiungere il seguente codice:

Creare un file chiamato login.component.html e aggiungere il seguente codice:

Salvare tutti i cambiamenti e riavviare il server. Come per i routes definiti quando l'applicazione verrà caricata, LoginComponent verrà visualizzato.

Login Component - Blogging App

Creazione del Componente Login

Hai già gettato le basi per il LoginComponent durante la configurazione dell'applicazione. Creiamo ora la view per il LoginComponent utilizzando Bootstrap.

Scaricare e includere lo stile CSS di bootstrap nella cartella assets e includere le referenze nella pagina src/index.html.

Posizionare app-root all'interno di un contenitore nella pagina index.html.

Aggiungere il seguente codice HTML nella pagina login.component.html.

Creare un file chiamato login.component.css al'interno della cartella login e aggiungere il seguente codice CSS.

Modificare il decoratore @Component includendo il codice CSS.

Salvare le modifiche a provare a caricare l'applicazione. Si vedrà il LoginComponent visualizzato con la view del login.

Login Screen Angular Blogging App

Creazione del Login Service

LoginComponent avrà necessità di comunicare con il database per vedere se l'accesso dell'utente è valido oppure no. Sarà necessario quindi effettuare delle chiamate API. Manterrai la porzione di interazione del database in un file separato chiamato login.service.ts.

Creare un file chiamato login.service.ts e aggiungere il seguente codice al suo interno:

Importare LoginService nel LoginComponent e aggiungerlo come provider nel decoratore del componente.

Aggiungere un metodo chiamato validateLogin nel file login.service.ts che esegue la chiamata API. Ecco come il codice appare:

Come visto nel codice precedente, ciò produce un comportamento che potrà essere iscritto nel file login.component.ts. Ecco come il file login.service.ts, appare:

Implementare la Convalida dell'Accesso Utente

Aggiungere la direttiva ngModel all'elemento di input in login.component.html.

Aggiungere un evento click al pulsante.

Ecco come login.component.html appare:

Definire e inizializzare la variabile utente nel file login.component.ts.

Il modello User è stato definito nella cartella src/app/models. Ecco come appare:

Definire un metodo chiamato validateLogin che verrà chiamato con il click sul pulsante. Ecco come il metodo appare:

Quando username e password vengono inseriti, il metodo validatelogin viene iscritto al metodo LoginService per validare l'autenticazione utente.

Ecco come il file login.component.ts appare:

Concludendo

In questa parte della serie di tutorial per creare un app di blogging con Angular, hai visto come partire per la creazione di un web app con Angular. Hai creato la struttura base dell'app Angular e il LoginComponent che consentirà all'utente di convalidare nome utente e password.

Nella prossima parte della serie di tutorial, scriverai il REST API per la validazione dell'autenticazione utente e costruirai il componente home.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Fateci sapere i vostri pensieri e suggerimenti di seguito nei commenti

Advertisement
Advertisement
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.