Crea la tua prima App Angular in soli 20 minuti

Crea la tua prima App Angular in soli 20 minuti

Angular è un framework JavaScript, creato da Misko Hevery e gestito da Google. È linguaggio di programmazione basato sul pattern MVC (Model View Controller). Puoi visitare la pagina ufficiale per saperne di più.

Al momento, l’ultima versione di Angular è la 7.1.4. Precedentemente la prima generazione 1.x e la seconda generazione 2.x erano completamente diverse nelle loro strutture e metodi. Non preoccuparti se ti senti confuso sulla versione, perché in questo articolo useremo la seconda generazione 2.x.


In questo tutorial di Todo List apprenderai:

  • Aggiungere un item (Come creare e fare submit di un form in Angular)
  • Rimuovere un item (Come aggiungere un evento in Angular)
  • Animazioni (Come animare i components)

Prerequisiti:

  • NodeJs

Verifica che NodeJs sia installato sul tuo computer. Scopri come fare.

  • npm

npm (node package manager) è automaticamente installato con NodeJs

Verifica la versione di Node:

node -v

npm:

npm -v

Angular-CLI

Dovresti scaricare l’ultima versione di Angular-CLI. Ecco maggiori dettagli.

Per installarlo, esegui il seguente comando:

npm install -g @angular/cli

Ed infine, dovresti avere:

  • Conoscenza base di JavaScript
  • Fondamentali di HTML e CSS

Non hai bisogno di avere alcuna conoscenza di Angular.

Ora che abbiamo settato l’environment e siamo certi di avere le basi per poter proseguire, iniziamo!


Creiamo la nostra prima app

Useremo angular-cli per creare e generare i nostri components, services, router, e directives.

Per creare un nuovo progetto Angular con Angular-cli, basta posizionarsi con il terminale o prompt dei comandi sulla cartella che abbiamo scelto per ospitare il nostro codice, e digitare:

ng new my-app //dove my-app sta per il nome dell'app

Il progetto sarà generato in automatico. Ora andiamo a creare la nostra to-do app!

ng new todo-app

Successivamente, apri la cartella di progetto nel tuo text-editor. Uno dei miei preferiti è Visual Studio Code o Atom, ma tu puoi usare qualsiasi editor. L’importante è che ti dia la possibilità di esplorare l’albero delle cartelle.

Di seguito è come la struttura della tua app dovrebbe apparire:

Non preoccuparti se sei confuso sui files. Tutto il nostro lavoro verrà fatto nella cartella app.

Contiene 5 files:

Nota bene: Angular 2 utilizza TypeScript, i cui files terminano con l’estensione “.ts“.

Per creare un’interfaccia carina per la nostra app, useremo il framework Bootstrap 4.

Includi il cdn nel file index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Fai partire l’app nel tuo terminale:

ng serve

L’app runnerà su http://localhost:4200/.

Fino ad ora, tutto è andato come il previsto :D!

Ora iniziamo a strutturare un po’ di HTML. Useremo le classi di Bootstrap per creare un semplce form.

app.component.html:

<div class="container">
 <form>
  <div class="form-group">
  <h1 class="text-center text-primary">Todo App</h1>
   <div class="input-group-prepend">
       <input type="text" class="form-control" placeholder="Add Todo" name="todo">
    <span class="input-group-text">Add</span>
   </div>
  </div>
 </form>
</div>

In app.component.css:

body{
 padding: 0;
 margin: 0;
}
form{
 max-width: 25em;
 margin: 1em auto;
}

Per catturare il valore di input in Angular 2, possiamo usare la direttiva ngModel. Puoi inserire una variabile come un attributo all’interno dell’elemento di input.

<input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel>

Per creare una variabile che sia anche attributo, usa il cancelletto # seguito dal nome della variabile.

<input #myVariable type="text" name="text" ngModel>
// prendi il valore della variabile
<p>{{myVariable.value}}</p>

Ora prendi il valore della variabile “todo”:

<p>{{todo.value}}</p>

Tutto ok per ora ;)!

Ora dobbiamo salvare il valore catturato nell’input. Possiamo creare un array vuoto all’interno di app.component.ts e dentro la classe AppComponent:

export class AppComponent {
  todoArray=[]
 
}

Dopo dobbiamo creare un event di tipo click sul pulsante di aggiunta che “pusha” i valori nel nostro “todoArray“.

app.component.html:

<span class="input-group-text" (click)="addTodo(todo.value)">Add</span>

In app.component.ts:

export class AppComponent {
 todoArray=[]
addTodo(value){
    this.todoArray.push(value)
    console.log(this.todos)
  }
 
}

Nella console di Chrome / Firefox / Safari, utilizza console.log(this.todoArray) per vedere i valori all’interno della lista.


Estrapola i dati da “todoArray”

Ora dobbiamo estrapolare e mostrare a video i valori all’interno del nostro “todoArray“. Andremo ad usare la directive *ngFor per mandare in loop il nostro array e mostrare i valori a video.

app.component.html:

<div class="data">
  <ul class="list-instyled">
   <li *ngFor="let todo of todoArray">{{todo}}</li>
  </ul>
  </div>

