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: LibraryService y enrutamiento

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 hablando sobre cómo crear componentes básicos e implementar el enrutamiento. Consulta mi publicación sobre Creando 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 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.

Esta es la aplicación que vamos a construir:

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

En el tutorial introductorio de esta serie, mencioné que obtendríamos todos los datos de nuestra biblioteca con la ayuda de la API de CDNJS. También mencioné que dos componentes de nuestra aplicación utilizarían los datos de la respuesta devuelta para mostrar información útil al usuario.

En esta publicación, escribiremos todo el código requerido para acceder a la información sobre diferentes bibliotecas en un solo archivo llamado library.service.ts.

Creamos un archivo similar en otro tutorial llamado creando tu primera aplicación Angular: Almacenar y acceder a datos. En ese caso, almacenamos los datos localmente dentro de una matriz y luego escribimos algunos métodos dentro de la clase de servicio para acceder a la información desde una ubicación central. Esta vez haremos algo similar también.

Creando clase LibraryService

Las cosas serán un poco diferentes a la última vez que definimos una clase de servicio. En ese momento, los datos se almacenaban localmente para que pudiéramos acceder a ellos al instante. Esta vez, obtendremos los datos de un servidor, por lo que tenemos que importar un conjunto diferente de dependencias.

También tendremos que modificar los métodos que utilizamos para acceder a nuestros datos porque esta vez la información no estará disponible al instante. Teniendo en cuenta estas cosas, comencemos a escribir el código para LibraryService.

Importaremos dos dependencias para nuestra clase LibraryService. La dependencia Injectable disponible dentro de @angular/core nos permitirá inyectar nuestra clase LibraryService dentro de otros componentes que lo necesiten.

También importaremos HttpClient desde @angular/component/http. Esta clase inyectable nos da acceso a diferentes métodos que pueden usarse para realizar solicitudes HTTP. Utilizaremos el método get() de esta clase para obtener todos los datos de nuestra biblioteca.

Definiremos dos métodos dentro de nuestra clase LibraryService que obtendrán los datos sobre una biblioteca en particular u obtendrán una lista de varias bibliotecas. Aquí está el código completo:

Dentro de los métodos showLibrary() y searchLibraries(), usamos el mismo formato para construir nuestra URL que hablamos en el tutorial anterior. Para searchLibraries(), solo obtenemos la versión y la descripción de cada biblioteca. Para showLibrary(), no especificamos ningún campo en particular, por lo que obtenemos todo, incluido el enlace a la página de inicio, el repositorio, etc.

Después de eso, usamos el método toPromise() para convertir el Observable devuelto por el método get() en una Promesa. Las promesas nos facilitan la escritura de código asincrónico. Una vez que una Promesa se ha cumplido o rechazado, te dará un valor de retorno que se puede usar en consecuencia. Podemos usar el método then() en una Promesa para agregar condicionales de cumplimiento y de rechazo a nuestra promesa. Esto se tratará en un tutorial posterior donde aprenderemos cómo manipular los datos devueltos y mostrarlos a nuestros usuarios.

Implementación de enrutamiento para nuestra aplicación

No hemos creado ningún componente desde nuestra aplicación de búsqueda de bibliotecas, pero aún sabemos cuándo mostrar qué componente.

Para escribir nuestro código de enrutamiento, crearemos un archivo llamado app-routing.module.ts y agregaremos el siguiente código:

Comenzamos importando diferentes dependencias de Angular, así como otros componentes que crearemos más adelante. Cada vez que los usuarios visiten una ruta especificada dentro de la matriz routes, les mostraremos el componente correspondiente.

Los dos puntos (:) presentes en la tercera y cuarta ruta se usan para indicar que tanto library y search son marcadores de posición para nombres de biblioteca y términos de búsqueda más específicos. De esta forma, podemos evitar definir nuevas rutas para cada biblioteca y simplemente usar una ruta general desde la cual podamos extraer fácilmente el nombre de la biblioteca o los términos de búsqueda.

Actualizando el archivo app.module.ts

Después de crear nuestra clase LibraryService e implementar la lógica de enrutamiento, todo lo que tenemos que hacer es actualizar el archivo app.module.ts. Angular utiliza este archivo para construir y arrancar nuestra aplicación. Si abres este archivo, notarás que no está vacío. Angular ya ha importado algunas dependencias que necesitamos para crear nuestra aplicación. Angular también actualizará esta aplicación más adelante cuando creemos nuestros propios componentes utilizando la CLI de Angular. Por ahora, coloca el siguiente código dentro del archivo app.module.ts.

Necesitas importar BrowserModule para cada aplicación Angular que se ejecutará en el navegador. Importar HttpClientModule nos da acceso a HttpClient y otros servicios asociados que utilizamos dentro de nuestra clase LibraryService para obtener información sobre diferentes bibliotecas. Angular ya ha importado la clase AppComponent para nosotros. Ahora, solo tenemos que importar nuestra clase LibraryService y AppRoutingModule que definimos en la sección anterior.

Después de importar las dependencias necesarias, usamos el decorador @NgModule que toma un objeto de metadatos para decirle a Angular cómo compilar e iniciar nuestra aplicación.

La matriz declarations se usa para especificar todas las clases de componentes que necesitará nuestra aplicación. Intentar usar un componente sin enumerarlo aquí primero dará como resultado un error. En este momento, la matriz declarations solo contiene una sola clase. Una vez que generemos más componentes utilizando la CLI de Angular, se agregarán automáticamente a esta lista.

La matriz imports se utiliza para especificar todos los módulos que necesita nuestra aplicación. Solo debes agregar la clases NgModule dentro de la matriz de importaciones. En nuestro caso, estas clases son BrowserModule, HttpClientModule y AppRoutingModule.

Utilizas la matriz providers para informar al inyector de dependencias sobre los diferentes servicios que necesitará nuestra aplicación. En este caso, solo estamos agregando la clase LibraryService dentro de nuestra matriz providers.

Notas finales

Hemos creado tres archivos diferentes en este tutorial. Library.service.ts se usa para definir una clase LibraryService con diferentes métodos para obtener los datos sobre varias bibliotecas. El archivo app-routing.module.ts se usa para almacenar la lógica de enrutamiento de nuestra aplicación. Almacenamos la información sobre diferentes rutas y los componentes correspondientes que deben cargarse para cada ruta dentro de la matriz routes. Finalmente, hemos actualizado el archivo app.module.ts para incluir la clase LibraryService y AppRoutingModule disponibles para toda la aplicación.

En el próximo tutorial, crearás el componente HomeComponent para nuestra aplicación de Angular y así, permitir a los usuarios especificar un término de búsqueda o nombre de biblioteca. Si hay algo que deseas que aclare en 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.