Componentes de Angular

Name: Componentes de Angular
Author: Michaela Ochnich

Estas lecciones presentan los componentes de Angular y cómo controlan la vista de una aplicación Angular. Aprenderá sobre el decorador de componentes y cómo se…

Preview the first lesson free — get full access to all 5 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

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.

Principiante Proveedor : Michaela Ochnich 5 lecciones · 25m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

Estas lecciones presentan los componentes de Angular y cómo controlan la vista de una aplicación Angular. Aprenderá sobre el decorador de componentes y cómo se usa para configurar el componente. También aprenderá a mostrar datos en la plantilla del componente. Finalmente, aprenderá sobre los diferentes tipos de enlace de datos y los ganchos del ciclo de vida de los componentes.

Lo que aprenderás

Entender qué es un componente de Angular y cómo controla la vista de una aplicación Angular
Configurar componentes usando el decorador de componente
Mostrar datos en la plantilla del componente
Aplicar los diferentes tipos de vinculación de datos
Trabajar con los ganchos del ciclo de vida del componente

Puntos clave

Los componentes de Angular controlan la vista de una aplicación Angular.
El decorador de componente se usa para configurar el componente.
Las plantillas se usan para mostrar datos en el componente.
Angular soporta diferentes tipos de vinculación de datos.
Los componentes tienen ganchos del ciclo de vida que se pueden usar durante su ciclo de vida.

Preguntas frecuentes

¿Qué cubre este curso?

Introduce componentes de Angular y cómo controlan la vista de una aplicación Angular, incluyendo el decorador de componente, mostrar datos en la plantilla del componente, los diferentes tipos de vinculación de datos y los ganchos del ciclo de vida del componente.

¿Qué habilidades ganaré en este curso?

Ganará habilidades en Angular (Framework Web), Componentes de Angular, Angular UI, Librerías de Componentes, Componentes HTML y Componentes de UI.

¿Qué temas se enseñan en las lecciones?

Las lecciones cubren qué es un componente, el decorador de componente, plantillas, vinculación y el ciclo de vida del componente.

¿Cuáles son los objetivos de aprendizaje de este curso?

Los objetivos son aprender sobre componentes de Angular y sus funciones y aprender los diferentes tipos de vinculación de datos.