Angular 2 - Modelli

Nel capitolo sui componenti, abbiamo già visto un esempio del seguente modello.

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

Questo è noto come inline template. Esistono altri modi per definire un modello e ciò può essere eseguito tramite il comando templateURL. Il modo più semplice per utilizzarlo nel componente è il seguente.

Sintassi

templateURL:
viewname.component.html

Parametri

  • viewname - Questo è il nome del modulo del componente dell'app.

Dopo il nome visualizzazione, il componente deve essere aggiunto al nome del file.

Di seguito sono riportati i passaggi per definire un modello in linea.

Step 1- Crea un file chiamato app.component.html. Questo conterrà il codice html per la vista.

Step 2 - Aggiungi il seguente codice nel file creato sopra.

<div>{{appTitle}} Tutorialspoint </div>

Definisce un semplice tag div e fa riferimento alla proprietà appTitle dalla classe app.component.

Step 3 - Nel file app.component.ts, aggiungi il seguente codice.

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

Dal codice sopra, l'unica modifica che può essere notata è da templateURL, che fornisce il collegamento al file app.component.html che si trova nella cartella dell'app.

Step 4 - Esegui il codice nel browser, otterrai il seguente output.

Dall'output, si può vedere che il file del modello (app.component.html) viene chiamato di conseguenza.