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

Crea una aplicación de búsqueda de bibliotecas en Angular: HomeComponent y LibraryListComponent

Read Time: 7 mins

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

En una de mis series de tutoriales anteriores de Angular, cubrí los conceptos básicos de Angular, comenzando por instalar la CLI y luego hablé sobre cómo crear componentes básicos e implementar el enrutamiento. Consulta mi publicación sobre la Creación de tu primera aplicación Angular: Conceptos básicos, para obtener un recordatorio sobre la instalación de la CLI de angular y otras herramientas recomendadas para crear una aplicación de Angular con facilidad.

La aplicación de información del país que creamos en esa serie fue buena para comenzar con Angular, pero carecía de algunas características. Por ejemplo, almacenamos la información que queríamos mostrar a nuestros usuarios dentro de una matriz. Sin embargo, en este tutorial, iremos más allá de un pequeño conjunto de datos y permitiremos que los usuarios busquen en la base de datos la biblioteca disponible desde CDNJS.

Aquí está la aplicación que construiremos:

Library Finder app in AngularLibrary Finder app in AngularLibrary Finder app in Angular

En la publicación anterior, creamos una clase LibraryService para obtener información sobre diferentes bibliotecas utilizando la API de CDNJS. También creamos un archivo app-routing.module.ts para proporcionar toda la lógica de enrutamiento de nuestra aplicación.

En la lógica de enrutamiento, es posible que hayas notado que le pedimos a Angular que represente el componente HomeComponent cuando los usuarios están en la página de inicio de nuestra aplicación. Del mismo modo, le decimos a Angular que muestre el componente LibraryListComponent cuando los usuarios hacen clic en el botón Listar todas las bibliotecas después de escribir algo en el campo de entrada.

En este tutorial, crearemos estos dos componentes para nuestra aplicación Angular. Primero crearemos HomeComponent y luego crearemos LibraryListComponent.

Creando la clase HomeComponent

Para crear los archivos HomeComponent utilizando la CLI de Angular, ve al directorio de la aplicación library-finder en la consola. Después de eso, ejecuta el siguiente comando:

Esto creará una carpeta llamada home dentro del directorio raíz de nuestra aplicación de búsqueda de bibliotecas. Esta carpeta tendrá cuatro archivos diferentes. Tres de estos archivos deberían llamarse home.component.css, home.component.html y home.component.ts.

El archivo HTML contendrá el código de la plantilla para HomeComponent y el archivo CSS contendrá la información de estilo para esa plantilla. El archivo TypeScript contendrá la lógica de nuestro HomeComponent.

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

Si leíste la serie sobre cómo crear tu primera aplicación en Angular, es posible que hayas notado que el HomeComponent que creamos en el segundo tutorial de esa serie había importado el módulo OnInit del núcleo Angular. También inicializamos los valores de diferentes propiedades en esa clase dentro del método ngOnInit().

Esta vez no se importó ningún módulo de este tipo porque HomeComponent no obtiene ni establece ningún valor durante la inicialización. Aparte de eso, la mayoría de las otras cosas se hacen de manera similar.

Comenzamos importando la clase LibraryService que creamos anteriormente. Después de eso, establecemos el valor selector, templateUrl y styleUrls dentro del decorador de componentes. Recuerda que puedes proporcionar varias hojas de estilo para diseñar un componente, pero solo un único archivo de plantilla para representarlo.

Dentro de la definición de la clase HomeComponent, definimos dos propiedades llamadas searchTerm y libraryName. Los valores de ambas propiedades se establecen en una cadena vacía de forma predeterminada. Estos valores se actualizan dentro de los métodos updateTerm() y updateName() cuando los usuarios escriben algo en el campo de entrada respectivo.

Creando la plantilla HomeComponent

Nuestro HomeComponent tendrá dos campos de entrada y dos enlaces que actuarán como botones y llevarán a los usuarios a diferentes caminos. Los campos de entrada escucharán un evento keyup y actualizarán los valores de las propiedades searchTerm y libraryName respectivamente.

