Entendiendo los componentes en Angular. Guía de iniciación

Última actualización: 6 abril, 2023

TEN EN CUENTA QUE...

En este artículo vamos a estudiar a fondo un pilar básico de Angular: los componentes. Si acabas de aterrizar aquí y no tienes ni idea de Angular, te recomiendo que eches un vistazo a esta introducción a Angular antes.

Introducción

Para desarrollar el contenido de este artículo necesitamos un proyecto de Angular en su estado inicial, con todas sus configuraciones intactas. Si no sabes cómo iniciar un proyecto con Angular, en el post de arriba tienes las instrucciones necesarias, pero aquí va un resumen

1. Instala NodeJS. Para comprobar si ya lo tienes, utiliza el comando node -v

2. Instala la CLI de Angular con el comando npm install -g @angular/cli 

3. Navega con tu terminal hasta un directorio de tu pc donde quieras crear tu proyecto con Angular y usa el comando ng new [nombre-de-tu-app]

4. Navega hasta tu carpeta recién creada con el comando cd [nombre-de-tu-app]

5. Inicia un servidor local con el comando ng serve -o. Eso abrirá tu proyecto en el puerto local 4200, normalmente.

Con esto hecho, ya tenemos nuestro proyecto visible en el navegador, que, en la versión 8 de Angular (la que estoy usando para este artículo), debería tener este aspecto:

angular start page

Editando nuestra app

Para empezar a editar Angular, vamos al archivo app.component.html y borramos todo su contenido. A continuación escribimos un título, por ejemplo:

<h4>I'm a title in the AppComponent</h4>

Si guardas, ya deberías verlo en tu navegador. ¿Pero cómo sabe Angular que debe mostrar el contenido de ese archivo en el navegador? ? En realidad no es el contenido del app.component.html el que se muestra en la página, sino el del index.html. El index.html es esa SPA de la que hablamos en el artículo de introducción a Angular. Echémosle un vistacillo.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyFirstApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Verás que en el <title> está el título que ves en la pestaña de tu navegador, en mi caso MyFirstApp. Pero lo que más nos interesa es esa etiqueta extraña <app-root>. Prueba a añadir cualquier texto entre el <app-root>, por ejemplo:

<app-root>Trying Angular</app-root>

Verás que en tu web se sigue mostrando "I'm a title in the AppComponent". Aunque durante algunos mili-segundos (mientras se carga la app), quizás puedas ver "Trying Angular". ?

<app-root> no es un elemento HTML típico, sino uno customizado, creado automáticamente por Angular la primera vez que generamos el esqueleto de una app con Angular, como parte del componente app (la carpeta app). Es el componente más importante, ya que conecta todas las piezas de nuestra app.

Si nos fijamos en el archivo app.component.ts, ahí veremos la propiedad selectorcuyo valor es app-root, y no por casualidad. Así es como Angular sabía qué contenido mostrar en el index.html, porque el app-root es una etiqueta HTML que representa a todo un componente (el AppComponent). Al añadirla al index.html, Angular ya sabe de qué hilo tirar. ?

Pero nos falta una pieza clave, y es entender cómo arranca una aplicación hecha con Angular. Para entender esto, fijémonos en el código fuente de nuestra app en el navegador.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyFirstApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>trying Angular</app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

Efectivamente, es muy parecido al código del index.html, salvo por los scripts del final, que son inyectados por la CLI automáticamente cuando Angular despliega una app en el navegador. Esto sucede concretamente cada vez que guardamos nuestra app, porque ésta se re-compila (siempre y cuando tengas abierta tu terminal con el comando ng serve ejecutándose).

En ese proceso de compilación, Angular transforma y "empaqueta" todo el código TypeScript de la app (el que hayamos escrito nosotros más otros archivos contenidos en Angular), produciendo unos paquetes finales (en inglés, bundles) de código JavaScript (en adelante, JS). Esos bundles son inyectados en la versión final de nuestra app, que es la que está visible en nuestro navegador.

Uno de esos archivos que Angular transforma es el main.tsEchémosle un vistacillo. La línea más importante es esta:

platformBrowserDynamic().bootstrapModule(AppModule)

porque ahí es donde se especifica el punto de arranque de nuestro proyecto. Esto es como seguir miguitas de pan, así que vamos a continuar ?. Empezar a editar una app es uno de los muchos temas clave que aprendí en este fantástico curso de Angular

Desde vsCode, si haces click sobre el AppModule, te llevará al archivo app.module.ts. Y ahí es donde se cierra el círculo. Porque ahí tenemos un array:

bootstrap: [AppComponent]

que nos indica con qué componente se debe iniciar nuestra app (por defecto, el AppComponent).

esquema angular arranque

? CONTENIDO RESTRINGIDO

El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.

THE END!

¡Y con esto finaliza esta guía básica sobre componentes en Angular! ? 

Si te queda alguna duda, ¡nos vemos en los comentarios!

Si quieres ayudar a hacer este blog sostenible, puedes invitarme a un café digital ツ
¡Gracias!¡Gracias!

Sobre la autora de este post

Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí. 

Más recursos de aprendizaje

En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:

angular the complete guide - curso Max S.

  Max Schwarzmüller

curso angular fernando herrera

   Fernando Herrera

Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:

libro 1 angular
libro 2 angular

La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos ?.

Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win ?.

Otros artículos que pueden interesarte

Cómo aprendí a programar cuando estaba «programada» para ser de letras
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
Días del 160 al 203 – ¡Primer objetivo conseguido!
“A veces podemos pasarnos años sin vivir en absoluto, y de pronto toda nuestra vida se concentra en un solo[...]
Claves para entender Angular. Qué es y cómo se utiliza
Angular es un framework creado por Google que nos permite construir Single Page Applications (SPA, por sus siglas en inglés).Frameworks¿Pero qué es[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

2 comentarios en «Entendiendo los componentes en Angular. Guía de iniciación»

  1. Muy buena guía!
    Estoy comenzando con lo que es Angular y hay algunas «cositas» que no logro entender. Por ejemplo, como hago para usar código JS. Instalé Bootstrap y lo agregué a angular.json pero a la hora de usar javascript se me pierde el mundo.
    Muy buena la info, gracias por compartirla!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información

Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.

Cerrar