¿Qué son los componentes?

2/20
Recursos

Un componente es una pieza de software con una responsabilidad única y una estructura y funcionalidad determinada, además de ser reutilizable. Es una forma de dividir tu aplicación de una forma escalable para no tener TODO en un solo archivo. Por ejemplo, un componente para el header, otro para el footer, uno más para el menú, etc.

Componentes en Angular

Puedes crear tu primer componente en Angular utilizando el comando ng generate component test-name o en su forma corta ng g c test-name. Esta acción creará los siguientes archivos:

  • my-test-name.component.html
  • my-test-name.component.ts
  • my-test-name.component.css
  • my-test-name.component.spec.ts

Observa el archivo .html que será el template que tu componente utilizará. El archivo .ts que contiene el código TypeScript y la lógica. El archivo .css que contiene los estilos. Si escogiste trabajar con un preprocesador de CSS, este archivo puede ser .scss.sass o .less. Finalmente, el archivo más extraño, .spec.ts que contiene el código de las pruebas unitarias que puedes escribir para automatizar el testing en tu componente.

Angular también importará automáticamente el componente creado en el archivo app.module.ts para que automáticamente puedas utilizarlo en tu aplicación.

...
import { TestNameComponent } from './test-name/test-name.component';

@NgModule({
  declarations: [
    ...
    TestNameComponent
  ],
  imports: [ ... ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Partes de un componente Angular

El archivo con la extensión .ts es el principal de cualquier componente Angular.

import { Component } from '@angular/core';

@Component({
  selector: 'app-test-name',
  templateUrl: './test-name.component.html',
  styleUrls: ['./test-name.component.scss']
})
export class TestNameComponent {
    ...
}

Observa lo más importante, el decorador @Component(). Los decoradores alteran el comportamiento de una clase en Angular para que el compilador de TypeScript interprete el código de la manera correcta y sepa que una clase es un componente, un módulo, un servicio, una directiva, etc. Este decorador es quién enlaza el componente con el archivo HTML y la hoja de estilos, además de otorgarle al componente un selector o un nombre para emplearlo en tus templates.

Aporte creado por: Kevin Fiorentino.

Aportes 9

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Si en algún caso, debes crear un componente muy básico, que no requiera un archivo de estilos, puedes añadir el flag “-is” que es “inline styles”, esto hace que no se genere un archivo de estilos…

También puedes usar --skip-tests para no crear el archivo de pruebas en caso de que lo necesites… 😄

ng g c componentes/img --skip-tests -is

Incluso si este video es de react ayuda en teorizar que es un componente
https://www.youtube.com/watch?v=2dND8evRRls

¿QUÉ SON LOS COMPONENTES?

Un componente tiene responsabilidades unicas, estructura propia con estilos apropiados.

Componentes generado tiene los siguientes archivos:
-> todo.component.html
-> todo.component.css
-> todo.component.spec.ts (pruebas en angular)
-> todo.component.ts

Comando para crear un componente
-> ng g c name_component

Crear componente sin estilos
-> ng g c componentes/name_component -is

Crear componente sin archivos de testing
-> ng g c componentes/img --skip-tests

Con esto deberian iniciar en el curso de fundamentos 😛 (para organizacion)

Si no te pregunta el tipo de preprocesador que quieres usar o por la creación de rutas al crear el proyecto, o ejecuta el siguiente comando:

ng new my-store --style=scss
ng generate module app-routing --flat --module=app

flag para no crear file .spec.ts
ng g c name-component --spec =false

Mis apuntes

// Comando para crear un componente completo
ng generate component name-component

// Comando abreviado para crear un componente completo
ng g c name-component

// Crear componente sin estilos
ng g c componentes/name-component -is

// Crear componente sin archivos de testing
ng g c componentes/img --skip-tests

Creamos el nuevo proyecto:
ng new my-store
Agregamos nuevo componente en su propia carpeta
ng g c components/img
Luego lo mostramos en la pagina
ng serve

Con toda a aprender con Nicolas, ye v i el primero muy completo, a por ello!!