web-dev-qa-db-fra.com

Rôle des importations / exportations dans Angular 2+ ngModule

J'apprends Angular 2+ et j'ai du mal à comprendre le rôle des importations/exportations dans un ngModule. Plus précisément, pourquoi est-il important d'importer un module si vous voulez importer de toute façon en utilisant la syntaxe es6 ainsi

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ]
})

N'était-il pas beaucoup plus simple de détecter que le module avait été importé via la syntaxe es6?

imports - autres modules dont les classes exportées sont requises par les modèles de composants déclarés dans ce module.

Mais nous les importons déjà au niveau des composants. Est-ce que je manque quelque chose? Je cherche aussi quelques exemples de la raison pour laquelle ils ont opté pour cette syntaxe.

angularangular-module
42
Doua Beri

La confusion vient du fait que Angular et ES6 utilisent la même terminologie ...

Dans ES6/TypeScript:

  • Un module est un fichier de code de votre projet.
  • Une importation est une ligne commençant par le mot clé import.
  • Une exportation est une ligne commençant par le mot clé export.

En angulaire:

  • Un module est une classe décorée avec @NgModule. Il sert de registre (également appelé conteneur) pour tous les composants, tuyaux, directives et fournisseurs de votre application.
  • Une importation est ce que vous mettez dans la propriété imports du décorateur @NgModule. Il permet à un module Angular d'utiliser les fonctionnalités définies dans un autre module Angular.
  • Une exportation correspond à la propriété exports du décorateur @NgModule. Il permet à un module Angular d'exposer certains de ses composants/directives/tuyaux aux autres modules des applications. Sans lui, les composants/directives/tuyaux définis dans un module ne pourraient être utilisés que dans ce module.

Les modules/importations/exportations ES6 sont de très bas niveau. Ce sont des caractéristiques du langage ES6, tout comme des mots clés tels que const ou let... Dans ES6/TypeScript, chaque fichier a son propre environnement. Ainsi, chaque fois que vous devez utiliser une classe/fonction/variable dans un fichier et que cette classe/fonction/variable a été définie dans un autre fichier, vous devez l'importer (la contrepartie étant qu'elle doit être exportée dans le fichier où elle a été définie). Ce n'est pas spécifique à Angular. TOUS LES PROJETS ÉCRITS DANS ES6 peuvent utiliser les modules/importations/exportations de cette manière.

D'autre part, les modules/imports/exports d'Angular sont une fonctionnalité du framework Angular. Ils n’ont de sens que dans le monde Angular. D'autres frameworks JavaScript peuvent avoir des notions similaires, mais ils utiliseront une syntaxe différente.

Maintenant, il y a un chevauchement entre les deux. Par exemple, pour utiliser un symbole dans @NgModule.imports (Monde angulaire), vous devez import le symbole dans le fichier TypeScript où le module est défini (monde ES6/TypeScript):

// ES6/TypeScript Imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  // Angular Imports
  imports: [ BrowserModule ]
})

Mais si vous lisez attentivement les définitions ci-dessus, vous réaliserez que les deux choses sont en réalité très différentes. L'un est la langue, l'autre est le cadre.

63
AngularChef
import { BrowserModule } from '@angular/platform-browser';

chargera le fichier en mémoire.

@NgModule({
    imports:      [ BrowserModule ],

enregistrera BrowserModule avec Angular.

15
Ynot