Dopo aver preso i dati:

I valori verranno aggiornati automaticamente ogni volta che clicchiamo il bottone Add.

Diamo uno style più accattivante

Mi piace utilizzare Google-fonts ed i Material-icons che sono totalmente gratuiti.

Includi il font scelto dentro app.component.css:

/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway');

Ed i Material-icons dentro index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Dopo aver aggiunto un po’ di style alla nostra app, dovrebbe apparire più o meno così:

Per usare le Material icons:

<i class="material-icons>iconName</i>

Aggiungi le icone “delete” e “add” in app.component.html:

<span class="input-group-text" (click)="addTodo(todo.value)">
<i class="material-icons">add</i>
</span>
<li *ngFor="let todo of todoArray">{{todo}}
<i class="material-icons">delete</i>
</li>

Di seguito tutto il codice dello style in app.component.css:

/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway');
body{
 padding: 0;
 margin: 0;
}
form{
 max-width: 30em;
 margin: 4em auto;
 position: relative;
 background: #f4f4f4;
 padding: 2em 3em;
}
form h1{
    font-family: "Raleway";
    color:#F97300; 
}
form input[type=text]::placeholder{
   font-family: "Raleway";
   color:#666; 
}
form .data{
    margin-top: 1em;
}
form .data li{
 background: #fff;
 border-left: 4px solid #F97300;
 padding: 1em;
 margin: 1em auto;
 color: #666;
 font-family: "Raleway";
}
form .data li i{
    float: right;
    color: #888;
    cursor: pointer;
}
form .input-group-text{
    background: #F97300;
    border-radius: 50%;
    width: 5em;
    height: 5em;
    padding: 1em 23px;
    color: #fff;
    position: absolute;
    right: 13px;
    top: 68px;
    cursor: pointer;
}
form .input-group-text i{
    font-size: 2em;
}
form .form-control{
 height: 3em;
    font-family: "Raleway";
}
form .form-control:focus{
 box-shadow: 0;
}

La nostra app è quasi terminata, ma è necessario aggiungere alcune funzionalità. Una funzionalità di eliminazione dovrebbe consentire agli utenti di fare clic sull’incona del cestino ed eliminare un elemento. Sarebbe anche bello avere la possibilità di inserire un nuovo elemento premendo su invio, invece di fare clic sul pulsante Aggiungi.


Eliminare un item

Per aggiungere la funzionalità di cancellazione, useremo il metodo “splice” di Javascript. Andremo a ciclare il nostro “todoArray” ed estrarremo l’item che vogliamo eliminare.

Aggiungiamo un (click) event all’icona di cancellazione e gli diamo l’elemento del ciclo corrente come parametro:

<li *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>

Dentro app.component.ts aggiungiamo il seguente metodo:

deleteItem(){
   console.log("delete item")
  }

Quando clicchi sull’icona, dovresti vedere questo messaggio in console:

Ora dobbiamo ciclare l’array ed effettuare lo splice dell’item che abbiamo cliccato:

In app.component.ts:

deleteItem(todo){
   for(let i=0 ;i<= this.todoArray.length ;i++){
    if(todo== this.todoArray[i]){
     this.todoArray.splice(i,1)
    }
   }
  }

Il risultato sarà:

Ci sei riuscito! 😀

Aggiungiamo l’evento sul pulsante Invio

Possiamo aggiungere il submit del form invece che all’evento (click) dell’icona, sul tasto invio della tastiera. Come? Ci viene in aiuto una directive chiamata (ngSubmit) che si applica sul Form:

(ngSubmit)="TodoSubmit()"

Abbiamo bisogno di aggiungere la variabile “#todoForm” al modulo e dargli “ngForm” come valore. In questo caso, abbiamo solo un campo quindi otterremo solo un singolo valore. Se disponiamo di più campi, l’evento di invio restituirà i valori di tutti i campi nel modulo.

app.component.html:

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value)"></form>

in app.component.ts:

// submit Form
  todoSubmit(value:any){
 console.log(value)
  }

Controlla la console. Dovrebbe restituire un array di oggetti:

Ora dobbiamo pushare il valore restituito all’interno del “todoArray”:

// submit Form
  todoSubmit(value:any){
     if(value!==""){
    this.todoArray.push(value.todo)
     //this.todoForm.reset()
    }else{
      alert('Field required **')
    }
    
  }

Ci siamo! 😀 Il valore è stato inserito senza il bisogno di cliccare sul pulsante. Solo premendo “enter”:

Solo un’altra cosa. Per svuotare il campo di input dopo che si è fatto submit, basta agire sull’html stesso. È possibile concatenare più istruzioni all’interno di una directive di tipo metodo, concatenandole con un punto e virgola.

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value); todoForm.resetForm()" ></form>

Il form verrà resettato dopo ogni submit ora:

Aggiungiamo delle animazioni


Mi piace aggiungere un tocco di animazione. Per aggiungere animazioni, importa i componenti delle animazioni nel tuo app.component.ts:

import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';

