Componentes de Angular

Hola, esta lección presentará qué es un componente angular, y cómo crear uno usando Angular CLI. Los componentes son la base del marco angular. Un componente es una parte de la aplicación, como una barra de navegación, o una barra de navegación lateral. Podría ser un campo de búsqueda o tal vez un formulario de registro. Los componentes son las diferentes piezas que construyen tu aplicación, proporcionando una vista para que los usuarios interactúen, y una clase para responder a eventos, y manejar los datos y la lógica. La clase controla la lógica y el comportamiento del componente, y la plantilla configura cómo se representa en la pantalla para el usuario. La clase de componente y la plantilla son capaces de interactuar y compartir información mediante la vinculación. El enlace de propiedad permite a la clase para pasar datos a la plantilla para mostrarlos al usuario. Si el usuario cambia algún dato en la vista, El enlace de eventos se puede usar para disparar un evento. que actualiza los datos de la clase. Los metadatos proporcionan información de configuración adicional para la clase de componente. Los componentes se nombran con una propiedad llamada selector que se establece en los metadatos. El selector se usa para decirle a Angular donde en la aplicación este componente debe crearse y mostrarse. Usando el selector, puedes incrustar componentes, y otras plantillas de componentes comenzando con este componente raíz, que contiene toda la aplicación Angular. Estos componentes integrados tienen relaciones padre / hijo que les permiten interactuar y pasar datos. Un componente secundario está incrustado dentro de un componente principal. Entonces, aquí, el componente raíz es el padre, y luego tiene dos componentes secundarios, A y B. El componente A aquí es el componente principal a este componente aquí abajo, el componente de nietos. Este componente es un nieto del componente raíz. ya que es hijo de uno de los componentes hijo de la raíz. Ahora, para crear un componente, abre una ventana de Terminal, y desea asegurarse de estar en el directorio correcto. Quieres estar en la carpeta raíz de su aplicación Angular. Entonces, para mí, esa es la carpeta de componentes aquí. Luego, el comando para crear un nuevo componente. es del componente generar, y luego el nombre del componente. Entonces puedes ver en la salida impresa que se crearon cuatro nuevos archivos, y se modificó el archivo app.module. Dentro del archivo del módulo, puede ver que importa automáticamente el componente aquí, y luego lo declara para su uso en el módulo aquí abajo. La herramienta CLI se encarga de este paso al generar el componente. Entonces, si está creando sus archivos de componentes manualmente, no olvides declararlos aquí, o la aplicación se compilará con errores. La carpeta del componente está aquí dentro de esta carpeta principal de la aplicación, y hay cuatro archivos que fueron creados por la CLI. Este primer archivo TypeScript aquí se utiliza para escribir pruebas para el componente. Este segundo archivo de TypeScript aquí es el que es para la clase. Aquí está el decorador que marca esta clase como un componente, y los metadatos para configurarlo. Cubriremos esto con más profundidad en la próxima lección, pero recuerda el nombre del selector aquí. Esto es lo que necesitará para agregar este componente a la aplicación. Si abre el archivo HTML del componente, puedes ver que comienza con esta etiqueta de párrafo aquí que indica que el componente está funcionando. Y luego, si abre el archivo CSS aquí, este comienza en blanco, pero podemos escribir rápidamente una regla para cambiar el color de la fuente de esa etiqueta de párrafo. Ahora, para mostrar este componente en la aplicación, abre el archivo app.component.html, que es el archivo de plantilla para el componente raíz. Aquí puede eliminar todo este código de plantilla de inicio. Y luego agregaré rápidamente una etiqueta h1 que dice mi aplicación angular. Luego, para agregar el nuevo componente, escribir una etiqueta usando el selector que se estableció para el componente. En este caso, fue app-hello-world. Ahora voy a ejecutar el comando ng serve en la ventana de Terminal para construir la aplicación. Ahora que la aplicación se está ejecutando, Lo abriré en una ventana del navegador y puede ir a localhost: 4200 para ver la aplicación. Y aquí puedes ver la aplicación muestra ese componente que se creó. Eso es todo por esta lección Presentación de componentes angulares. Mira la próxima lección donde cubriremos el decorador y los metadatos.