TW 2022-2023

Angular

Angular

Angular è un framework per la creazione di applicazioni web. E' stato creato da Google e si basa su Typescript.

Dispone di supporto sia per il front-end che per il back-end, come per routing etc.

Per installarlo, basta digitare da terminale:

npm install -g @angular/cli

Per creare un nuovo progetto:

ng new my-app

Ci chiederà se vogliamo inserire metadati e che tipo di stylesheet usare. Usiamo CSS di base e attendiamo la fine dell'installazione.

Se usiamo VSCode, installiamo alcune estensioni quali Angular Language Service e Angular Console.

Col comando:

ng serve my-app

Andiamo su localhost:4200 per vedere la nostra app.

Rimuoviamo tutti gli elementi nel file app.component.html e creiamo un nuovo componente con:

ng generate component square

Ora andiamo su app.component.html e aggiungiamo il nuovo componente:

<app-square></app-square>

Dovremmo vedere "square works!" sul nostro localhost.

Architettura di un componente

@Component({
  selector: 'app-square',
  templateUrl: './square.component.html',
  styleUrls: ['./square.component.css']
})

Il selettore: Il selettore viene definito nella prima riga del componente con il decoratore @Component, in questo caso il selettore è 'app-square'. Il selettore è usato per selezionare il componente all'interno del template dell'applicazione.
Il template: Il template del componente viene definito nel file square.component.html e specificato nel decorator @Component con la proprietà templateUrl. Il template definisce la struttura HTML del componente e può contenere espressioni Angular per interagire con i dati e le funzioni del componente.
Gli stili: Gli stili del componente vengono definiti nel file square.component.css e specificati nel decorator @Component con la proprietà styleUrls. Gli stili possono essere definiti con CSS puro o con pre-processori come Sass o Less, e vengono applicati al componente per definirne l'aspetto visuale.

Questo vuol dire che andremo a scrivere l'html nella pagina square.component.html, lo stile in quella component.css, e la logica nel file component.ts.

Lo stile di un componente non fuoriesce da esso: qualunque cosa definite dentro quel file .css non si applicherà ad altro.

Nel file .html principale aggiungiamo:

<app-square></app-square>

Nel file html del componente aggiungiamo:

  <button (click)="increment()">Add +1</button>
    <p>{{ count }}</p>

La sintassi "" è una direttiva del template di Angular. La direttiva (click) ascolta l'evento di click sul pulsante e invoca il metodo increment() nel componente quando il pulsante viene cliccato.

La sintassi "

" utilizza la sintassi delle espressioni di interpolazione di Angular per visualizzare il valore di count nel template del componente.

Nel file .ts invece avremo:

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

  @Component({
    selector: 'app-square',
    templateUrl: './square.component.html',
    styleUrls: ['./square.component.css']
  })
  
  export class SquareComponent {
    count = 0;
  
    increment() {
      this.count++;
    }
  }

La classe SquareComponent è una classe TypeScript che definisce il comportamento del componente. La variabile count è inizializzata con il valore 0, e il metodo increment() viene chiamato quando l'utente clicca sul pulsante. Il metodo increment() aumenta il valore di count di uno ad ogni clic.

Aggiungiamo un po' di css:

button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

p {
  font-size: 24px;
  font-weight: bold;
}

Questo per oggi è tutto. Vi consiglio caldamente di seguire il Tour of Heroes. Il Tour of Heroes è un tutorial ufficiale di Angular che fornisce un'introduzione pratica alla creazione di applicazioni Web in Angular.

Framework: Angular

Angular

Architettura di un componente