Aller au contenu principal

8-5 Créer un composant de page

Sur la page d'accueil, nous listerons les différents projets sur une page dédiée. Nous devons donc créer un composant, et ensuite, via le système de routage Angular, indiquer que la page d'accueil sera la liste des projets.

info

Bien que nous ayons un composant pour afficher une liste de projets, ce composant ne se concentre que sur la liste de projets. Elle n'a pas l'ambition de représenter une page à part entière. Ainsi, ce n'est pas ce composant que nous utiliserons comme page, bien que nous continuerons de l'utiliser.

Retour sur la structure​

Rappelons-nous la structure de base de l'application:

src/
├─ app/
│ ├─ core/
│ │ ├─ http
│ │ ├─ models
│ │ ├─ services
│ ├─ features/
│ │ ├─ projets/
│ │ | ├─ components
│ │ | ├─ pages
│ │ ├─ issues/
│ ├─ shared/

On sépare le code par fonctionnalités (features). Ici, la fonctionnalité à créer est la fonctionnalité liée aux projets. Il nous faudra donc un doisser projets sous features.

Créer le dossier features/projets et features/projets/pages​

  1. Dans WebStorm, créez un nouveau dossier src/app/features/projets. Ce dossier sera responsable d'accueillir tout le code relié aux fonctionnalités des projets
  2. Toujours dans WebStorm, créez un nouveau dossier src/app/features/projets/pages. Ce dossier sera responsable d'accueil les composants affichant des pages.

img

Créer le composant de page ProjetsIndex​

En Angular, un composant d'interface utilisateur (navbar) ou un composant pour afficher une page entière, c'est la même chose.

Nous allons créer un composant appelée ProjetsIndex qui sera responsable d'afficher une page pour la liste des projets. Au final nous aurons au minimum des pages pour:

  • ProjetsIndex: Afficher les projets
  • ProjetDetails: Afficher les projets
  • ProjetCreer: Créer un projet
  • ProjetModifier: Modifier un projet

Créer le composant​

  1. Exécuter la commande suivante: 
     ng g component features/projets/pages/projets-index
  2. Vous devriez voir la structure suivante dans votre projet img
info

Le fait de spécifier features/projets/pages/ lors de la création du composant vient préciser dans quel dossier dans la hiérarchie placer le fichier.

Comme il s'agit d'une page, on le place dans un dossier pages. Ensuite, comme la page est en lien avec les projets, on la met dans un dossier de features projets.

Modifier le template de la nouvelle page​

Vous pouvez en profiter pour changer légèrement le HTML de la page afin d'y ajouter un titre:

src/app/features/projets/pages/projets-index.ts
@Component({
  selector: 'app-projets-index',
  imports: [],
  template: `
    <h1>Projets</h1>
  `,
  styles: ``
})
export class ProjetsIndex {

}

Nous allons voir à l'étape suivante comment lier le chemin d'accès (racine du site) au composant de page.