web-dev-qa-db-fra.com

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

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

Les applications dans Angular suivent une structure modulaire. Les applications Angular contiendront de nombreux modules, chacun étant dédié à un seul objectif. Généralement, 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 de 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 primaire Angular sera importée par un autre composant.

Sont-ils des termes échangeables? Un composant est-il un module? Mais pas vice-versa?

angularmodulecomponents
130
Luis Pena

Les composants contrôlent les vues (html). Ils communiquent également avec d'autres composants et services pour apporter des fonctionnalités à votre application.

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

188
Sefa

Eh bien, il est trop tard pour poster une réponse, mais j’ai le sentiment que ce sera easy pour comprendre qui est un débutant avec Angular. Un des exemples que je donne lors de ma présentation.

Considérez votre angular Application en tant que Building. Un bâtiment peut contenir N nombre de Apartments. Un Apartment est considéré comme un Module. Un appartement peut avoir N nombre de rooms qui correspondent aux éléments constitutifs d'une application Angular nommée Components.

Maintenant chaque Apartment (Module) aura Rooms (Components), Lifts (Services) pour permettre un plus grand mouvement d’entrée et de sortie des appartements, Wires (Pipes) pour déplacer des informations autour et le rendre utile dans les appartements.

Vous aurez également des endroits comme swimming pool, tennis court qui sont partagés par tous les résidents de l’immeuble. Donc, ceux-ci peuvent être considérés comme des composants à l'intérieur de SharedModule.

Fondamentalement, la différence est la suivante,

enter image description here

Suivez mes diapositives pour comprendre éléments constitutifs d’une application Angular

104
Sajeetharan - MSFT

enter image description here

Explication la plus simple:

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

Un composant contient:

  • Modèle HTML ou code HTML

  • Code (TypeScript)

  • Service: Il s'agit d'un code réutilisable partagé par les composants, de sorte qu'une réécriture du code n'est pas nécessaire.

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

.

40
wins999

Composante angulaire

n 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éé à l'aide de @Component décorateur faisant partie du module @angular/core.

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

et créer un composant

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

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

Module angulaire

Un module angulaire est composé de angular blocs de construction de base tels que composant , directives , services etc. Une application peut avoir plusieurs modules.

Un module peut être créé en utilisant @NgModule decorator.

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

Un module dans Angular 2 est quelque chose qui est composé 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 de code logiques. Chaque module effectue une seule tâche.

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

11
Jayani Sumudini

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 together afin que vous puissiez avoir des morceaux de fonctionnalité qui peuvent ensuite être exécutés indépendamment. Par exemple, une application peut avoir des modules pour les fonctionnalités, pour regrouper les composants d'une fonctionnalité particulière de votre application, telle qu'un tableau de bord, que vous pouvez simplement récupérer et utiliser dans une autre application.

4
Daksh