Los componentes Angular de WCF están generados automáticamente por un algoritmo, pero el código, la estructura y la presentación tienen la intención deliberada de ser fácilmente comprensible por un programador con cierta experiencia en Angluar.
La estructura es estándar y sigue los lineamientos clásicos de angular. Todo el código está contenido en el archivo nombre-del-componente.components.ts. Se describen a continuación los principales elementos que la integran.
Imports
Como en cualquier componente Angular, la primera parte del código, tiene las sentencias que importan los módulos necesarios para el funcionamiento.
Primero los del core de Angular, luego aquellas que se necesitan para los bindings y el servicio WcfSubcomps y por último el de los subcomponentes, si existieran.
Decorador @Component
El decorador @Component incluye los elementos necesarios para que el componente sea creado y pueda ser incluido en la aplicación:
- selector: el selector es siempre comp-nombre-del-componente. Agrega el prefijo comp- porque el estandar HTML exige que los elementos creados por el usuario (custom) tengan siempre un guion en el nombre, para diferenciarlos de los estándar como h1, div o span. De esta forma se evitan los problemas con los componentes que tienen una sola palabra en el nombre.
- standalone: todos los componentes Angular generados por WCF importan todo lo que necesitan y por lo tanto pueden ser usados libremente en la aplicación, sin depender de ningún módulo. Eso se declara en este atributo del decorador.
- imports: los módulos que importa y utiliza el componente, incluyendo los subcomponentes.
- templateUrl: el vínculo al archivo que contiene el HTML de compomente.
- styleUrl: el vínculo al archivo que contiene el CSS del componente.
Export class
La parte final de la estructura del componente incluye la clase exportable. El nombre de la clase es siempre el nombre del componente escrito en notación camello (camel case) comenzando con mayúsculas (UpperCamelCase) tal como es el estándar de Angular.
El código de la clase incluye en primer lugar los Inputs, algunos que se incluyen en todos los componentes WCF y luego los inputs particulares del componente.
A los inputs sigue la suscripción al servicio WcfSubcomps, y el aviso de que el componente fue renderizado, para que comiencen a llegar los mensajes. Incuye también, para cuando el componente se destruye, la indicación a WcfSubcomps de que ya no está renderizado y la desubscripción al servicio.
Por último se incluye el método changeAttr, que es el que atiende la suscripción a WcfSubcomp y tiene una lógica muy sencilla: si conincide el id con el del componente, asigna el valor al input correspondiente.
Cierra el componente el comentario “/* if component has custom TypeScript for export class, it goes here */”. Si en la fábrica de WCF se incluyó TypeScript adicional para el componente, este será automáticamente agregado al código del componente debajo de este comentario.
HTML
El HTML del componente está incluido completamente en el archivo nombre-del-coponente.component.html. Incluye los bindings y variables que permiten que el componente tenga el comportamiento esperado en tiempo de ejecución.
En la estructura del HTML se utiliza un sangrado de textos (indenting) en el que cada atributo de un tag ocupa un renglón. Esto permite una visualización sencilla de qué atributos e inputs aplica a cada tag, que variables están vinculadas por medio de bindings y cómo cambiará el componente cuando cambie su valor.
El HTML se genera automáticamente al generar el componente en la fábrica, y se sobrescribe en cada generación, por lo que está recomendado no agregar o modificar el código.
CSS
Todo el CSS del componente está incluido completamente en el archivo nombre-del-componente.component.css. Es un archivo clásico de CSS, que comienza con los fonts que se utilizan en el componente y luego las clases de los distintos elementos que lo integran.
En el caso de que en la Fábrica de WCF se haya incluido código CSS adicional (custom CSS) este código se incluye a continuación de la última clase. Cada vez que se modifica el componente se regenera el código CSS, por lo que no se recomienda modificarlo o añadir código utilizando otro método que el custom CSS de la Fábrica de WCF.
Leave a Reply