Componentes en Angular

¿Qué son los componentes?

Si ya seguiste nuestro Tutorial para instalar Angular, creaste tu primera app y no tienes idea de qué sigue, deberías comenzar por dominar este tema.

Los componentes en Angular forman la estructura principal de la aplicación. Un componente es un elemento que consta de varios archivos. Los más importantes son los siguientes:

  • Plantilla: Es nuestro archivo HTML, donde vamos a mostrar los datos. Estas plantillas son las vistas de nuestra Single Page Application.
  • Estilos: Es donde agregaremos el diseño y formato de nuestra plantilla. Lo más común es que sea CSS.
  • Lógica: Es nuestro archivo TS (TypeScript) en el cual, definiremos toda la lógica y comportamiento de nuestro componente.

Análisis y desarrollo de componentes

Para crear un componente en nuestra aplicación, iremos a la terminal, nos posicionaremos en la raíz del proyecto e ingresaremos el siguiente comando:

ng generate component header

Donde header es el nombre de nuestro primer componente.

Si nos dirigimos a la carpeta app de nuestro proyecto, podremos observar que se creó una carpeta con el nombre de nuestro componente. Dentro, encontraremos los archivos que mencionamos hace un momento. Se creó un cuarto archivo, destinado para pruebas, que vamos a ignorar por ahora.

  • header.componente.css: Nuestro archivo de estilos se crea vacío, nosotros podemos agregar los estilos que deseemos.
  • header.component.html: Aquí viene una línea de prueba para comprobar que funciona nuestro componente.
  • header.component.ts: Este archivo es el corazón del componente y ya trae, por defecto, unas cuantas líneas.
  • La primera línea importa las interfaces Component y OnInit, que se encuentran en la librería @angular/core.
  • En el siguiente bloque de código nos encontramos con el decorador Component, el cual cuenta con tres propiedades:
    • selector: Le dice a Angular que inserte la vista de este componente, donde sea que se observe la etiqueta <app-header></app-header> en nuestro HTML.
    • templateUrl: Aquí se ingresa la ubicación de la plantilla de nuestro componente.
    • styleUrls: Se agregan las ubicaciones del o los archivos de estilos para este componente.
  • En el último bloque de código, contamos con nuestro componente declarado en forma de clase que implementa a la interfaz OnInit. Ésta, cuenta con el método ngOnInit(), que podemos ver dentro de la clase, el cual, se ejecuta siempre que nuestro componente ha terminado de inicializarse. También, podemos ver a nuestro constructor vacío que podemos utilizar para inicializar nuestros futuros atributos.

Para comprobar que nuestro primer componente está funcionando, nos dirigiremos al componente principal.

Nos iremos a la vista app.component.html y eliminaremos todo su contenido. Después de guardar los cambios ejecutaremos el proyecto. Recuerda que el comando para hacerlo es ng serve.

Una vez que abramos el proyecto en el navegador, observaremos la página en blanco, ya que borramos el contenido principal.

Sin cerrar nada, vamos a dirigirnos de nuevo a la vista principal del componente e ingresaremos la etiqueta de la que hablamos hace un momento:

Guardamos el cambio y veremos que automáticamente se recompilará el proyecto y nuestro navegador se recargará solo. Esto pasa cada que guardamos un cambio en nuestra aplicación. Genial ¿no?

En nuestro navegador ya podemos observar la vista de nuestro primer componente.

Ahora te toca a ti desarrollarlo y platicarnos, ¿qué le agregaste a tu primer componente?

¡Ey! ¿Ya nos sigues en redes sociales?

Publicado por Almanceware

Ingeniero orgullosamente mexicano

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: