7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Angular

Creando tu primera aplicación Angular: Componentes, parte 1

Read Time: 7 mins
This post is part of a series called Creating Your First Angular App.
Create Your First Angular App: Storing and Accessing Data
Creating Your First Angular App: Components, Part 2

Spanish (Español) translation by Ruben Solis (you can also view the original English article)

El segundo tutorial de esta serie te enseñó cómo almacenar datos dentro de la aplicación Angular y acceder a ellos mediante una clase de servicio. En este tutorial, crearemos el HomeComponent para nuestra aplicación Angular.

La página de inicio o el HomeComponent que estamos creando listará los tres principales países en diferentes categorías, como población y área. Los datos para determinar el orden de clasificación se tomarán del arreglo COUNTRIES que creamos en el tutorial anterior.

Creando la clase HomeComponent

Para crear el HomeComponent, cambia el directorio en la consola a la carpeta de tu aplicación y ejecuta el siguiente comando:

Esto creará una carpeta llamada home dentro de la carpeta src/app con cuatro archivos dentro. Para esta aplicación, solo debemos preocuparnos por tres archivos llamados home.component.ts, home.component.css y home.component.html. El archivo home.component.ts contendrá toda la lógica del componente, y los archivos CSS y HTML controlarán el aspecto y la estructura del componente.

Comencemos editando el archivo home.component.ts. Se supone que HomeComponent debe mostrar los tres países más poblados, los tres países más grandes y los tres países con el GDP (Gross Domestic Product) (PIB, Producto Interno Bruto), más alto almacenados en la arreglo de COUNTRIES.

Importaremos tanto la clase Country como la clase CountryService que creamos en el último tutorial. También importaremos Component y OnInit desde @angular/core. La dependencia OnInit proporciona un hook de ciclo de vida que se llama justo después de que se inicializan las propiedades vinculadas a datos de una directiva.

Después de importar todas las dependencias necesarias, definiremos nuestro decorador de componentes. El decorador de componentes se utiliza para proporcionar la información de metadatos necesaria relacionada con nuestro componente. Estableceremos un valor para selector, templateUrl y styleUrls dentro del decorador.

El selector se utiliza para especificar la etiqueta que se utilizará para identificar nuestro componente. templateUrl se utiliza para proporcionar la URL de la plantilla que se renderizará cuando Angular encuentre el selector proporcionado. La propiedad styleUrls se usa para especificar diferentes hojas de estilo que se deben aplicar a la plantilla dada. Aquí está el código dentro de home.component.ts hasta este punto:

Ahora comenzaremos a definir la clase HomeComponent con diferentes propiedades y métodos para ayudarnos a mostrar los datos de los países a los usuarios. La clase HomeComponent tendrá tres propiedades diferentes, que aceptarán como valor un arreglo de países. Podemos inyectar una dependencia en el constructor del componente especificando un parámetro de constructor con el tipo de dependencia. Así es como inyectaremos la clase CountryService dentro de nuestro HomeComponent.

Aquí está el resto del código para el archivo home.component.ts:

Hemos creado tres métodos que utilizan la clase CountryService para obtener los países con el área más grande, la población más alta y el GDP (PIB) más alto. Los arreglos devueltos por los diferentes métodos de CountryService se asignan a las propiedades correspondientes de la clase HomeComponent.

Debes tener en cuenta que todos estos métodos que establecen el valor de populatedCountries, largestCountries y gdpCountries se invocan dentro del método ngOnInit() para que sus valores puedan usarse tan pronto como se cree el componente.

Creando la plantilla de HomeComponent

Después de escribir el código para la clase HomeComponent, es hora de crear la plantilla HTML para el componente. Dado que el código dentro de home.component.html es principalmente HTML, solo explicaré las partes específicas de Angular. Aquí está el código para todo el archivo:

Como he explicado anteriormente, a populatedCountries, largestCountries, y gdpCountries se les ha asignado como valor un arreglo de objetos Country. Estamos utilizando la directiva NgFor para recorrer todos los países en un arreglo específico y mostrar sus nombres y propiedades respectivas Por ejemplo, *ngFor="let country of populatedCountries" recorre todos los objetos country (país) dentro del arreglo populatedCountries y asigna ese valor a la variable local country. Esta directiva también renderiza la etiqueta a correspondiente, así como todas las demás etiquetas dentro de ella para cada objeto country (país) dentro del array populatedCountries. La misma explicación se aplica a todos los bloques de países rendererizados iterando sobre largestCountries y gdpCountries.

Estamos utilizando Angular pipes para formatear adecuadamente los valores de población, área y GDP (PIB) de diferentes países para que sean más legibles. Una cosa que puede resultar confusa es la directiva routerLink que he usado con todas las etiquetas a. Lo discutiremos con más detalle en el último tutorial de la serie cuando escribamos código para recorrer diferentes componentes o secciones de la aplicación. El valor de la directiva routerLink actúa como un enlace regular que encontramos en los sitios web que visitamos. La diferencia importante es que en lugar de cargar páginas, cargaremos componentes.

Creando el archivo CSS para HomeComponent

Finalmente, puedes escribir algo de CSS para que la plantilla HTML sea más presentable. Aquí está el CSS que he usado para el HomeComponent. Ten en cuenta que este CSS debe ir dentro del archivo home.component.css.

Es importante que el CSS dentro de home.component.css solo se aplique a los elementos dentro del archivo home.component.html.

Es posible que desees representar HomeComponent dentro de la aplicación principal cambiando el contenido del archivo app.component.html a lo siguiente:

Desafortunadamente, recibirás el siguiente error cuando intentes hacerlo:

Hablaremos más sobre la directiva routerLink y cómo deshacerse de este error en el quinto tutorial de esta serie. En este momento, puedes eliminar todas las menciones de routerLink del archivo home.component.html para ejecutar tu aplicación Angular sin ningún error. Solo asegúrate de volver a agregar todo al archivo.

Reflexiones finales

Si nunca antes haz creado una aplicación Angular, te llevará un tiempo sentirse cómodo con los componentes. Para facilitar la comprensión, puedes considerar los componentes similares a los diferentes iframes cargados dentro de una página web. Los archivos .ts contienen la lógica del componente, así como los archivos .js contienen la lógica de los iframes.

Los archivos .html contienen los elementos que deseas representar en un iframe o dentro de un componente, y los archivos .css contienen diferentes reglas de estilo para esos elementos. Admito que esta no es una comparación muy precisa, pero debería ayudar a los principiantes a comprender los componentes y la relación entre los diferentes archivos de un componente.

En el próximo tutorial, crearemos dos componentes más que te ayudarán a comprender los componentes con mayor claridad. Si tienes alguna pregunta sobre el código relacionada con HomeComponent, házmelo saber en los comentarios.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.