Al construir una interfaz de usuario usando Angular, necesitamos una plantilla válida definida en línea o en un archivo html dedicado. La plantilla en sí se crea usando html, y para darle poderes especiales a ese html, se utilizan directivas y enlaces de datos angulares. Angular facilita la construcción de estas interfaces de usuario, ya que el enlace de datos permite que se muestren datos dinámicos y los eventos permiten que la aplicación Angular responda adecuadamente a las acciones del usuario. Las directivas angulares brindan la capacidad de agregar lógica a html, que es algo que no tiene por defecto.
Ventajas de una plantilla en línea
Hasta ahora, hemos comenzado creando una plantilla en línea en el app.component.tsarchivo. Si bien no siempre es la mejor opción, existen algunas ventajas.
- La plantilla se define directamente dentro del componente asociado.
- Mantiene la vista y el código de esa vista en un solo lugar
- Facilita la comparación de enlaces de datos con propiedades de clase.
Creación de una plantilla vinculada
Incluso con las ventajas enumeradas anteriormente, a menudo tiene sentido utilizar una plantilla vinculada . Las plantillas en línea no funcionan tan bien con varias herramientas de desarrollo IDE como Visual Studio Code, Jetbrains Webstorm y otras. A menudo, las funciones similares a las de intellisense y el formato automático no funcionan. Entonces, a medida que aumenta la cantidad de HTML requerido, se vuelve más fácil aprovechar ese enfoque de plantilla vinculada. Construyamos un componente que pueda enumerar videojuegos.
Creación de un componente de lista de juegos
Por convención, tiene sentido crear carpetas dedicadas para contener cada componente. Como tal, primero podemos crear una gamescarpeta para contener el componente relacionado con los juegos.
Ahora agreguemos la plantilla para el componente de lista de juegos en esa nueva carpeta. Se llamará game-list.component.html .
En nuestro archivo de plantilla, se puede utilizar el siguiente html para comenzar a crear un diseño para mostrar algunos juegos.
El archivo de plantilla ahora está en su lugar. Lo siguiente que debe hacer es crear el componente en sí. Lo llamaremos game-list.component.ts .
El siguiente código de TypeScript importará el decorador de componentes desde el núcleo angular, definirá el selector, enlazará a la plantilla que acabamos de crear usando la templateUrlpropiedad y, por último, configurará una pageTitlepropiedad simple para que podamos usar esos datos en la vista.
Si su IDE le da un mensaje como ng: El componente 'GameListComponent' no está incluido en un módulo y no estará disponible dentro de una plantilla. Considere agregarlo a una declaración de NgModule , no se preocupe, lo arreglaremos pronto.
Uso de un componente como directiva
Cuando un componente tiene un selector definido como lo hicimos anteriormente usando games-list , podemos usar el componente como directiva. Qué significa eso? Significa que podemos usar el selector de lista de juegos como un elemento html en la plantilla de cualquier otro componente. Entonces, para poner la plantilla game-list.component.html dentro de app.component.ts, por ejemplo, podemos hacerlo así.
Configurar el módulo angular
Para usar un componente como directiva, Angular necesita saber cómo renderizar ese elemento html personalizado. Para que esto suceda, es necesario configurar el Módulo Angular asociado a este componente. Cada aplicación angular debe tener al menos un módulo angular y este suele ser el AppModule . Un componente debe pertenecer a un solo módulo angular. Entonces, cuando un componente contiene una directiva, Angular mira ese módulo de componentes para ver qué directivas son visibles para ese componente. Esto significa que debemos declarar o importar ese componente en AppModule.
Pruebe la aplicación
¡Okay! Con todo ese trabajo de campo fuera del camino, podemos iniciar la aplicación y ver qué obtenemos. Navegue hasta el directorio raíz de su proyecto y ejecute el ng servecomando. Cuando visitamos la aplicación en el navegador, ¡parece que pudimos hacer funcionar nuestra directiva personalizada! Hemos utilizado el componente de lista de juegos como directiva.
Agregar datos dinámicos
En este momento solo hay datos estáticos en la aplicación. Cambiemos eso usando el enlace de datos. Lo primero que podemos hacer es visitar el archivo game-list.component.html y eliminar el título de la página codificado y reemplazarlo con una interpolación como {{pageTitle}}.
Ahora, en el archivo game-list.component.ts , podemos establecer esa propiedad. ¡Lo configuraremos en Dinámico! Lista de juegos solo para que sea algo diferente del valor codificado que teníamos anteriormente.
Si volvemos a visitar la aplicación, ahora debería mostrar los datos de esa pageTitlevariable, ¡y lo hace!
Presentamos Angular * ngIf
Aprendimos que una directiva es un elemento o atributo html personalizado que tiene poderes especiales más allá del html normal. Las directivas son personalizadas e integradas. La directiva * ngIf es una de esas directivas angulares incorporadas. Se usa para agregar lógica al html y también se conoce como directiva estructural . Esto se debe a que tiene la capacidad de modificar el diseño o la estructura de una plantilla agregando, quitando o manipulando elementos y sus elementos secundarios. Si una directiva angular comienza con un asterisco ( * ), entonces sabe que es una directiva estructural . Veamos esto en acción.
Solo queremos mostrar la tabla que muestra los juegos, cuando hay juegos para mostrar. Si no hay juegos, entonces no tiene sentido mostrar la mesa. Entonces, para simular que no hay juegos para mostrar, crearemos una gamespropiedad en el archivo game-list.component.ts y la configuraremos como una matriz vacía.
Ahora, en el archivo de plantilla real, podemos usarlo *ngIfpara verificar si hay juegos disponibles para mostrar. Lo que esto hará es permitir que el elemento <table> aparezca o desaparezca según esa condición.
Dado que no hay juegos para mostrar, la tabla ya no debería aparecer. ¡Se ve bien!
Presentamos Angular * ngFor
En Angular, necesitará la capacidad de recorrer colecciones de elementos y mostrarlos. En nuestro caso, una vez que tengamos algunos juegos con los que trabajar, deberíamos poder recorrerlos y mostrarlos en nuestra tabla. Para hacer esto, podemos usar *ngFor. Esta directiva estructural repite una parte del árbol dom una vez para cada elemento en una lista iterable como una matriz. Lo que haremos es rellenar la gamesvariable en game-list.component.ts con algunos datos JSON para representar un par de juegos. En el futuro, lo configuraremos como un servicio para obtener datos del servidor.
Ahora, en game-list.component.html podemos hacer uso de esa directiva estructural * ngFor para recorrer los dos juegos.
El resultado en el navegador es ahora que los dos juegos se repiten y vemos sus datos en la página.
Una nota sobre for of vs for in
En el ejemplo anterior, vemos que * ngFor hizo uso de la construcción for de bucle. Esto se debe a que el for ofbucle puede iterar sobre cualquier tipo iterable como una matriz. Produce el valor almacenado en cada índice, no el índice en sí. for ofpor otro lado, produce el valor de índice como 0, 1, 2, etc. Puede pensar en for in como un iterador específico de índice .
En resumen
- Plantillas
- En línea
- Se usa mejor con una longitud de marcado más corta
- Hace uso de la
templatepropiedad - Puede usar comillas simples o dobles para plantillas de una sola línea
- Utiliza marcas posteriores para plantillas de varias líneas
- Sin formato de código intellisense o automático
- Plantillas vinculadas
- Mejor una vez que el marcado html se vuelve más largo
- Usa la
templateUrlpropiedad - Define una ruta al archivo de plantilla html
- En línea
- Componentes como directivas
- Utilice el elemento como una directiva en el componente como <game-list> </game-list>
- Declare el componente en el Módulo asociado usando la
declarationsmatriz
- Interpolación
- Es un enlace de datos unidireccional
- Los datos viajan de la propiedad de la clase a la propiedad del elemento
- Definido con {{}} llaves
- Directivas estructurales
- prefijado con un
*carácter de asterisco - Asignado a una expresión de cadena entre comillas
- * ng Si se usa para agregar o eliminar un elemento y sus hijos del Dom
- Basado en una expresión que se evalúa como verdadera o falsa
- * ngFor se usa para repetir un elemento y sus hijos en el dom.
- Use let como el tipo de variable local en el bucle
- Utilice "de" no "en" al crear la expresión
- prefijado con un
0 Comentarios