2 Componenti

Pubblicato il di

Per creare un nuovo componente, esistono 3 possibilità:

  • manuale
  • command
  • ide

Il metodo manuale, consiste nel creare una cartella che normalmente avrà lo stesso nome del componente, per esempio creiamo la cartella user e al suo interno il file user.component.ts, un file di tipo Typescript. La cartella non sarebbe obbligatoria, ma per una maggiore leggibilità e un miglior ordine è altamente consigliata.

Poi bisogna creare all’interno del file la classe che sarà il vero e proprio componente. La classe avrà lo stesso nome del componente quindi UsersComponent. Inoltre per rendere il nostro componente accessibile bisognerà esportare la classe con export

export class UsersComponent {

}

Oltre a questa normale classe , dobbiamo importare il modulo Component da angular core con questa sintassi

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

a questo punto dobbiamo inserire il decoratore.

Il decoratore è una funzione particolare che inizia col simbolo chiocciola (@) e aggiunge delle caratteristiche alla classe trasformandola nel componente del nostro progetto angular. I metadati vengono passati in forma di argomento come oggetto , quindi all’interno delle tonde della funzione( { } )

@Component({ 

} )

all’ interno dell’oggetto passeremo le caratteristiche del componente, ecco un esempio tipo 

@Component( {
 selector: 'app-users',
 template: `
 <p>
 users works!
 </p>
 `,
 styles: [
 ]
} )

le chiavi principali sono selector, template, style.

selector

corrisponde al prefisso del nostro componente, di default è app seguito dal nome del componente in formato kebab-case ovvero 2 parole separate dal simbolo meno ( – ).

Il valore associato alla chiave selector sarà lo stesso da usare per richiamare il nostro componente nel file principale.

template

all’interno del valore di template andremo ad inserire tutti gli elementi html o javascript che compongono il nostro componente

template : '<h1>Utenti</h1>',

Un buon metodo è quello di racchiudere i nostri codici tra il simbolo backtick ( win: ALT + 96 – mac: ALT + 9 ). Questo ci permette di andare a capo senza interrompere il codice per una migliore formattazione e di sfruttare a pieno le funzionalità di angular come i literals operator (le doppie graffe)

style

permette di definire gli stili css.

Sia template che style oltre ad essere inline come abbiamo visto fino ad adesso, specialmente in progetti con molto codice, possono anche richiamare file esterni dove inserire il codice. Per far questo aggiungere Url al nome template, ovvero templateUrl e po bisogna definire il percorso del file da caricare

templateUrl: './app.component.html',
styleUrls: ['./app.component.css']

Oltre ad usare templateUrl e styleUrls dovremo creare i relativi file nel percorso. I file per convenzione avranno lo stesso nome del componente seguiti dai relativi suffissi html o css o scss.

Nei nostri esempi useremo solo il metodo inline, in quanto il codice è minimale ed eviteremo troppi files inutili.

Una volta definito il nostro oggetto, bisogna dichiarare il componente in app.module.ts aggiungendo la chiave declaration

@NgModule({
 declarations: [
  AppComponent,
  UsersComponent
 ],

Inoltre bisogna creare l’import nello stesso file

import { UsersComponent } from './users/users.component';

a questo punto il nostro componente è pronto per essere inserito nel nostro file principale con il relativo nuovo tag HTML

<app-users></app-users>

Per creare un componente nelle altre 2 modalità, la procedura è molto più semplice e automatizzata.

Con il command possiamo sfruttare angular cli e da terminale

ng g c nomecomponente

la lettera g sta per generate, la c per component.

A questo punto tutte le operazioni fatte prima verranno eseguite in automatico da Angular cli.

Se l’ide lo permette è possibile crare il componente da interfaccia grafica, per esempio in phpstorm o webstorm basterà andare sul menu file, new, Angular Schematic e scegliere la voce component