Quelle est la différence entre un composant angulaire et un module

J'ai regardé des vidéos et lu des articles, mais cet article spécifique me rend tellement confus, au début de l'article, il est dit

Les applications dans Angular suivent une structure modulaire. Les applications Angular contiendront de nombreux modules, chacun dédié à un seul objectif. En règle générale, le module est un groupe de code cohérent qui est intégré aux autres modules pour exécuter vos applications Angular.

Un module exporte certaines classes, fonctions et valeurs de son code. Le composant est un bloc fondamental d'Angular et plusieurs composants constitueront votre application.

Un module peut être une bibliothèque pour un autre module. Par exemple, la bibliothèque angular2 / core qui est un module de bibliothèque angulaire principal sera importée par un autre composant.

Sont-ils des conditions échangeables? Un composant est-il un module? Mais pas l'inverse?

Vues de contrôle des composants (html). Ils communiquent également avec d'autres composants et services pour apporter des fonctionnalités à votre application.

Les modules se composent d'un ou plusieurs composants. Ils ne contrôlent aucun html. Vos modules déclarent quels composants peuvent être utilisés par des composants appartenant à d' autres modules, quelles classes seront injectées par l'injecteur de dépendances et quel composant sera amorcé. Les modules vous permettent de gérer vos composants pour apporter de la modularité à votre application.

Eh bien, il est trop tard pour poster une réponse, mais je pense qu'il sera facile de comprendre qui sont débutants avec Angular. Voici l'un des exemples que je donne lors de ma présentation.

Considérez votre application angulaire comme un bâtiment. Un bâtiment peut contenir Nplusieurs appartements. Un appartement est considéré comme un module. Un appartement peut alors avoirN nombre de pièces correspondant aux éléments constitutifs d'une application angulaire nommée components.

Désormais, chaque appartement (module) `aura des chambres (composants), des ascenseurs (services) pour permettre un plus grand mouvement dans et hors des appartements, des fils (tuyaux) pour déplacer les informations et les rendre utiles dans les appartements.

Vous aurez également des endroits comme une piscine, un court de tennis qui sont partagés par tous les résidents du bâtiment. Ainsi, ceux-ci peuvent être considérés comme des composants à l'intérieur de SharedModule.

Fondamentalement, la différence est la suivante,

Suivez mes diapositives pour comprendre éléments constitutifs d'une application angulaire

Voici ma session sur Building Blocks of Angular for beginners

Explication la plus simple:

Le module est comme un gros conteneur contenant un ou plusieurs petits conteneurs appelés Component, Service, Pipe

Un composant contient:

• Modèle HTML ou code HTML

• Code (TypeScript)

• Service: c'est un code réutilisable qui est partagé par les composants afin que la réécriture du code ne soit pas nécessaire

• Pipe: Il prend les données en entrée et les transforme en sortie souhaitée

.

Composant angulaire

Un composant est l'un des éléments de base d'une application Angular. Une application peut avoir plusieurs composants. Dans une application normale, un composant contient un fichier de classe de page de vue HTML, un fichier de classe qui contrôle le comportement de la page HTML et le fichier CSS / scss pour styliser votre vue HTML. Un composant peut être créé en utilisant@Component décorateur qui fait partie du @angular/coremodule.

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

et pour créer un composant

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

Pour créer un composant ou une application angulaire, voici le tutoriel

Module angulaire

Un module angulaire est un ensemble de blocs de construction angulaires de base tels que des composants , des directives , des services, etc. Une application peut avoir plus d'un module.

Un module peut être créé à l'aide de @NgModuledecorator.

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

Un module dans Angular 2 est quelque chose qui est fait à partir de composants, de directives, de services, etc. Un ou plusieurs modules se combinent pour créer une Application. Les modules divisent l'application en morceaux logiques de code. Chaque module effectue une seule tâche.

Les composants dans Angular 2 sont des classes dans lesquelles vous écrivez votre logique pour la page que vous souhaitez afficher. Les composants contrôlent la vue (html). Les composants communiquent avec d'autres composants et services.

Une image vaut mieux que mille mots !

Le concept angulaire est très simple. Il propose de "construire" une application avec des "briques" -> modules.

Ce concept permet de mieux structurer le code et de faciliter la réutilisation et le partage.

Veillez à ne pas confondre les modules Angular avec les modules ES2015 / TypeScript.

Concernant le module Angular, c'est un mécanisme pour:

1- regrouper les composants (mais aussi les services, les directives, les tuyaux etc ...)

2- définir leurs dépendances

3- définir leur visibilité.

Un module Angular est simplement défini avec une classe (généralement vide) et le décorateur NgModule.

Le composant est 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).

Modules basically group the related components, services togetherafin que vous puissiez avoir des morceaux de fonctionnalités qui peuvent ensuite fonctionner indépendamment. Par exemple, une application peut avoir des modules pour des fonctionnalités, pour regrouper des composants pour une fonctionnalité particulière de votre application, comme un tableau de bord, que vous pouvez simplement saisir et utiliser dans une autre application.