Dopo aggiungi la proprietà animations al decorator “@component”:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations:[
   trigger("moveInLeft",[
      transition("void=> *",[style({transform:"translateX(300px)"}),
        animate(200,keyframes([
         style({transform:"translateX(300px)"}),
         style({transform:"translateX(0)"})
 
          ]))]),
transition("*=>void",[style({transform:"translateX(0px)"}),
        animate(100,keyframes([
         style({transform:"translateX(0px)"}),
         style({transform:"translateX(300px)"})
 
          ]))])    
     
    ])
]
})

Ora l’item ha un effetto “carino” quando è aggiunto o rimosso.

Tutto il codice

app.component.ts

import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations:[
   trigger("moveInLeft",[
      transition("void=> *",[style({transform:"translateX(300px)"}),
        animate(200,keyframes([
         style({transform:"translateX(300px)"}),
         style({transform:"translateX(0)"})
 
          ]))]),
transition("*=>void",[style({transform:"translateX(0px)"}),
        animate(100,keyframes([
         style({transform:"translateX(0px)"}),
         style({transform:"translateX(300px)"})
 
          ]))])    
     
    ])
]
})
export class AppComponent {
  todoArray=[];
  todo;
  //todoForm: new FormGroup()
addTodo(value){
    if(value!==""){
     this.todoArray.push(value)
    //console.log(this.todos) 
  }else{
    alert('Field required **')
  }
    
  }
/*delete item*/
  deleteItem(todo){
   for(let i=0 ;i<= this.todoArray.length ;i++){
    if(todo== this.todoArray[i]){
     this.todoArray.splice(i,1)
    }
   }
  }
// submit Form
  todoSubmit(value:any){
     if(value!==""){
    this.todoArray.push(value.todo)
     //this.todoForm.reset()
    }else{
      alert('Field required **')
    }
    
  }
 
}

app.component.html

<div class="container">
 <form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" >
  <div class="form-group">
  <h1 class="text-center ">Todo App</h1>
   <div class="input-group-prepend">
       <input type="text" #todo  class="form-control" placeholder="Add Todo" name="todo" ngModel>
    <span class="input-group-text" (click)="addTodo(todo.value)">
    <i class="material-icons">add</i></span>
   </div>
  </div>
  <div class="data">
  <ul class="list-unstyled">
   <li [@moveInLeft]  *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>
  </ul>
 </div>
 </form>
</div>

app.component.css

/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway');
body{
 padding: 0;
 margin: 0;
}
form{
 max-width: 30em;
 margin: 4em auto;
 position: relative;
    background: #f4f4f4;
    padding: 2em 3em;
    overflow: hidden;
}
form h1{
    font-family: "Raleway";
    color:#F97300; 
}
form input[type=text]::placeholder{
   font-family: "Raleway";
   color:#666; 
}
form .data{
    margin-top: 1em;
}
form .data li{
 background: #fff;
 border-left: 4px solid #F97300;
 padding: 1em;
 margin: 1em auto;
 color: #666;
 font-family: "Raleway";
}
form .data li i{
    float: right;
    color: #888;
    cursor: pointer;
}
form .input-group-text{
    background: #F97300;
    border-radius: 50%;
    width: 5em;
    height: 5em;
    padding: 1em 23px;
    color: #fff;
    position: absolute;
    right: 13px;
    top: 68px;
    cursor: pointer;
}
form .input-group-text i{
    font-size: 2em;
}
form .form-control{
 height: 3em;
    font-family: "Raleway";
}
form .form-control:focus{
 box-shadow: 0;
}

Abbiamo finito 😉 !

Conclusioni

Angular è più facile di quanto pensi. È una delle migliori librerie JavaScript e ha un grande supporto e una bella community. Ha anche strumenti che rendono il lavoro facile e veloce, come Angular-cli. Fammi sapere nei commenti cosa ne pensi! 😀


2 comments

  1. Moreno says:

    Buon Giorno Simone
    Mi chiamo Moreno, 65 anni e sto iniziando a entrare nel mondo Angular.
    Avrei la necessità di realizzare una Web Application, con finalità totalmente di volontariato, per la parrocchia.
    Dato che sono all’inizio del mio percorso formativo su Angular, vorrei chiederLe se potesse aiutarmi nella progettazione per evitare di commettere errori di analisi e sucessivamente realizzativi che possano compromettere fin dal suo nascere il progetto.
    Vorrei dettagliarLe in privato il senso della web application che vorrei mi servisse per poter essere lo strumento di apprendimento di questa nuova modalità di sviluppo.
    Ribadisco che le motivazioni che mi spingono a questa realizzazione sono solo di carattere non profit.
    Cordialmente La saluto
    Moreno

    • Simone says:

      Ciao Moreno, io non conosco la tua formazione e le tue competenze. Quindi indirizzarti in un determinato percorso formativo risulta per me impossibile, non conoscendo le tue basi. Ti consiglio di seguire qualche guida su html.it che ha tutto ciò di cui hai bisogno per iniziare un progetto in Angular. Munisciti di pazienza e buona volontà, il percorso è lungo.

      Simone

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *