Génération avec le CLI Angular

Objectifs de la partie

  • Apprendre à créer un composant avec le CLI Angular

Contexte

A utiliser tout le temps !

Méthode

Le CLI Angular nous permet de facilement générer la structure de base d'un composant. Pour ce faire, on va se servir de la commande ng generate component <nom-composant> (ou encore ng g c <nom-composant> en version raccourcie).

Dans un terminal, naviguez jusqu'à la racine de votre projet Angular et entrez la commande :

1
ng g c home

Cette commande a généré, dans src, un répertoire home ayant une structure similaire à celle du composant app vu précédemment. Ce composant fait donc partie du module principal (root) de notre application.

De plus, la commande a déclaré le composant auprès de son module parent. Dans notre cas, le module root :

1
@NgModule({
2
  declarations: [
3
    AppComponent,
4
    HomeComponent
5
  ],
6
  imports: [
7
    BrowserModule
8
  ],
9
  providers: [],
10
  bootstrap: [AppComponent]
11
})
12
export class AppModule { }

Le plus souvent, par souci d'organisation, on souhaite créer un composant dans un autre module que root. Pour ce faire, on fait toujours appel à la commande ng g c, mais cette fois-ci, on donne le chemin complet du composant plutôt que son nom : ng g c <chemin/nom-module>.

Ainsi, si l'on a créé un module news et que l'on veut créer un composant à l'intérieur de ce module, on va utiliser la commande :

1
ng g c news/news-item

En regardant l'arborescence de notre projet, on constate que notre composant news-item a bien été créé dans le répertoire propre du module news. Il fait donc partie du module.

Quelques options disponibles avec la commande ng g c :

  • module : permet de préciser le module parent du composant. Mieux vaut éviter cette option, elle ne fonctionne pas dans 100 % des cas. Préférez renseigner le chemin complet du composant.

  • style : de la même manière qu'à la création d'un projet, on peut utiliser l'option style pour définir le format des fichiers de styles du composant. En son absence, c'est le format défini à la création du projet qui est utilisé.

  • inlineTemplate : permet de générer un composant dont la déclaration du template se fait directement dans la classe TS. Dans ce cas, le fichier <composant>.component.html n'est pas généré et la métadonnée templateUrl du @Component est remplacée par template.

1
ng g c news/inline-template-example --inlineTemplate

L'exécution de cette commande donne le résultat suivant :

1
@Component({
2
  selector: 'sty-inline-template-example',
3
  template: `
4
    <p>
5
      inline-template-example works!
6
    </p>
7
  `,
8
  styleUrls: ['./inline-template-example.component.css']
9
})

La commande ng g c possède de nombreuses options permettant de paramétrer la création du composant.

SyntaxeÀ retenir

1
ng g c

Complément

Angular-ng generate.