3 - Componentes

Previous2.5 - Directivas Next3.1 - Funciones

Last updated 6 years ago

Was this helpful?

3 - Componentes

Componentes

Como bien mencione anteriormente, Angular es un arbol de Componentes, por lo tanto, una de las cosas mas importantes para entender y poder desarrollar con este fantastico framework es entender los componentes.

Un componente consta de 3 partes:

Estructura ( HTML )
Estilos ( CSS )
Funcionalidad (TS /JS)

Vamos a pasar por todos los pasos de este Componente basico:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

( )

En la primera linea, vemos que hace un "import", lo que quiere decir esto es que va a traer el "Component" que esta en '@angular/core'... Sigamos bajando esto mas a la realidad...

En @angular/core => estan parte de las funcionalidades y objectos que tiene el framework, por lo tanto de todas las que tiene va a traer "Component".

Para los que vienen de programación orientada a objetos, esto les parece algo comun (importar una funcionalidad) ahora los que vienen mas del frontend (epoca de jquery o demas) estan mas acostumbrados que con traer algo en un <script> ya se podia utilizar en cualquier lado.

Pero en Angular no es asi, lo que vamos a hacer en nuestros componentes es solamente importar lo que necesitamos para poder utilizarlo en ese momento.

@Component() es un annotation, es lo que hace es enriquecer a la metadata de la clase que creemos para que termine siendo un componente web que el navegador entienda. Este recibe un json con datos, donde los principales son:

selector => es quien se encarga del "nombre" del tag del componente... por ejemplo este es <app-root>, pero solo vamos a poner el nombre, ya que de los tags se encarga angular.

template => en template (no esta en el ejemplo), podemos poner una porcion de html directo en nuestro componente, con los apostrofes frances ` (son de arriba a abajo, de izquierda a derecha) podemos utilizar el multilinea para nuestro html.

templateUrl => a diferencia del "template" aquí vamos a poner la dirección y el archivo donde se encuentra la porcion de HTML que dara la estructura .

StyleUrls => aquí vamos a tener que poner un array de estilos para el componente... como bien comente anteriormente tenemos un css de estilos globales, que afectan a todo el proyecto, los estilos que pongas en este componente van a estar y ser utilizados solo para el mismo.

Aclaración: vamos a ver mas cosas sobre este annotation pero por ahora con esto estamos bien!

Y por ultimo tenemos las clase exportada, que le va a dar vida a nuestro componente.

Esta clase no tiene que tener absolutamente nada para que funcione el componente, pero obviamente nosotros necesitamos que tenga funcionalidad...

Esta clase va a tener el binding con el html para dar funcionalidad en la vista, por lo tanto, las variables sin declarar, van a ser las variables que encontremos en el html, como asi las funciones tambien.

En este ejemplo podemos ver que tiene

title = ' app works!';

y en el html vamos a ver

{{title}}

que es el "binding" o la "conexion" entre la clase y el html.

Creo que es hora de ver el HTML de este componente.

<h1>
  {{title}}
</h1>

SI, lo se , es super basico... pero estamos viendo lo principal de un componente para poder ir avanzando poco a poco. Entonces como les dije... tenemos el binding gracias a las doble llaves, y eso hace el resultado final!

En un par de capitulos mas adelante, vamos a ver "componentes avanzados" en donde le sacaremos el jugo maximo al componente, pero creo que es importante ver algunas cosas antes de avanzar muy a fondo con nuestro componente, por eso este capitulo va a "no ser tan grande" capaz que como el de componentes avanzados u otros capitulos pero seria como un poquito mas del capitulo de primeros pasos...

Pero espera!! Todavia no termino !!

Cuando la aplicacion empieza a crecer los componentes se vuelven mas complicados y van a necesitar de otras cosas... como por ejemplo conectarse con un servicio rest o algun otro servicio.

Como tambien podrian estar calculando alguna funcion, o tienen que reaccionar mediente algun cambio fuerte... por lo tanto vamos a necesitar que ciertas funcionalidades sean mas "Common" con el resto del proyecto... el tema es que los componentes son "shadows" o "encapsulados" las funcionalidades de cada componente le pertenecen solo y nada mas que al componente y eso hace que no se pueda compartir la funcion, a pesar de