Modelli in angolare

In Angular, un modello è un progetto per un frammento di un'interfaccia utente (UI). I modelli sono scritti in HTML e una sintassi speciale può essere utilizzata all'interno di un modello per sfruttare molte delle funzionalità di Angular.

Angular estende la sintassi HTML nei tuoi modelli con funzionalità aggiuntive.
Ad esempio, la sintassi del data binding di Angular aiuta a impostare dinamicamente le proprietà del Document Object Model (DOM).

Quasi tutta la sintassi HTML è una sintassi modello valida. Tuttavia, poiché un modello Angular è solo un frammento dell'interfaccia utente, non include elementi come <html>, <body> o <base>.

Nota: - Per eliminare il rischio di attacchi di script injection, Angular non supporta l'elemento <script> nei modelli. Angular ignora il tag <script> e restituisce un avviso alla console del browser. Per ulteriori informazioni, consultare la pagina Sicurezza.

Visualizzazione del valore con interpolazione

L'interpolazione si riferisce all'incorporamento di espressioni nel testo contrassegnato. Per impostazione predefinita, l'interpolazione utilizza le doppie parentesi graffe {{ e }} come delimitatori.

Esempio:

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

Esempio:-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

Le istruzioni del modello sono metodi o proprietà che puoi utilizzare nel codice HTML per rispondere agli eventi dell'utente. Con le dichiarazioni modello, la tua applicazione può coinvolgere gli utenti attraverso azioni come la visualizzazione di contenuto dinamico o l'invio di moduli.

Esempio:-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

Come le espressioni template, le istruzioni template utilizzano un linguaggio simile a JavaScript. Tuttavia, il parser per le istruzioni modello è diverso dal parser per le espressioni modello. Inoltre, il parser delle istruzioni del modello supporta in modo specifico sia le assegnazioni di base (=) sia le espressioni concatenate con punto e virgola (;).

La seguente sintassi dell'espressione JavaScript e modello non è consentita:

1. nuovo
2. Operatori di incremento e decremento, ++ e —
3. Assegnazioni di operatori, ad esempio += e -=
4. Gli operatori bit per bit, ad esempio | e &
5. L'operatore del tubo