Post Top Ad

Your Ad Spot

jueves, 25 de junio de 2020

Tutorial de componentes de raíz angular

En este tutorial aprenderemos sobre cómo Angular inicia una aplicación para que se ejecute. Esto sucede por una combinación del módulo raíz y el componente raíz trabajando juntos. El componente raíz es el primer componente al que se hace referencia y se aloja en la página web principal index.html. Todo lo demás en Angular se basa en esta raíz, por lo que es útil observar de cerca cómo funciona este componente raíz.

Componente de raíz angular

Cuando creas un nuevo proyecto en angular, ¿dónde está el componente raíz? Si utiliza la CLI angular para andamiar el proyecto por usted, appse crea un componente como el componente raíz para usted. consiste en una carpeta de aplicaciones y los archivos necesarios para ese componente angular .
componente de la aplicación de raíz angular

Definición de la clase de componente

Podemos eliminar el marcado predeterminado en el archivo app.component.ts ya que vamos a comenzar desde cero. Primero comenzamos definiendo la clase. La palabra clave exportar nos permite hacer uso de esta clase en otras partes de la aplicación. La pageTitlepropiedad se usará para configurar el título de una página.

Definir el decorador de componentes

A continuación, queremos definir el Decorador de componentes, y esto va justo por encima de la definición de clase.
Dependiendo del IDE que esté utilizando, es posible que vea un mensaje que diga ng: Componente 'AppComponent' debe tener una plantilla o templateUrl . Esto es cierto ya que cualquier componente angular * debe * tener una plantilla asociada. Aprendimos anteriormente que esto podría ser en forma de una plantilla en línea, o como un archivo separado. Puedes usar cualquiera que quieras, pero uno debe estar presente.

Paso de metadatos de componentes

Así es como puedes definir esa plantilla. Es parte de los metadatos del componente. En primer lugar, sin embargo, especifica un selector para el nombre del componente cuando se utiliza como directiva en un archivo de plantilla. Como estamos creando una aplicación relacionada con los juegos, utilizaremos el prefijo del juego. Además, dado que este es el componente raíz, asignaremos un sufijo de raíz. Eso se ve así.
Nota: Si ve un error como El selector del componente "AppComponent" debe tener el prefijo "app" , esto solo significa que necesita actualizar la configuración de sus prefijos en angular.json y tslint.json.

Establecer plantilla en línea

Para este componente raíz, solo haremos uso de una plantilla en línea utilizando ES6 Back Ticks.

Bootstrap El componente raíz

Las secciones anteriores han definido un componente raíz para una aplicación de juegos ficticios en Angular. Hay un paso más para completar antes de usar el componente y es arrancar el componente . Angular tiene un archivo index.html y es la página principal de la aplicación. De hecho, suele ser la única página web de toda la aplicación. Al usuario le parece que hay muchas páginas, pero lo que está sucediendo es que html se inserta y elimina dinámicamente de esta única página index.html. Es por eso que este tipo de aplicaciones se llaman aplicaciones de una sola página . Aquí podemos ver la relación entre el selector en un componente y cómo se hace referencia en html.
selector angular y directiva
En el marcado html cuando usamos ese html personalizado, en nuestro caso <game-root> </game-root>, se conoce como directiva . También tenemos directivas estructurales en angular. Ahora, ¿cómo sabe Angular qué hacer con un elemento html personalizado como ese? Busca en el módulo angular la respuesta. Los módulos angulares se utilizan para organizar una aplicación en bloques de funcionalidad. No los confunda con los módulos ES6, que son completamente diferentes. Es el Módulo Angular que Bootstraps el componente. También es posible que escuche esto denominado Registro de un componente. Para este componente, el arranque ocurre en app.module.ts .
Un módulo angular se identifica utilizando una clase con la palabra clave de exportación. Esta clase está hecha para ser un módulo utilizando el decorador @NgModule. Al igual que un componente utiliza el decorador @Component, un módulo también utiliza un decorador @NgModule. Las propiedades del decorador @NgModule son matrices. La matriz de declaraciones define qué componentes pertenecen a este módulo. La matriz de importaciones define los módulos externos que deben estar disponibles para cualquier componente de este módulo angular. Estos pueden ser módulos angulares, módulos de terceros o módulos personalizados definidos. Finalmente, la matriz bootstrap define el componente inicial de la aplicación y, por supuesto, ese es nuestro componente de aplicación.
Ahora podemos probar esto ejecutando ng servedesde nuestro directorio raíz de aplicaciones.
Demostración del componente raíz angular
¡No es increíble, pero es un comienzo! Podemos inspeccionar las Herramientas para desarrolladores de Chrome para obtener más información sobre cómo funciona esto.
angular en herramientas de desarrollador de Chrome
Lo que podemos ver es que nuestra costumbrela etiqueta ahora tiene la plantilla html asociada insertada entre las etiquetas de apertura y cierre. ¡Frio!

Resumen

Angular se compone de componentes. Esos componentes están definidos por una clase en Typecript que se mejora con un Decorador @Component. Cada componente puede importar lo que sea necesario para hacer su trabajo. En este tutorial echamos un vistazo al componente raíz y vimos cómo iniciarlo utilizando el módulo app.module.ts.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas