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.