En el desarrollo web moderno, muchos desarrolladores prefieren crear la interfaz de usuario de un sitio web de forma basada en componentes. También es compatible con todos los marcos modernos. Comprender cómo funcionan los componentes y cómo usarlos es un gran paso en el aprendizaje de Angular.
En esta publicación, aprenderá sobre los componentes angulares, cómo crear y usar un componente en un proyecto y qué es la interpolación de cadenas. También cubriré otras características importantes de Angular en mis próximos artículos:
- Parte 1: Cómo instalar su primera aplicación con la CLI de Angular
- Parte 2: Componentes angulares e interpolación de cadenas (estás aquí)
- Parte 3 : Directivas y tuberías angulares
- Parte 4: Enlace de datos unidireccional en Angular
- Parte 5: Enlace de datos bidireccional angular con ngModel
Si lo prefiere, también puede ver la versión en video:
¿Qué es un componente?
Los componentes son los bloques de construcción más básicos de una aplicación Angular. Podemos pensar en componentes como piezas de LEGO. Creamos un componente una vez, pero podemos usarlo tantas veces como necesitemos en diferentes partes del proyecto.
Un componente angular está formado por 3 partes principales:
- Plantilla HTML: ver
- Archivo TypeScript - Modelo
- Archivo CSS - Estilo
¿Por qué necesitamos componentes?
El uso de componentes es beneficioso de muchas formas. Los componentes dividen la interfaz de usuario en vistas más pequeñas y renderizan datos. Un componente no debe participar en tareas como realizar solicitudes HTTP, operaciones de servicio, enrutamiento, etc. Este enfoque mantiene el código limpio y separa la vista de otras partes (consulte la separación de preocupaciones).
Otra razón importante es que los componentes dividen el código en partes más pequeñas y reutilizables. De lo contrario, tendríamos que incluir un sinfín de líneas de código en un solo archivo HTML, lo que hace que el código sea mucho más difícil de mantener.
Creando nuestro primer componente angular
Ahora creemos nuestro primer componente. La forma más corta de crear un componente es mediante Angular CLI:
ng g c component-nameEste comando crea un componente nuevo con sus propios archivos (HTML, CSS y TypeScript) y lo registra en el módulo de la aplicación automáticamente:
Nota: En Angular, necesitamos registrar todos los servicios, componentes y módulos necesarios en un archivo de módulo.Ahora echemos un vistazo más de cerca al modelo de componente (archivo de componente de TypeScript):
Esta es en realidad una clase de TypeScript, pero para definirla como un componente:
- En primer lugar, necesitamos importar Component desde la biblioteca @ angular / core , para que podamos usar el decorador de componentes
- El decorador @Component marca la clase como un componente y nos permite agregar los siguientes metadatos
- El selector es para llamar al componente más tarde como una etiqueta HTML:
- TemplateUrl es la ruta donde se encuentra la vista HTML del componente.
- S URL Tyle (puede ser más de 1) es donde los archivos de estilo del componente son.
- Finalmente, exportamos la clase (componente) para poder llamarlo dentro del módulo de la aplicación u otros lugares del proyecto más adelante.
¿Qué es la interpolación de cadenas?
Una de las preguntas más comunes que la gente hace sobre Angular es cuál es la sintaxis de las llaves. Los componentes procesan datos, pero los datos pueden cambiar con el tiempo, por lo que deben ser dinámicos.
Usamos llaves dentro de otras llaves para renderizar datos dinámicos: {{ data }}esta representación se llama interpolación de cadenas. Puede ver el ejemplo en la versión de video anterior.
Envolver
Uno de los pasos más importantes para aprender Angular es saber cómo crear componentes y usarlos de manera eficiente. Espero que encuentre útil esta publicación. En la siguiente parte, veremos las Directivas angulares como ng-if, ng-for, ng-class y más. Manténganse al tanto :)
Si desea obtener más información sobre el desarrollo web, ¡no dude en seguirme en Youtube !
¡Gracias por leer!