Crear interfaz de usuario con un componente Angular

    Cuando se trata de crear una interfaz de usuario en una aplicación Angular, puede utilizar un componente Angular para facilitar el proceso.

    La creación de una interfaz de usuario en Angular es muy similar a cómo crearíamos una en WPF. Normalmente usamos controles de usuario, representados por la clase UserControl. Un UserControl grupo de marcado y código en un contenedor reutilizable, lo que permite que la misma interfaz y funcionalidad se utilicen en varios lugares diferentes. Este control de usuario tendrá un archivo .xaml para el marcado de la interfaz de usuario y un archivo de C# para la lógica, e incluso puede tener un diccionario de recursos, que contendría cualquier tipo de información de estilo para este control de usuario. Mientras que en Angular, usamos lo que se llama a Component. Un componente tiene un archivo html, que se utiliza para cualquier marcado de la interfaz de usuario. Tiene un archivo mecanografiado, que se usa para sus propiedades y lógica, y luego usa un archivo CSS para toda su información de estilo. Sigamos adelante y veamos qué tan similares son estos dos.

    En el lado izquierdo, tenemos una aplicación WPF, con un control de usuario llamado Sample. También tiene un diccionario de recursos llamado SampleResources que contiene información de estilo. En el lado derecho, tenemos una aplicación Angular con un AppComponent. Sigamos adelante y comparemos el componente de la aplicación Angular con el del control de usuario de ejemplo en la aplicación WPF.

    Comience abriendo el archivo mecanografiado del componente de la aplicación. Podemos pensar en este archivo como el código detrás del componente, y la razón por la que pensamos de esa manera es porque si vamos al WPF y abrimos Sample.xaml.cs, el código detrás del control de usuario Sample, Se pueden ver muchas similitudes.

    Primero podemos ver que tenemos una clase que estamos exportando llamada AppComponent. Ahora, este AppComponent también tiene una propiedad llamada título. Entonces, dentro de esta clase vamos a definir todas las propiedades, métodos y eventos necesarios para que se ejecute nuestro componente. Esto es extremadamente similar, si no exactamente igual, a un control de usuario. Podemos ver que tenemos una clase, en este caso llamada Sample, y dentro de esta clase vamos a definir todas las propiedades, métodos y eventos necesarios para que el control de usuario funcione.

    A continuación, avancemos unas líneas en el archivo mecanografiado y veamos esta pequeña sintaxis extraña con el pequeño @ símbolo y luego el componente. A esto en realidad se le llama decorador. Este decorador Angular dice cómo vamos a tratar esta clase que estamos exportando. En este caso, vamos a tratarlo como un componente y como lo estamos tratando como un componente, tenemos que proporcionar cierta información en el decorador. Antes de llegar a la información, primero prestemos atención a la línea superior del archivo mecanografiado -import { Component } from '@angular/core'. Puedes pensar en esto como una instrucción using. Esencialmente, estamos importando los objetos que se requieren para que este componente funcione. En este caso, estamos importando el Component desde el @angular/core módulo, por lo que realmente podemos usar el decorador para este componente. Eso es extremadamente similar a una instrucción using dentro del código detrás de nuestro control de usuario. Usamos using instrucciones dentro de C# para localizar y usar objetos dentro de nuestra clase que son necesarios para que funcione el control de usuario.

    Ahora, volvamos al interior del decorador de componentes.

    • La línea de código en la línea 4 se llama selector. El selector nos ayuda a determinar cómo vamos a definir estos elementos en html. Este selector se llama app-root, por lo que si continuamos y abrimos index.html, podríamos ver dentro del cuerpo un elemento llamado app-root. Ese elemento utiliza el selector definido en el decorador del componente para definir una instancia de este componente.
    • A continuación, en la línea 5, tenemos lo que se llama una URL de plantilla. Esto apunta a un archivo llamado app.component.html, el archivo html que representa la representación visual de este componente. Esto es extremadamente similar al archivo Sample.xaml del control de usuario en WPF, donde el xaml es el marcado que representa cómo se representará este control.
    • En la línea 6, vemos las URL de estilo. La URL del estilo apunta a un archivo CSS. Este archivo representa la información de estilo del componente. Entonces, si abrimos el archivo app.component.css, podemos ver que no hay información de estilo aquí, pero podemos pensar en el archivo CSS como una asignación directa a un diccionario de recursos. El diccionario de recursos en XAML contendrá toda la información de estilo para el control de usuario o los elementos dentro del control de usuario, para que se represente de acuerdo con nuestro diseño. Eso es exactamente lo mismo que harías en CSS.

    Generar un componente

    Ahora que hemos visto lo similar que es un componente Angular a un control de usuario de WPF, vamos a crear un nuevo componente y agregarlo a nuestra aplicación. Si es un desarrollador de escritorio, en WPF, cuando desee agregar un nuevo control de usuario, simplemente haga clic con el botón secundario en el proyecto y diga Agregar > control de usuario. Bueno, por supuesto, si intentas hacer lo mismo en Visual Studio Code, no tienes esa opción. Solo tienes un nuevo archivo, una nueva carpeta. Eso significa que tenemos que saltar a nuestro terminal y usar la CLI Angular para generar nuestro componente. Así que vamos a alternar un terminal escribiendo Control + Backtick. En el terminal, simplemente escribimos NG G para generar, C para componente, y luego proporcionamos un nombre para nuestro componente, p. ej. sample

    ng g c sample
    cmd

    Cuando se complete el comando, notarás que han sucedido varias cosas. Primero, tenemos una nueva carpeta con el mismo nombre que le hemos dado a nuestro componente. También tenemos cuatro archivos nuevos: un archivo html, un archivo SPEC, un archivo mecanografiado y un archivo CSS. También realizamos una actualización del archivo app.module.ts.

    Mire la carpeta sample que contiene nuestro componente recién creado. Podemos ver que los tres archivos necesarios para un componente están ahí más este archivo SPEC adicional. En realidad, este es un archivo de prueba que no necesitamos para este artículo, por lo que no nos ocuparemos de él ahora. También hicimos una modificación en app.module.ts, en la que agregamos el componente de muestra a la sección declarations de nuestro NgModule.

    Esto es importante: cada vez que se crea un nuevo componente, debe declararse en la sección de declaraciones del módulo NG. Esta sección básicamente dice qué componentes pertenecen a este módulo.

    Volvamos a nuestro archivo sample.component.ts. Se parece mucho al archivo app.component.ts que cubrimos anteriormente. En este caso tenemos nuestra declaración de importación donde importamos nuestro componente. Tenemos nuestro decorador de componentes donde definimos nuestro selector como app-sample. Tenemos nuestra URL de plantilla como sample.component.html y tenemos nuestra URL de estilo sample.component.css.

    ¡Sigamos adelante y abramos el archivo html donde podemos ver un párrafo que indica sample works!. Queremos ver esto cuando iniciemos la aplicación, así que vayamos a app.component.html. Eliminaremos la mayor parte del marcado inicial excepto el título y simplemente agregaremos <app-sample></app-sample>.

    <div style="text-align:center">
      <h1>
        Welcome to {{ title }}!
      </h1>
      <app-sample></app-sample>
    </div>
    html

    Ejecutar la aplicación

    Al escribir npm start en la terminal, compilará y construirá nuestra aplicación y la iniciará dentro del navegador. Si todo ha ido bien, nuestra aplicación debería estar ejecutándose en el navegador. Le damos welcome to app: ¡el marcado del componente de la aplicación y luego sample works!. Este es el marcado de nuestro componente de muestra que acabamos de agregar. Ahora cambiemos un poco nuestro componente de muestra cambiando el texto a "¡Esta muestra funciona muy bien!".

    <p>
      This sample works very well!
    </p>
    html

    Una vez que guardemos y revisemos el navegador, veremos que efectivamente estamos editando el html que se encarga de renderizar el componente de muestra. Si queremos darle estilo a nuestro componente, debemos mirar nuestra URL de estilo. Así que abramos nuestro archivo sample.component.css y hagamos que la etiqueta del párrafo sea roja.

    p {
        color: red;
    }
    css

    Una vez que guardemos eso y abramos el navegador, deberíamos ver que el estilo en el archivo CSS se ha aplicado a nuestro componente de muestra.

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.