Angular7 - Componenti

La maggior parte dello sviluppo con Angular 7 viene eseguita nei componenti. I componenti sono fondamentalmente classi che interagiscono con il file .html del componente, che viene visualizzato nel browser. Abbiamo visto la struttura dei file in uno dei nostri capitoli precedenti.

La struttura del file ha il componente dell'app ed è composta dai seguenti file:

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

E se hai selezionato il routing angolare durante la configurazione del progetto, verranno aggiunti anche i file relativi al routing ei file sono i seguenti:

app-routing.module.ts

I file sopra vengono creati per impostazione predefinita quando abbiamo creato un nuovo progetto utilizzando il comando angular-cli.

Se apri il file app.module.ts file, ha alcune librerie che vengono importate e anche un dichiarativo a cui viene assegnato l'appcomponent come segue:

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Le dichiarazioni includono la variabile AppComponent, che abbiamo già importato. Questo diventa il componente principale.

Ora, angular-cli ha un comando per creare il tuo componente. Tuttavia, il componente dell'app creato per impostazione predefinita rimarrà sempre il genitore e i componenti successivi creati formeranno i componenti figli.

Eseguiamo ora il comando per creare il componente con la riga di codice sottostante:

ng g component new-cmp

Quando esegui il comando precedente nella riga di comando, riceverai il seguente output:

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) 
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) 
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) 
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) 
UPDATE src/app/app.module.ts (477 bytes)

Ora, se andiamo a controllare la struttura del file, otterremo la nuova cartella new-cmp creata sotto il file src/app cartella.

I seguenti file vengono creati nella cartella new-cmp:

new-cmp.component.css: viene creato il file css per il nuovo componente.
new-cmp.component.html: il file html viene creato.
new-cmp.component.spec.ts: può essere utilizzato per i test di unità.
new-cmp.component.ts - qui possiamo definire il modulo, le proprietà, ecc.

Le modifiche vengono aggiunte al file app.module.ts come segue -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 

// includes the new-cmp component we created
@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
      // here it is added in declarations and will behave as a child component 
   ], 
   imports: [ 
      BrowserModule,
      AppRoutingModule 
   ], 
   providers: [], 
      bootstrap: [AppComponent] 
      //for bootstrap the AppComponent the main app component is given. 
}) 
export class AppModule { }

Il new-cmp.component.ts file viene generato come segue -,

import { Component, OnInit } from '@angular/core'; // here angular/core is imported.

@Component({ 
   // this is a declarator which starts with @ sign. 
   // The component word marked in bold needs to be the same. 
   selector: 'app-new-cmp', // selector to be used inside .html file. 
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component. 
   styleUrls: ['./new-cmp.component.css'] // reference to the style file. 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

Se vedi il file new-cmp.component.ts sopra, crea una nuova classe chiamata NewCmpComponent, che implementa OnInit in cui è presente un costruttore e un metodo chiamato ngOnInit (). ngOnInit viene chiamato per impostazione predefinita quando viene eseguita la classe.

Controlliamo come funziona il flusso. Ora, il componente dell'app, creato per impostazione predefinita, diventa il componente principale. Qualsiasi componente aggiunto successivamente diventa il componente figlio.

Quando premiamo l'URL nel file "http://localhost:4200/" browser, esegue prima il file index.html mostrato di seguito -

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</title> 
      <base href = "/"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root>
   </body> 

</html>

Quanto sopra è il normale file html e non vediamo nulla che viene stampato nel browser. Daremo uno sguardo al tag nella sezione del corpo.

<app-root></app-root>

Questo è il tag radice creato da Angular per impostazione predefinita. Questo tag ha il riferimento inmain.ts file.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

AppModule viene importato dall'app del modulo genitore principale e lo stesso viene dato al modulo bootstrap, che fa caricare l'appmodule.

Vediamo ora il file app.module.ts file -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Qui, il AppComponent è il nome dato, cioè la variabile per memorizzare il riferimento di app.component.tse lo stesso è dato al bootstrap. Vediamo ora il fileapp.component.ts file.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
}

Il nucleo angolare viene importato e indicato come Componente e lo stesso viene utilizzato nel dichiaratore come:

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

Nel riferimento del dichiaratore al selettore, vengono forniti templateUrl e styleUrl. Il selettore qui non è altro che il tag che si trova nel file index.html che abbiamo visto sopra.

La classe AppComponent ha una variabile chiamata title, che viene visualizzata nel browser. @Component utilizza templateUrl chiamato app.component.html che è il seguente:

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{ title }}! </h1> 
</div>