Los dos enlaces al lado de los campos de entrada llevan a los usuarios a diferentes rutas utilizando la directiva routerLink. En el primer caso, los usuarios van a /list/{{searchTerm}}, y en el segundo caso, van a /detail/{{libraryName}}. La ruta se actualiza dinámicamente en función del valor actual del campo de entrada. Por ejemplo, la ruta se convierte en /list/bootstrap cuando alguien escribe bootstrap en el primer campo de entrada, y se convierte en /detail/jquery cuando alguien escribe jquery en el segundo campo de entrada.

Aquí está el código completo para nuestro archivo home.component.html:

También hemos creado tres cuadros diferentes para enumerar los nombres de algunas bibliotecas populares. Los usuarios podrán ver directamente los detalles de estas bibliotecas en lugar de escribir primero sus nombres y luego hacer clic en el botón Mostrar biblioteca.

Todos estos elementos se han envuelto dentro de un elemento contenedor div para agruparlos para darles estilo.

Creando el archivo CSS del HomeComponent

Después de escribir la lógica del componente y crear el archivo de plantilla, solo tenemos que actualizar el archivo CSS para que nuestro HomeComponent sea presentable.

Aquí está el CSS que he usado para diseñar diferentes elementos dentro del archivo de plantilla. Puedes cambiar todas las reglas de estilo aquí según tus propias preferencias.

Todo en el archivo CSS se explica por sí mismo. Establecemos el ancho de nuestra envoltura div igual a un valor fijo de 800 px. Los cuadros inferiores con los nombres de las bibliotecas populares cambian su color de fondo a negro cuando los usuarios pongan el cursor sobre ellos.

Creando la clase LibraryListComponent

Como mencioné anteriormente, el LibraryListComponent se usará para enumerar todas las bibliotecas que contienen el término de búsqueda extraído de la ruta actual. Puedes generar rápidamente todos los archivos necesarios para este componente ejecutando la siguiente instrucción en la línea de comando:

Al igual que nuestro componente 'home', este comando creará una carpeta llamada library-list en el directorio raíz. Habrá cuatro archivos dentro de la carpeta, pero debemos preocuparnos por solo tres de ellos: library-list.component.css, library-list.component.html y library-list.component.ts.

Intentaremos obtener la lista de bibliotecas relacionadas con el término de búsqueda proporcionado en la URL tan pronto como se cargue el componente. Esto significa que también tendremos que importar OnInit junto con Component desde @angular/core.

Importar ActivatedRoute nos permite trabajar con toda la información de una ruta asociada con el componente actualmente cargado. De esta manera, podemos extraer fácilmente el término de búsqueda de la ruta actual. Después de importar diferentes dependencias de Angular, seguimos importando nuestra clase LibraryService.

Como de costumbre, el decorador de componentes almacena el valor del selector, la URL de la plantilla y las rutas de la hoja de estilo para LibraryListComponent.

Dentro del método ngOnInit(), llamamos al método getLibrary(). El método getLibrary() utiliza además el método searchLibraries() de LibraryService para obtener todos nuestros resultados. Estos resultados se almacenan dentro de la matriz libraries declarada en la parte superior de nuestra definición de clase.

Notas finales

En este tutorial, creamos con éxito el HomeComponent de nuestra aplicación para la búsqueda de bibliotecas. Esto permitirá a los usuarios buscar diferentes bibliotecas en la base de datos CDNJS. El HomeComponent no es muy útil por sí solo. Por lo tanto, crearemos dos componentes más llamados LibraryListComponent y LibraryDetailsComponent.

Ya hemos actualizado el archivo TypeScript para nuestro LibraryListComponent. Actualizaremos la plantilla HTML y los archivos CSS en el próximo tutorial. Si tienes alguna pregunta relacionada con este tutorial, dímelo 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.
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.