¿Cuál es la diferencia entre un componente angular y un módulo?

186

He estado viendo videos y leyendo artículos, pero este artículo específico me confunde mucho, al comienzo del artículo dice

Las aplicaciones en Angular siguen una estructura modular. Las aplicaciones angulares contendrán muchos módulos, cada uno dedicado a un solo propósito. Por lo general, el módulo es un grupo de código cohesivo que se integra con los otros módulos para ejecutar sus aplicaciones angulares.

Un módulo exporta algunas clases, funciones y valores de su código. El Componente es un bloque fundamental de Angular y múltiples componentes conformarán su aplicación.

Un módulo puede ser una biblioteca para otro módulo. Por ejemplo, la biblioteca angular2 / core, que es un módulo de biblioteca angular principal, será importada por otro componente.

¿Son términos intercambiables? ¿Es un componente un módulo? Pero no viceversa?

Luis Peña
fuente

Respuestas:

246

Vistas de control de componentes (html). También se comunican con otros componentes y servicios para brindar funcionalidad a su aplicación.

Los módulos constan de uno o más componentes. No controlan ningún html. Sus módulos declaran qué componentes pueden usar los componentes que pertenecen a otros módulos, qué clases serán inyectadas por el inyector de dependencia y qué componente se iniciará. Los módulos le permiten administrar sus componentes para aportar modularidad a su aplicación.

Sefa
fuente
190

Bueno, es demasiado tarde para publicar una respuesta, pero creo que será fácil entender quiénes son principiantes con Angular. El siguiente es uno de los ejemplos que doy durante mi presentación.

Considere su aplicación angular como un edificio. Un edificio puede tener Nvarios apartamentos en él. Un apartamento se considera como un módulo. Un apartamento puede tener Nvarias habitaciones que corresponden a los bloques de construcción de una aplicación angular denominada componentes.

Ahora cada apartamento (Módulo) `tendrá habitaciones (Componentes), ascensores (Servicios) para permitir un mayor movimiento dentro y fuera de los apartamentos, cables (Tuberías) para mover la información y hacerla útil en los apartamentos.

También tendrá lugares como piscina, cancha de tenis que comparten todos los residentes del edificio. Por lo tanto, estos pueden considerarse como componentes dentro de SharedModule.

Básicamente, la diferencia es la siguiente,

Tabla que muestra las diferencias clave entre Módulo y Componente

Siga mis diapositivas para comprender los componentes básicos de una aplicación angular.

Aquí está mi sesión sobre Building Blocks of Angular for beginners

Sajeetharan
fuente
71

ingrese la descripción de la imagen aquí

La explicación más simple:

El módulo es como un contenedor grande que contiene uno o muchos contenedores pequeños llamados Componente, Servicio, Tubería

Un componente contiene:

  • Plantilla HTML o código HTML

  • Código (TypeScript)

  • Servicio: es un código reutilizable que comparten los componentes, por lo que no es necesario reescribir el código.

  • Pipe: toma datos como entrada y los transforma en la salida deseada

.

gana999
fuente
2
No estoy loco por todo esto. Sí, su componente utilizará un servicio, pero el servicio debe indicarse en el módulo, en la matriz de proveedores. Tu diagrama no muestra esto.
Scott
¿Puedo agregar un módulo secundario dentro de un componente y varios componentes a ese módulo?
Satrughna
39

Componente angular

Un componente es uno de los componentes básicos de una aplicación angular. Una aplicación puede tener más de un componente. En una aplicación normal, un componente contiene un archivo de clase de página de vista HTML, un archivo de clase que controla el comportamiento de la página HTML y el archivo CSS / scss para diseñar su vista HTML. Se puede crear un componente utilizando el @Componentdecorador que forma parte del @angular/coremódulo.

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

y para crear un componente

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

Para crear un componente o aplicación angular aquí está el tutorial

Módulo angular

Un módulo angular es un conjunto de bloques de construcción básicos angulares como componentes , directivas , servicios , etc. Una aplicación puede tener más de un módulo.

Se puede crear un módulo usando @NgModuledecorador.

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
Sunil Garg
fuente
14

Un módulo en Angular 2 es algo que está hecho de componentes, directivas, servicios, etc. Uno o muchos módulos se combinan para hacer una aplicación. Aplicación de ruptura de módulos en piezas lógicas de código. Cada módulo realiza una sola tarea.

Los componentes en Angular 2 son clases en las que escribe su lógica para la página que desea mostrar. Los componentes controlan la vista (html). Los componentes se comunican con otros componentes y servicios.

Jayani Sumudini
fuente
10

https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LBvB_WpCSzgVF0c4R9W%2F-LBvCVC22B-3Ls3_nyuC%2.angular?t=les.jpg 624c03ca-e24f-457d-8aa7-591d159e573c

Una imagen vale mas que mil palabras !

El concepto de angular es muy simple. Propone "construir" una aplicación con "ladrillos" -> módulos.

Este concepto permite estructurar mejor el código y facilitar la reutilización y el uso compartido.

Tenga cuidado de no confundir los módulos angulares con los módulos ES2015 / TypeScript.

En cuanto al módulo angular, es un mecanismo para:

1- agrupar componentes (pero también servicios, directivas, tuberías, etc.)

2- define sus dependencias

3- define su visibilidad.

Un módulo angular se define simplemente con una clase (generalmente vacía) y el decorador NgModule.

François
fuente
5

Componente es the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template).

Módulos basically group the related components, services togetherpara que pueda tener trozos de funcionalidad que luego se pueden ejecutar de forma independiente. Por ejemplo, una aplicación puede tener módulos para funciones, para agrupar componentes para una función particular de su aplicación, como un panel de control, que simplemente puede tomar y usar dentro de otra aplicación.

Daksh
fuente