Definiendo rutas relativas en el tsconfig

En nuestros proyectos solemos crear servicios, componentes, directivas etc. que importamos en distintas partes de nuestra aplicación, como por ejemplo módulos por medio de la directiva "import"

Supongamos por ejemplo que tenemos la siguiente estructura de ficheros:

Por otra parte supongamos que dentro de la carpeta "components" tenemos los directorios:

"seguridad"
"aplicacion"
..
etc.

A la hora de hacer un "import" de un componente, nos quedaría algo parecido a lo siguiente:

import { MiComponente} from './core/components/seguridad/micomponente';

Si dentro del directorio "seguridad" tenemos otro(s) directorios la cosa se empieza a "complicar"

Podemos evitar esta situación si definimos rutas relativas dentro del fichero de configuración "tsconfig.json"

Para ello, en primer lugar tenemos que indicar cual es nuestra ruta raiz, y eso lo hacemos indicando la propiedad "baseUrl". Por otra parte, tenemos que definir como queremos indentificar nuestros "path"

Podemos verlo mejor en el siguiente ejemplo:

    "baseUrl": "src",
    "paths": {
      "@services/*": ["app/core/services/*"]      
    }

De esta manera, cuando queremos importar un modulo llamado "Seguridad" que tenemos dentro de ./core/services/seguridad lo haremos de la siguiente manera:

import { Seguridad } from '@services/seguridad';

Esto es una forma muy interesante de organizar nuestros elementos y no tener intrucciones de importaciones excesivamente largas.

Hasta la próxima entrada :-)

RxJS: Subject, ReplaySubject, BehaviorSubject con Angular (Parte I)

En las siguientes entradas vamos a ver que son los Subjects (y sus variantes) en Angular, o más concretamente en Rxjs (API para la programación asíncrona con flujos observables en la que se basa en gran parte Angular)

En esta primera entrada vamos a ver que son los Subject.

Pordemos definir un subject como el equivalente a un EventEmitter, y una forma de multi-difundir un valor o evento a varios observers.
Dicho de otra manera, es una especie de puente o proxy que actúa como observador y como Observable. Al ser un observador, puede suscribirse a uno o más Observables, y al ser un Observable, puede pasar a través de los ítems que observa al volverlos a transmitir, y también puede emitir nuevos ítems.

Como siempre es mejor verlo con un ejemplo...

En este ejemplo vamos a crear un sistema de notificaciones. Desde un componente (notify) notificaremos un mensaje que será capturado y mostrado en otro componente (header).
Como framework css vamos a utilizar bulma, (un framework basado en Flexbox) que hemos comentado a los largo de otras entradas y por el que siento cierta debilidad :-)

Nuestra aplicación tendrá dos componentes. HeaderComponent, donde se van a mostrar las notificaciones, y NotifyComponent que es desde donde lanzaremos nuestras notificaciones.

Además tendremos un servicio, que va a consistir para guardar y mostrar las notificaciones a través de un Subject. Por último tendremos una clase para definir una notificación.

Empezaremos por definir la clase (notification.ts)




La clase Notification tiene tres propiedades para definir el autor, mensaje y la fecha de creación, y un constructor donde pasamos como parametros al autor y mensaje, y obtenemos la fecha actual del sistema que asignamos a la propiedad createdAt. Nada nuevo hasta aquí...

En el servicio NotificationService es donde vamos a crear una notificación y obtener las notificaciones existentes.

Vamos  a ver el código del servicio y posteriormente lo explicamos:



En primer lugar hemos definido una variable notificationSubject como un Subject de notificaciones.
El servicio consta de dos métodos. El método getNotificacion que nos devuelve nuestro subject cmo un observable al que luego desde el componente header nos subscribiremos, y un método para registrar notificaciones (addNotification) que consiste en enviar (next) al subject la notificación pasada como parámetro a dicho método.

En el componente Header es donde vamos a mostrar las notificaciones:




En este componente hemos definido una variablede tipo array donde almacenaremos las notificaciones. Esto lo hacemos al iniciar el componente (OnInit) donde llamamos al método getNotification del servicio.

El template del componente no tiene gran cosa de especial. Muestra las propiedades de cada notificación en una capa.




Para terminar nos queda el componente donde registramos la notificación (notify.ts). En este componente creamos un formulario donde recogemos los datos del autor y el mensaje, y llamamos al método del servicio que registra la notificación:




y la plantilla asociada que es donde "pintamos" el formulario html



En la siguiente imagen podemos ver la aplicación en funcionamiento:

Como hemos visto en esta entrada, en Rxjs tenemos una serie de observables "especiales" como el "subject".
En posteriores entradas veremos dos variantes del mismo como son el ReplaySubject y el BehaviorSubject.

Como siempre, puedes acceder al código fuente en:

https://stackblitz.com/edit/ng5-subject-behavior-replay