Qual é a diferença entre um componente Angular e um módulo

Estive assistindo a vídeos e lendo artigos, mas este artigo específico me deixa tão confusa, no início do artigo diz

As aplicações em Angular seguem a estrutura modular. Os aplicativos Angular conterão muitos módulos, cada um dedicado a uma única finalidade. Normalmente, o módulo é um grupo coeso de código integrado aos outros módulos para executar seus aplicativos Angular.

Um módulo exporta algumas classes, funções e valores de seu código. O componente é um bloco fundamental do Angular e vários componentes compõem seu aplicativo.

Um módulo pode ser uma biblioteca para outro módulo. Por exemplo, a biblioteca angular2 / core, que é um módulo principal da biblioteca Angular, será importada por outro componente.

São termos permutáveis? Um componente é um módulo? Mas não viceversa?

Visualizações de controle de componentes (html). Eles também se comunicam com outros componentes e serviços para trazer funcionalidade ao seu aplicativo.

Os módulos consistem em um ou mais componentes. Eles não controlam nenhum html. Seus módulos declaram quais componentes podem ser usados ​​por componentes pertencentes a outros módulos, quais classes serão injetadas pelo injetor de dependência e qual componente será inicializado. Os módulos permitem gerenciar seus componentes para trazer modularidade ao seu aplicativo.

Bem, é tarde demais para postar uma resposta, mas acho que será fácil entender quem é iniciante no Angular. A seguir, é apresentado um dos exemplos que dou durante minha apresentação.

Considere sua aplicação angular como um edifício. Um edifício pode ter Nvários apartamentos nele. Um apartamento é considerado como um módulo. Um apartamento pode ter um Nnúmero de salas que correspondem aos blocos de construção de um aplicativo angular chamado componentes.

Agora, cada apartamento (Módulo) `terá salas (Componentes), elevadores (Serviços) para permitir maior movimentação dentro e fora dos apartamentos, fios (Tubos) para mover informações e torná-las úteis nos apartamentos.

Você também terá lugares como piscina, quadra de tênis que estão sendo compartilhados por todos os moradores do prédio. Portanto, eles podem ser considerados componentes no SharedModule.

Basicamente, a diferença é a seguinte,

Siga meus slides para entender os blocos de construção de um aplicativo Angular

Aqui está a minha sessão em Building Blocks of Angular for beginners

Explicação mais simples:

O módulo é como um grande contêiner que contém um ou muitos contêineres pequenos chamados Componente, Serviço, Tubulação

Um componente contém:

• Modelo HTML ou código HTML

• Código (TypeScript)

• Serviço: é um código reutilizável compartilhado pelos Componentes, de modo que não é necessário reescrever o código

• Tubulação: recebe os dados como entrada e os transforma na saída desejada

.

Componente angular

Um componente é um dos blocos de construção básicos de um aplicativo Angular. Um aplicativo pode ter mais de um componente. Em um aplicativo normal, um componente contém um arquivo de classe da página de exibição em HTML, um arquivo de classe que controla o comportamento da página HTML e o arquivo CSS / scss para estilizar sua exibição em HTML. Um componente pode ser criado usando o @Componentdecorador que faz parte do @angular/coremódulo.

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

e criar um componente

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

Para criar um componente ou aplicativo angular, aqui está o tutorial

Módulo Angular

Um módulo angular é um conjunto de componentes básicos angulares, como componentes , diretivas , serviços etc. Um aplicativo pode ter mais de um módulo.

Um módulo pode ser criado usando o @NgModuledecorador.

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

Um módulo no Angular 2 é algo feito de componentes, diretivas, serviços etc. Um ou muitos módulos se combinam para criar um aplicativo. Aplicação de separação de módulos em partes lógicas de código. Cada módulo executa uma única tarefa.

Os componentes no Angular 2 são classes nas quais você escreve sua lógica para a página que deseja exibir. Os componentes controlam a exibição (html). Os componentes se comunicam com outros componentes e serviços.

Uma imagem vale mais que mil palavras !

O conceito de Angular é muito simples. Ele propõe "construir" um aplicativo com "tijolos" -> módulos.

Esse conceito torna possível estruturar melhor o código e facilitar a reutilização e o compartilhamento.

Cuidado para não confundir os módulos Angular com os módulos ES2015 / TypeScript.

Em relação ao módulo Angular, é um mecanismo para:

1- componentes do grupo (mas também serviços, diretrizes, tubulações etc ...)

2- definir suas dependências

3- defina sua visibilidade.

Um módulo Angular é simplesmente definido com uma classe (geralmente vazia) e o decorador NgModule.

Componente é 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 você possa ter blocos de funcionalidade que podem ser executados independentemente. Por exemplo, um aplicativo pode ter módulos para recursos, para agrupar componentes para um recurso específico do seu aplicativo, como um painel, que você pode simplesmente pegar e usar dentro de outro aplicativo.