Un componente Angular generado con WCF está compuesto por un conjunto de archivos organizados en directorios. Describiremos a continuación cada uno de ellos.
Para evitar en la descripción utilizar nombres de relleno y facilitar la comprensión, tomaremos como ejemplo un componente llamado enlace-volver.
Directorio raíz del componente
El componente está totalmente contenido en un directorio compuesto por el nombre del componente más un guion y la palabra angular, ya sea que se descarga como un zip o se sube a un repositorio git. Este directorio contiene todo lo necesario para incorporar el componente al ambiente de desarrollo, organizado en dos directorios llamados app y assets, siguiendo el criterio tradicional de Angular.
.
└── enlace-volver-angular/
├── app/
│ ├── enlace-volver/
│ │ ├── enlace-vover.component.ts
│ │ ├── enlace-volver.component.html
│ │ └── enlace-volver.component.css
│ ├── wcf-subcomps/
│ │ └── wcf-subcomps.service
│ └── app-demo-enlace-volver/
│ ├── app-demo-component.ts
│ └── app-demo-component.html
└── assets/
├── img
└── fonts La idea es que alcanza con copiar los directorios app y assets sobre los directorios existentes. Si se trata de una nueva versión del componente, se sobrescriben los archivos existentes.
El directorio app
El directorio app contiene 3 subdirectorios, los que a su vez contienen los archivos necesarios para el componente, uno llamado enlace-volver en nuestro ejemplo, uno llamado wcf-subcopms que contiene el servicio inyectable que permite modificar los atributos y parámetros de los componentes en tiempo real y el tercero que se denomina app-demo-enlace-volver y que contiene la app-demo.
El directorio del propio componente, llamado enlace-volver en nuestro ejemplo tiene los tres archivos estándar en Angular para definir el componente:
- enlace-vovler.component.ts: incluye todo el código del componente, inputs, variables, defaults y el código para atender los eventos que llegan desde el servicio inyectable WcfSubcomps.
- enlace-vovler.component.html: como su extensión lo indica, contiene el html del componente, incrustando el código correspondiente para que funcionen los bindings.
- enlace-vovler.component.css: contiene todos los estilos que dan forma al componente en la pantalla, incluyendo los necesarios para las distintas variantes y switches.
El directorio WcfSubcomp
WCF provee un injectable service que permite modificar en tiempo de ejecución cualquiera de los inputs, atributos y parámetros del componente, habilitando una comunicación fluida independientemente de la estructura de creación e inclusión de componentes en la aplicación.
A esto suma que no se necesita agregar código adicional a los componentes para utilizarlo y de que a pesar de que viene con cada componente, está diseñado siguiendo el pattern de tree-shaking, de modo de que se incluye una sola vez en el código independientemente de la cantidad de componentes que lo importen.
Este directorio tiene un solo archivo, denominado wcf-subcomps.service.ts que contiene el código del servicio.
El directorio app-demo
Todos los componentes creados con WCF agregan un componente app-demo que permite analizar en detalle el comportamiento de dicho componente y sus subcomponentes, así como sus inputs, variantes y switches e identificadores.
En el componente no hay ningún vínculo o relación con la app-demo y funciona independientemente de ella. Se puede borrar completamente este directorio y el componente seguirá funcionando sin inconvenientes. La idea es que la app-demo no sea incluida en la versión final para producción.
En componentes complejos, que incorporan varios subcomponentes e inclusive más de una instancia de algunos de ellos, la app-demo es de extrema utilidad para identificarlos y comprender como utilizar el servicio inyectable WcfSubcomps para la interacción entre ellos en tiempo de ejecución.
Se incluye solo una aplicación app-demo para el componente raiz, que permite analizar todos los subcomponentes a la vez, no se incluye una app-demo para ninguno de los subcomponentes, pero es muy fácil generarla en la Fábrica de WCF, descargando el subcomponente de forma aislada.
El directorio assets
El directorio assets contiene dos subdirectorios, uno denominado img que incluye todas las imágenes que utiliza el componente en todas sus versiones, y un directorio fonts, que incluye todos los archivos de tipo TTF que utliza el componente. En la medida en que todos los componentes comparten el directorio fonts, los archivos terminan copiados una sola vez y se cargan de una única fuente.
Subcomponentes
Cuando el componente incluye subcomponentes, estos están incluidos en el paquete de archivos siguiendo exactamente los mismos criterios que para el componente principal, con la única diferencia de que no hay una app-demo para cada uno de ellos, sino que su análisis se realiza desde la app-demo del componente principal.
Para cada subcomponente se incluye en el directorio app un subdirectorio con el criterio nombre-del-componente-angular que contiene los archivos ts, html y css del componente. Por su parte, en el directorio assets se agregarán las imágenes y archivos de fonts que correspondan.
Los subcomponentes son componentes completos, no dependen del componente principal ni de ningún otro componente y pueden ser utilizados en cualquier lugar, según se crea conveniente.
Leave a Reply