Guida Angular2 italiano – Parte 2 – Creiamo un task engine dinamico

Continua la nostra guida angular2 italiano. In questa seconda parte andiamo a strutturare la nostra applicazione creando un task engine dinamico.

NOTA BENE: Questo articolo fa parte di un ciclo di tutorial…ti invito a leggere la parte precedente–> Guida angularjs2 italiano – Parte 1: Installazione e configurazione

Nella precedente guida abbiamo analizzato come installare e configurare Angularjs2. In questa seconda parte iniziamo a dare forma alla nostra prima app: un engine di task dinamico. Scopriamo nel dettaglio come fare.

Per prima cosa apriamo il file app.component.ts e aggiungiamo una semplice classe che va a dichiarare che tipo di varibili utilizzeremo.

export class Task {
  id: number; // variabile id numero
  title: string; // variabile title stringa
}

A questo punto aggiungiamo all’interno della classe Component delle variabili da visualizzare.

  	title = 'Task';
	task: Task = {
	  id: 1,
	  title: 'Primo task!'
	};

come vedete in questo caso abbiamo “forzato” noi cosa far scrivere alla nostra app…ovviamente tutto questo nei prossimi step diverrà dinamico.

Ok e ora? Ora vi basterà specificare un template. Un template in Angular è di fatto lo scheletro della vostra view, ed è il luogo in cui definire quali e dove stampare le nostre variabili. Il richiamo template va posizionato dentro  @Component. In questo caso specifico molto elementare:

  template:` 
  <h1>{{title}}</h1> 
  <h2>{{task.title}}</h2>
  `

In questo caso stamperemo il titolo dentro l’h1 e il titolo del task dentro il tag h2.

NOTA/TIPS UTILE: Ho usato il backtick (tastiera italiana qwerty italiana ALT+96). In questo modo potete mettere su più righe il vostro template. Senza il backtick (usando pertanto l’apice normale) dovrete scrivere il template senza battere invio.

Per completezza ecco il riepilogo completo file app.component.ts:

import { Component } from '@angular/core';

export class Task {
  id: number;
  title: string;
}

@Component({
  selector: 'my-app', 
  template:` 
  <h1>{{title}}</h1>
  <h2>{{task.title}}</h2>
  `
})
export class AppComponent {

  	title = 'Task';
	task: Task = {
	  id: 1,
	  title: 'Primo task!'
	};

 }

A questo punto aprite da terminale, spostatevi nella cartella del vostro progetto, e digitate:

npm init

Dovreste vedere a schermo come segue:

noterete che se andate a cambiare (per ora in modo poco ortodosso) il valore di “Primo Task!” in “Primo task Targetweb” il live server refresherà automaticamente lo schermo proponendo il nuovo titolo ;).

Rendiamo dinamica la nostra app!

A questo punto andiamo a “toccare con mano” la – vera – potenza di angular. Vogliamo inserire un input di testo dentro la nostra app per rendere dinamico il rendering del titolo direttamente da browser (senza forzare manualmente via codice). Per prima cosa attiviamo il controllo dei form di angularjs2.

Apriamo il file app.module.ts

import { FormsModule }   from '@angular/forms'; // abilita uso forms angularjs2

[...]

imports: [ 
  BrowserModule,
  FormsModule // abilita uso forms angularjs2
],

Modifichiamo e aggiungiamo come sopra-riportato. Ecco come dovreste vedere il file app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // abilita uso forms angularjs2

import { AppComponent }   from './app.component';


@NgModule({
  imports: [ 
  BrowserModule,
  FormsModule // abilita uso forms angularjs2
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

A questo punto torniamo su app.component.ts.

Modifichiamo il nostro template di rendering aggiunendo l’input text

  template:` 
  <h1>{{title}}</h1>
  <h2>{{task.title}}</h2>
  <div><label>id: </label>{{task.id}}</div>
    <div>
      <label>titolo: </label>
      <input [(ngModel)]="task.title" placeholder="title">
    </div>
  `

Il comando ngModel attiva il two-way binding su quell’input form aggiungendo un “listener” ovvero rimane in ascolto della variable task.title. Se cambia in quell’input angular provvederà a cambiarlo anche altrove.

Salvate e provate a modificare il vostro primo task direttamente scrivendo dentro l’input form!

Questo articolo ti è stato utile? Non perderti gli articoli successivi su AngularJS 2:

1 – Consulta la sezione AngularJs

2 – Seguimi su Facebook

3 – Hai bisogno di una consulenza o devi risolvere qualche problema? Contattami, amo le sfide.