Angular 4 - Componenti

La maggior parte dello sviluppo con Angular 4 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

I file sopra sono stati 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 { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   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.

ng g component new-cmp

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

C:\projectA4\Angular 4-app>ng g component new-cmp
installing component
   create src\app\new-cmp\new-cmp.component.css
   create src\app\new-cmp\new-cmp.component.html
   create src\app\new-cmp\new-cmp.component.spec.ts
   create src\app\new-cmp\new-cmp.component.ts
   update src\app\app.module.ts

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

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 { 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
   ],
   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', //
   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, che ha 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 -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 4App</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. Dai un'occhiata 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);

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 { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

Qui, AppComponent è il nome dato, ovvero la variabile per memorizzare il riferimento del file 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 4 Project!';
}

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, templateUrl e styleUrlsono dati. 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.

Il @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 associazione in un 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 il 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. Aggiungiamo ora qualcosa e lo stesso può essere visto nel browser in seguito.

Il selettore, cioè app-new-cmp deve essere aggiunto nel file app.component .html file 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-cmp></app-new-cmp>

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

Vediamo il file new component .html file e il file new-cmp.component.ts file.

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 nuovo componente e il valore è "Entered in new component created".

La variabile di cui sopra è vincolata in .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 file .html del nuovo componente (new-cmp.component.html) viene visualizzato nel browser come segue:

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 ↱

Angular 4 - Componenti

new-cmp.component.ts

new-cmp.component.ts

Tutorial di Angular 4

Risorse utili di Angular 4