Qual è la differenza tra un componente angolare e un modulo

Ho guardato video e letto articoli ma questo articolo specifico mi rende così confuso, all'inizio dell'articolo che dice

Le applicazioni in Angular seguono una struttura modulare. Le app angolari conterranno molti moduli, ognuno dedicato al singolo scopo. Tipicamente module è un gruppo coerente di codice che è integrato con gli altri moduli per eseguire le tue app Angular.

Un modulo esporta alcune classi, funzioni e valori dal suo codice. Il componente è un blocco fondamentale di angolari e più componenti costituiranno la tua applicazione.

Un modulo può essere una libreria per un altro modulo. Ad esempio, la libreria angular2 / core che è un modulo libreria angolare primaria verrà importata da un altro componente.

Sono termini scambiabili? Un componente è un modulo? Ma non viceversa?

Viste di controllo dei componenti (html). Comunicano anche con altri componenti e servizi per offrire funzionalità alla tua app.

I moduli sono costituiti da uno o più componenti. Non controllano alcun html. I moduli dichiarano quali componenti possono essere utilizzati dai componenti appartenenti ad altri moduli, quali classi verranno iniettate dall'iniettore di dipendenza e quale componente verrà avviato. I moduli ti consentono di gestire i tuoi componenti per portare modularità alla tua app.

Bene, è troppo tardi per pubblicare una risposta, ma penso che sarà facile capire chi è principiante con Angular. Di seguito è riportato uno degli esempi che do durante la mia presentazione.

Considera la tua applicazione angolare come un edificio. Un edificio può contenere un Nnumero di appartamenti. Un appartamento è considerato come un modulo. Un appartamento può quindi avere un Nnumero di stanze che corrispondono ai mattoni di un'applicazione angolare denominata componenti.

Ora ogni appartamento (Modulo) `avrà stanze (Componenti), ascensori (Servizi) per consentire un più ampio movimento dentro e fuori gli appartamenti, fili (Tubi) per spostare le informazioni e renderle utili negli appartamenti.

Avrai anche posti come piscina, campo da tennis che sono condivisi da tutti i residenti dell'edificio. Quindi questi possono essere considerati componenti all'interno di SharedModule.

Fondamentalmente, la differenza è la seguente,

Segui le mie diapositive per comprendere i mattoni di un'applicazione angolare

Ecco la mia sessione Building Blocks of Angular for beginners

Spiegazione più semplice:

Il modulo è come un grande contenitore contenente uno o più piccoli contenitori chiamati Componente, Servizio, Tubazione

Un componente contiene:

• Modello HTML o codice HTML

• Codice (dattiloscritto)

• Servizio: è un codice riutilizzabile condiviso dai componenti in modo che non sia necessaria la riscrittura del codice

• Pipe: accetta i dati come input e li trasforma nell'output desiderato

.

Componente angolare

Un componente è uno dei blocchi di base di un'app angolare. Un'app può avere più di un componente. In un'app normale, un componente contiene un file di classe della pagina della vista HTML, un file di classe che controlla il comportamento della pagina HTML e il file CSS / scss per dare uno stile alla vista HTML. Un componente può essere creato utilizzando @ComponentDecorator che fa parte del @angular/coremodulo.

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

e per creare un componente

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

Per creare un componente o un'app angolare ecco il tutorial

Modulo angolare

Un modulo angolare è un insieme di blocchi angolari di base come componenti , direttive , servizi ecc. Un'app può avere più di un modulo.

Un modulo può essere creato utilizzando @NgModuleDecorator.

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

Un modulo in Angular 2 è costituito da componenti, direttive, servizi ecc. Uno o più moduli si combinano per creare un'applicazione. Applicazione di suddivisione dei moduli in parti logiche di codice. Ogni modulo esegue una singola attività.

I componenti in Angular 2 sono classi in cui si scrive la logica per la pagina che si desidera visualizzare. I componenti controllano la vista (html). I componenti comunicano con altri componenti e servizi.

Un'immagine vale più di mille parole !

Il concetto di Angular è molto semplice. Propone di "costruire" un'app con " moduli " -> moduli.

Questo concetto consente di strutturare meglio il codice e di facilitare il riutilizzo e la condivisione.

Fare attenzione a non confondere i moduli angolari con i moduli ES2015 / TypeScript.

Per quanto riguarda il modulo angolare, è un meccanismo per:

Componenti 1- gruppo (ma anche servizi, direttive, tubi ecc ...)

2- definire le loro dipendenze

3- definire la loro visibilità.

Un modulo angolare viene semplicemente definito con una classe (solitamente vuota) e il decoratore NgModule.

Il 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).

Moduli in basically group the related components, services togethermodo da poter disporre di blocchi di funzionalità che possono quindi essere eseguiti in modo indipendente. Ad esempio, un'app può avere moduli per funzionalità, per raggruppare componenti per una particolare funzionalità dell'app, come una dashboard, che puoi semplicemente prendere e utilizzare all'interno di un'altra applicazione.