Ha solo il codice html e il titolo della variabile tra parentesi graffe. Viene sostituito con il valore, che è presente nel fileapp.component.tsfile. Questo si chiama associazione. Discuteremo il concetto di legame nel capitolo successivo.

Ora che abbiamo creato un nuovo componente chiamato new-cmp. Lo stesso viene incluso nelapp.module.ts file, quando viene eseguito il comando per creare un nuovo componente.

app.module.ts ha un riferimento al nuovo componente creato.

Controlliamo ora i nuovi file creati in new-cmp.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

Qui dobbiamo importare anche il core. Il riferimento del componente viene utilizzato nel dichiaratore.

Il dichiaratore ha il selettore chiamato app-new-cmp e templateUrl e styleUrl.

Il .html chiamato new-cmp.component.html è il seguente -

<p> 
   new-cmp works!
</p>

Come visto sopra, abbiamo il codice html, cioè il tag p. Il file di stile è vuoto poiché al momento non è necessario alcuno stile. Ma quando eseguiamo il progetto, non vediamo nulla relativo al nuovo componente che viene visualizzato nel browser.

Il browser visualizza la seguente schermata:

Non vediamo nulla relativo al nuovo componente visualizzato. Il nuovo componente creato ha un file .html con i seguenti dettagli:

<p>
   new-cmp works!
<p>

Ma non stiamo ottenendo lo stesso nel browser. Vediamo ora le modifiche necessarie per visualizzare il contenuto dei nuovi componenti nel browser.

Il selettore 'app-new-cmp'viene creato per il nuovo componente da new-cmp.component.ts come mostrato di seguito -

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

@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {  
   constructor() { } 
   ngOnInit() { } 
}

Il selettore, cioè app-new-cmp deve essere aggiunto in app.component.html, ovvero il genitore principale creato per impostazione predefinita come segue:

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{ title }}!
   </h1>
</div>
<app-new-cmp7></app-new-cmp>

Quando il <app-new-cmp></app-new-cmp> viene aggiunto il tag, tutto ciò che è presente nel file .html, cioè new-cmp.component.html del nuovo componente creato verrà visualizzato nel browser insieme ai dati del componente genitore.

Aggiungiamo qualche dettaglio in più al nuovo componente creato e vediamo la visualizzazione nel browser.

new-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() { }
   ngOnInit() { }
}

Nella classe abbiamo aggiunto una variabile chiamata newcomponent e il valore è "Inserito nel nuovo componente creato".

La variabile di cui sopra viene aggiunta nel file new-cmp.component.html file come segue -

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

Da quando abbiamo incluso il file <app-new-cmp></app-new-cmp>selettore nel file app.component.html che è il .html del componente genitore, il contenuto presente nel new-cmp.component.htmlil file viene visualizzato nel browser. Aggiungeremo anche alcuni css per il nuovo componente nel file new-cmp.component.css come segue:

p { 
   color: blue; 
   font-size: 25px; 
}

Quindi abbiamo aggiunto il colore blu e la dimensione del carattere come 25px per i tag p.

La seguente schermata verrà visualizzata nel browser:

Allo stesso modo, possiamo creare componenti e collegare gli stessi utilizzando il selettore nel file app.component.html file secondo i nostri requisiti.

↰ Previous page Next page ↱

Angular7 - Componenti

Tutorial Angular7