Saltar al contenido

Tipografía básica de Angular: Comprensión de los módulos

A medida que la funcionalidad de nuestro carrito de compras crece, vamos a terminar con más y más módulos. Para cualquier importador, esto puede significar que habrá muchas declaraciones de importación y puede ser difícil de mantener.

Lo ideal sería enrollar todos nuestros módulos más pequeños en uno solo, llamémoslo shoppingCart.

Tipografía básica de Angular: Comprensión de los módulos
Tipografía básica de Angular: Comprensión de los módulos

Esto se hace a través de barriles . Los barriles son módulos que juntan muchos módulos individuales, reexportando sus declaraciones, creando así un único módulo cohesivo.

Definiendo un barril

Para definir un barril para nuestro Carro de la Compra, creamos un archivo llamado index.ts en la carpeta raíz del carro de la compra, que simplemente re-exporta nuestros otros módulos:

1234/// app/shoppingCart/index.tsexport{ProductService,Product}from$0027./shoppingCart/products.service$0027;export{CartComponent}from$0027./shoppingCart/cart.component$0027

tipografía

Importar un barril

Un barril es como cualquier otro módulo, así que podemos importarlo de la misma manera. Sin embargo, definimos nuestro barril en un archivo llamado index.ts.

Como un servidor web que sirve una página por defecto, el proceso de resolución del módulo de escritura como el mismo concepto con index.ts.

Al resolver una declaración de importación, comprobará la ruta de referencia. Si es un directorio y hay un archivo index.ts, entonces la declaración de importación se resolverá:

12345/// Importación simple desde el barrelimport{ProductoServicio,Producto,Componente de la Cesta}de$0027./compraCarta$0027;// Exactamente lo mismo, pero hace referencia al módulo de índice directamenteimport{ProductoServicio,Producto,Componente de la Cesta}de$0027./compraCarta/índice$0027;

tipografía

Refactorización más segura

Ahora tenemos un único módulo, shoppingCart.ts, que está destinado a ser utilizado dentro de la aplicación.

El uso de un barril ayuda cuando empezamos a hacer cualquier tipo de refactorización, que de otra manera puede llevar a un cambio de efecto dominó en la aplicación.

Decidimos que nuestro ProductService debe estar en una subcarpeta de “servicios”. Esto significa que en todos los lugares donde el servicio es importado necesitaría la actualización de la ruta.

¡Sin usar un barril, esto podría ser un montón de lugares! Sin embargo, con el barril, sólo cambiamos la única declaración de exportación para que coincida:

12345/// app/shoppingCart/index.ts// Nuevo camino hacia productos.servicio.tsexport{ProductoServicio,Producto}de$0027./comprasCart/servicios/productos.servicio$0027;export{CartComponente}de$0027./comprasCart/cart.componente$0027

tipografía

Incluso si decidimos renombrar el ProductService como ProductApiService, podemos exportar de nuestro barril una declaración de ProductService para permitir la compatibilidad retroactiva:

12345/// app/shoppingCart/index.ts// ProductService alias para ayudar a la compatibilidad con la exportación{ProductApiService,ProductApiServiceasProductService,Product}from$0027./shoppingCart/services/products.service$0027;export{CartComponent}from$0027./shoppingCart/cart.component$0027

tipografía