Angular 2 - Componenti

I componenti sono un pezzo logico di codice per l'applicazione Angular JS. Un componente è costituito da quanto segue:

  • Template- Viene utilizzato per eseguire il rendering della vista per l'applicazione. Contiene l'HTML che deve essere visualizzato nell'applicazione. Questa parte include anche il vincolo e le direttive.

  • Class- È come una classe definita in qualsiasi linguaggio come C. Contiene proprietà e metodi. Questo ha il codice che viene utilizzato per supportare la visualizzazione. È definito in TypeScript.

  • Metadata- Questo ha i dati extra definiti per la classe Angular. Si definisce con un decoratore.

Andiamo ora al file app.component.ts e creiamo il nostro primo componente Angular.

Aggiungiamo il seguente codice al file e guardiamo in dettaglio ogni aspetto.

Classe

Il decoratore di classe. La classe è definita in TypeScript. La classe normalmente ha la seguente sintassi in TypeScript.

Sintassi

class classname {
   Propertyname: PropertyType = Value
}

Parametri

  • Classname - Questo è il nome da dare alla classe.

  • Propertyname - Questo è il nome da dare alla proprietà.

  • PropertyType - Poiché TypeScript è fortemente tipizzato, è necessario assegnare un tipo alla proprietà.

  • Value - Questo è il valore da dare alla proprietà.

Esempio

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

Nell'esempio, è necessario notare le seguenti cose:

  • Stiamo definendo una classe chiamata AppComponent.

  • La parola chiave export viene utilizzata in modo che il componente possa essere utilizzato in altri moduli nell'applicazione Angular JS.

  • appTitle è il nome della proprietà.

  • Alla proprietà viene assegnato il tipo di stringa.

  • Alla proprietà viene assegnato il valore "Benvenuto".

Modello

Questa è la vista che deve essere visualizzata nell'applicazione.

Sintassi

Template: '
   <HTML code>
   class properties
'

Parametri

  • HTML Code - Questo è il codice HTML che deve essere visualizzato nell'applicazione.

  • Class properties - Queste sono le proprietà della classe a cui è possibile fare riferimento nel modello.

Esempio

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

Nell'esempio, è necessario notare le seguenti cose:

  • Stiamo definendo il codice HTML che verrà visualizzato nella nostra applicazione

  • Stiamo anche facendo riferimento alla proprietà appTitle della nostra classe.

Metadati

Viene utilizzato per decorare la classe JS angolare con informazioni aggiuntive.

Diamo un'occhiata al codice completato con la nostra classe, modello e metadati.

Esempio

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

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

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

Nell'esempio sopra, è necessario notare le seguenti cose:

  • Stiamo utilizzando la parola chiave import per importare il decoratore 'Component' dal modulo angular / core.

  • Stiamo quindi utilizzando il decoratore per definire un componente.

  • Il componente ha un selettore chiamato "my-app". Questo non è altro che il nostro tag html personalizzato che può essere utilizzato nella nostra pagina html principale.

Ora andiamo al nostro file index.html nel nostro codice.

Assicuriamoci che il tag body ora contenga un riferimento al nostro tag personalizzato nel componente. Pertanto, nel caso precedente, dobbiamo assicurarci che il tag body contenga il seguente codice:

<body>
   <my-app></my-app>
</body>

Produzione

Ora se andiamo nel browser e vediamo l'output, vedremo che l'output viene renderizzato così come è nel componente.