Tout sur Ng Generate Component

Dans cet article, nous verrons comment utiliser la CLI angulaire pour créer des composants.

Angular est un framework qui nous permet de créer des interfaces Web interactives pour les utilisateurs. Il est livré avec la CLI angulaire qui nous permet de créer facilement des fichiers de projet.

Angular CLI a de nombreuses options qui nous permettent de créer divers fichiers tels que des composants, des directives, des modules, des gardes et plus encore. En outre, il crée automatiquement les fichiers de test associés avec les fichiers de projet, en enregistrant également les fichiers dans le module si nécessaire. Le compilateur TypeScript et d’autres outils de construction sont également ajoutés automatiquement.

Par conséquent, la plupart des projets sont créés avec la CLI angulaire pour faciliter la gestion du projet.

Dans cet article, nous verrons comment utiliser la CLI angulaire pour créer des composants.

Utilisation de base de Ng Generate

Utiliser ng generate pour créer des fichiers de composants avec les fichiers de test associés, nous exécutons :

ng generate component

Nous pouvons raccourcir cela en :

ng g component

Autres fichiers de projet que nous pouvons créer avec ng generate inclure:

• app-shell
• application
• classe
• composant
• directif
• énumération
• garde
• intercepteur
• interface
• bibliothèque
• module
• tuyau
• résolveur
• service
• travailleur de service
• web-travailleur

Nous pouvons également l’exécuter avec quelques drapeaux.

Le --defaults le drapeau fait ng g exécuter avec toutes les valeurs par défaut définies.

Le --dry-run le drapeau nous laisse courir ng g sans réellement créer les fichiers. Au lieu de cela, il nous montre simplement quels changements seront apportés lorsque nous l’exécuterons sans le drapeau.

--force nous permet de forcer l’écrasement des fichiers existants.

--help nous montre le message d’aide pour la commande que nous avons avant le drapeau.

--interactive active les invites de saisie interactives.

Ce sont tous des drapeaux booléens.

Composants et options de génération Ng

Pour créer des composants, nous exécutons ng g avec le nom du composant. Par exemple, nous exécutons :

ng g component Foo

pour créer le Foo composant, enregistrez-le dans le module par défaut et ajoutez les fichiers de test associés.

ng g component vient avec ses propres options.

Le --change-detection flag nous permet de définir la stratégie de détection des changements pour le composant.

--display-block ajoutons :host { display: block; } au fichier lorsque nous le générons.

--export permet d’exporter le composant. C’est un drapeau booléen.

--flat crée de nouveaux fichiers au niveau supérieur du projet en cours. C’est un drapeau booléen.

--inline-style fait que Angular CLI place les styles dans le fichier de composant sous forme de chaîne au lieu de dans un fichier séparé. C’est un drapeau booléen.

--inline-template oblige Angular CLI à placer le modèle dans le fichier de composant sous forme de chaîne au lieu de dans un fichier séparé. C’est aussi un drapeau booléen.

--module permet de définir le module dans lequel enregistrer le composant.

--prefix permet de définir le préfixe du sélecteur de composants.

--project nous permet de définir le projet dans lequel le composant doit se trouver. Il prend une valeur de chaîne.

--selector permet de définir le nom du sélecteur. Il prend une valeur de chaîne.

--skip-import permet à Angular CLI d’ignorer l’importation du composant dans un module. C’est un drapeau booléen.

--skip-selector permet de ne pas définir le nom du sélecteur du composant généré. C’est un drapeau booléen.

--skip-tests permet d’ignorer la création de fichiers de test. C’est un drapeau booléen.

--standalone permet de créer un composant autonome. C’est un drapeau booléen.

--style permet de définir le préprocesseur CSS à utiliser pour le fichier. Il peut s’agir d’un css , scss, sass, less ou none.

--type nous permet d’ajouter les définitions de type TypeScript que nous voulons dans un fichier de définition de type dans le projet. Il prend une valeur de chaîne.

Et --view-encapsulation permet de définir la stratégie d’encapsulation de la vue. Il peut s’agir d’un Emulated ou None ou ShadowDom. L’encapsulation de vue nous permet d’isoler un composant afin qu’il n’affecte pas le reste de l’application.

Utilisation de ng g pour générer des fichiers de composants

On peut utiliser ng g component avec les options listées ci-dessus pour créer et enregistrer notre propre composant.

Par exemple, nous exécutons :

ng g component Foo --inline-style --inline-template --selector FooBar --style scss

pour créer le Foo composant avec sélecteur FooBar. Et il a des styles et des modèles en ligne, qui se trouvent dans le fichier de composant.

Le préprocesseur du composant est scss. En conséquence, nous devrions voir le foo dossier dans le app dossier avec le foo.component.ts et foo.component.spec.ts des dossiers.

Dans foo.component.tsnous voyons:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "FooBar",
  template: ` <p>foo works!</p> `,
  styles: [],
})
export class FooComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

On voit le selector est FooBar qui est le même que ce que nous avons spécifié avec le --selector option.

template est défini sur un modèle, qui est en ligne.

Dans foo.component.tsnous voyons:

import { ComponentFixture, TestBed } from "@angular/core/testing";

import { FooComponent } from "./foo.component";

describe("FooComponent", () => {
  let component: FooComponent;
  let fixture: ComponentFixture<FooComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [FooComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(FooComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });
});

qui est généré par ng g.

Il dispose d’un test qui configure le composant pour le test dans le beforeEach rappeler.

Nous obtenons le composant testé à partir de fixture.componentInstance. Puis nous appelons it avec la description de la spécification du composant et un rappel qui vérifie que le composant est véridique avec
toBeTruthy.

Dans app.module.tsnous voyons:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FooComponent } from "./foo/foo.component";

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

On peut voir ça FooComponent est importé et il est enregistré dans le declarations propriété de tableau. En conséquence, il est prêt à être inclus dans d’autres composants dans AppModule.

Dans app.component.htmlon remplace ce qu’il y a par :

<FooBar></FooBar>

pour afficher le contenu du composant que nous venons de générer.

Par conséquent, nous voyons foo works! s’affiche à l’écran lorsque nous courons ng serve et allez à http://localhost:4200/.

Puisque nous précisons le --inline-styles drapeau quand nous courons ng g componentnous pouvons ajouter des styles au styles propriété de tableau du composant.

Par exemple, nous écrivons :

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "FooBar",
  template: ` <p>foo works!</p> `,
  styles: [
    `
      p {
        color: red;
      }
    `,
  ],
})
export class FooComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

pour ajouter une chaîne avec le styles propriété de tableau.

Maintenant le p L’élément est affiché avec du texte rouge puisque nous avons défini le style de couleur sur rouge.

Après avoir créé le composant avec ng g componentnous pouvons encore le changer plus tard.

Par exemple, nous pouvons créer des styles et des fichiers de modèles manuellement dans le foo dossier, puis définissez le templateUrls et stylesUrls propriétés dans l’objet que nous appelons @Component avec pour spécifier les chemins des modèles externes et des fichiers de style.

Et nous pouvons nous débarrasser de template et styles properties si nous remplaçons le modèle et les styles par des fichiers externes.

Conclusion

Angular CLI a de nombreuses options qui nous permettent de créer divers fichiers tels que des composants, des directives, des modules, des gardes et plus encore. Et il crée automatiquement les fichiers de test et les fichiers de projet associés, les enregistre et ajoute les outils de construction.

Nous pouvons définir de nombreuses options dans la commande que nous exécutons pour créer le composant. Et après cela, nous pouvons toujours modifier manuellement le composant à notre guise.