Para crear el componente, podemos usar el siguiente comando ng seguido de un nombre adecuado.
1Ng generar componente nombre_componente
powerhell
O
1Ng g c nombre_del_componente
powerhell
Estas son las dos formas principales de generar un nuevo componente en Angular: usando ng g c , y usando ng generar componente . Usando cualquiera de estos dos comandos, el nuevo componente puede ser generado muy fácilmente y seguido por el nombre de componente adecuado de su elección.
¿No es realmente simple?
Sí, es sólo un comando de una línea que crea diferentes archivos y una carpeta, y lo más importante es que también hace referencia al componente recién creado al archivo del módulo para que no tengamos que configurarlo por nuestra cuenta.
Vamos a crear un nuevo componente llamado «test» usando el siguiente comando.
1Ng generar componente test
powerhell
Después de ejecutar el comando anterior, podemos ver que la estructura de archivos se ve así.
Como podemos ver, tenemos cuatro archivos diferentes para diferentes usos.
- test.component.ts (Clase con decorador @Componente)
- especificaciones del componente de prueba (para la especificación del caso de prueba)
- test.component.html (Para la plantilla)
- test.component.css (Para hojas de estilo)
Si se fijan en la última línea, hay un archivo que se actualiza llamado app.module.ts, sólo porque tenemos que referenciar el componente recién creado a nuestro archivo de módulo raíz para que la CLI angular haga el trabajo automáticamente mientras se genera el componente.
Veamos el contenido por defecto de los archivos recién creados, que se describen a continuación.
test.component.ts
12345678910111213141516importar{Componente,OnInit}de$0027@angular/núcleo$0027;@Componente({ selector:$0027app-test$0027, templateUrl:$0027./test.component.html$0027, styleUrls:[$0027./test.component.css$0027]})exportclassTestComponentes de pruebaOnInit{constructor(){}ngOnInit(){}}tipografía
test.component.spec.ts
12345678910111213141516171819202122232425import{async,ComponenteFijación,CamaDePrueba}de$0027@angular/núcleo/prueba$0027;import{ComponenteDePrueba}de$0027./prueba. componente$0027;describir($0027TestComponent$0027,()= >{let componente:TestComponent;let fixture:ComponentFixture<TestComponent configureTestingModule({ declaraciones:[TestComponent]}).compileComponents();}));beforeEach(()= > { fixture =TestBed.createComponent(TestComponent); component = fixture.componentInstance; fixture.detectChanges();});it($0027should create$0027,()=>{expect(component).toBeTruthy();});});tipografía
test.component.html
1<p;p;²;Trabajos de prueba!html
test.component.css
En este archivo, no tenemos ninguna clase generada para nuestro componente de prueba, así que el archivo está vacío.
Aparte de este archivo, hay un cambio crucial, que consiste en actualizar la referencia del componente recién creado en el módulo raíz. El archivo se verá así:
App.module.ts
1234567891011121314151617181920212223242526importar{BrowserModule}de$0027@angular/plataforma-browser$0027;import{NgModule}de$0027@angular/core$0027;import{AppRoutingModule}de$0027./app-routing.module$0027;import{AppComponent}de$0027./app. component$0027;import{HttpClientModule}de$0027@angular/common/http$0027;// Nuevo componente añadido import{TestComponent}de$0027./test/test.component$0027;@NgModule({ declaraciones:[AppComponent,// ReferenceTestComponent], importa:[BrowserModule,AppRoutingModule,HttpClientModule], proveedores:[], bootstrap:[AppComponent]})exportclassAppModule{}tipografía
Como se puede ver, el componente de prueba es autoimportado desde el lugar donde se crea y referenciado en el mismo componente en las importaciones: [] sección automáticamente.
Así es como se genera un componente desde cero usando el comando CLI junto con un nombre adecuado. De la misma manera, también podemos crear otros tipos de archivos usando el CLI, como servicio, directiva, pipas, enum, etc.