Tutorial del componente de raíz angular

 

En este tutorial aprenderemos cómo Angular arranca 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 crea un nuevo proyecto en angular, ¿dónde está el componente raíz? Si utiliza la CLI de Angular para appcrear scaffolding en el proyecto, se crea un componente como el componente raíz para usted. consta de una carpeta de aplicaciones y los archivos necesarios para ese componente angular.

---

Definición de la clase de componente

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

1 2 3

export class AppComponent {     pageTitle = 'Angular Games Viewer'; }

---

Definir el decorador de componentes

A continuación, queremos definir el Decorador de componentes, y esto va justo encima de la definición de la clase.

1 2 3 4 5 6

import {Component} from '@angular/core';   @Component({}) export class AppComponent {     pageTitle = 'Angular Games Viewer'; }

Dependiendo del IDE que esté utilizando, es posible que vea un mensaje que indique ng: El 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 tener la forma de una plantilla en línea o como un archivo separado. Puede usar cualquiera de los que desee, pero debe haber uno presente.

Pasar 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 usa como directiva en un archivo de plantilla. Dado que estamos creando una aplicación relacionada con juegos, usaremos el prefijo de juego. Además, dado que este es el componente raíz, asignaremos un sufijo de raíz. Eso se ve así.

1 2 3 4 5 6 7 8

import {Component} from '@angular/core';   @Component({     selector: 'game-root' }) export class AppComponent {     pageTitle = 'Angular Games Viewer'; }

Nota: Si ve un error como El selector del componente "AppComponent" debe tener el prefijo "aplicación" , esto solo significa que necesita actualizar la configuración de su prefijo 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 usando ES6 Back Ticks.

1 2 3 4 5 6 7 8 9 10 11 12

import {Component} from '@angular/core';   @Component({     selector: 'game-root',     template: `     <div><h1>{{pageTitle}}</h1>         <div>Game app root component</div>     </div>` }) export class AppComponent {     pageTitle = 'Angular Games Viewer'; }

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. El usuario ve que hay muchas páginas, pero lo que sucede 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 denominan aplicaciones de una sola página . Aquí podemos ver la relación entre el selector en un componente y cómo se hace referencia a él en html.

En el marcado html, cuando usamos ese html personalizado, en nuestro caso <game-root> </game-root>, se lo 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 inicia el componente. Es posible que también escuche que se hace referencia a esto como Registro de un componente. Para este componente, el bootstrapping ocurre en app.module.ts .

1 2 3 4 5 6 7 8 9 10

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component';   @NgModule({   declarations: [ AppComponent ],   imports: [ BrowserModule ],   bootstrap: [AppComponent] }) export class AppModule { }

Un módulo angular se identifica mediante una clase con la palabra clave export. Esta clase está hecha para ser un módulo usando @NgModule Decorator. Al igual que un componente utiliza el decorador de @Component, un módulo utiliza un decorador de @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 en este módulo angular. Estos pueden ser módulos angulares, módulos de terceros o módulos definidos a medida. Finalmente, la matriz bootstrap define el componente inicial de la aplicación y, por supuesto, ese es nuestro AppComponent.

Ahora podemos probar esto ejecutando ng servedesde el directorio raíz de nuestras aplicaciones.

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.

Lo que podemos ver es que nuestra costumbreLa etiqueta ahora tiene la plantilla asociada html insertada entre las etiquetas de apertura y cierre. ¡Frio!

Resumen

Angular se compone de componentes. Esos componentes se definen mediante una clase en Typecript que se mejora con un @Component Decorator. 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 arrancarlo usando el módulo app.module.ts.