Angular 2 - Componentes

Los componentes son una pieza lógica de código para la aplicación Angular JS. Un componente consta de lo siguiente:

  • Template- Se utiliza para representar la vista de la aplicación. Contiene el HTML que se debe procesar en la aplicación. Esta parte también incluye las directivas vinculantes.

  • Class- Es como una clase definida en cualquier lenguaje como C. Contiene propiedades y métodos. Tiene el código que se utiliza para respaldar la vista. Está definido en TypeScript.

  • Metadata- Esto tiene los datos adicionales definidos para la clase Angular. Se define con un decorador.

Vayamos ahora al archivo app.component.ts y creemos nuestro primer componente Angular.

Agreguemos el siguiente código al archivo y veamos cada aspecto en detalle.

Clase

El decorador de clases. La clase está definida en TypeScript. La clase normalmente tiene la siguiente sintaxis en TypeScript.

Sintaxis

class classname {
   Propertyname: PropertyType = Value
}

Parámetros

  • Classname - Este es el nombre que se le dará a la clase.

  • Propertyname - Este es el nombre que se le dará a la propiedad.

  • PropertyType - Dado que TypeScript está fuertemente tipado, debe asignar un tipo a la propiedad.

  • Value - Este es el valor que se le dará a la propiedad.

Ejemplo

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

En el ejemplo, deben tenerse en cuenta las siguientes cosas:

  • Estamos definiendo una clase llamada AppComponent.

  • La palabra clave export se usa para que el componente se pueda usar en otros módulos en la aplicación Angular JS.

  • appTitle es el nombre de la propiedad.

  • A la propiedad se le da el tipo de cadena.

  • La propiedad recibe un valor de 'Bienvenida'.

Modelo

Esta es la vista que debe renderizarse en la aplicación.

Sintaxis

Template: '
   <HTML code>
   class properties
'

Parámetros

  • HTML Code - Este es el código HTML que debe procesarse en la aplicación.

  • Class properties - Estas son las propiedades de la clase a las que se puede hacer referencia en la plantilla.

Ejemplo

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

En el ejemplo, deben tenerse en cuenta las siguientes cosas:

  • Estamos definiendo el código HTML que se renderizará en nuestra aplicación.

  • También estamos haciendo referencia a la propiedad appTitle de nuestra clase.

Metadatos

Esto se usa para decorar la clase Angular JS con información adicional.

Echemos un vistazo al código completo con nuestra clase, plantilla y metadatos.

Ejemplo

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';
}

En el ejemplo anterior, se deben tener en cuenta las siguientes cosas:

  • Estamos usando la palabra clave import para importar el decorador 'Componente' del módulo angular / core.

  • Luego usamos el decorador para definir un componente.

  • El componente tiene un selector llamado 'my-app'. Esto no es más que nuestra etiqueta html personalizada que se puede utilizar en nuestra página principal html.

Ahora, vayamos a nuestro archivo index.html en nuestro código.

Asegurémonos de que la etiqueta del cuerpo ahora contenga una referencia a nuestra etiqueta personalizada en el componente. Por lo tanto, en el caso anterior, debemos asegurarnos de que la etiqueta del cuerpo contenga el siguiente código:

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

Salida

Ahora, si vamos al navegador y vemos la salida, veremos que la salida se representa como está en el componente.