Fichiers de base

Angular installe plus de 44 000 fichiers. Mais nous ne manipulerons généralement que ceux se trouvant dans le dossier "src".
Prenoms le dossier "app" qui contient le coeur de votre site, on y trouvera :

• "app.component.html" Il contiendra par défaut un long code qui comme l'indique les commentaires peut être supprimé.
  Ce sera le html de base de votre appli, il sera chargé à chaque fois qu'on lancera le fichier "index.html".
• "app.component.css" (ou autre type de CSS) ce fichier contiendra certes du CSS, ce CSS n'affectera pas toute votre applicaton mais seulement le html se trouvant dans "app.component.html".
• "app.component.spec.ts" Vous ne l'utiliserez pas ou peu, il sert à Angular à tester le code.
• "app.component.ts" Ce fichier correspond au javascript de "app.component.html", on reviendra sur les spécificités plus tard.
• "app.module.ts" Celui ci contient tout les composants et modules que l'on souhaite importer dans notre projet.
• "app-routing.module.ts" N'apparait que si vous avez accepté l'installation du système de routage et gère donc celui ci.

Revenons au dossier parent, le dossier "src", celui ci contient :

• "favicon.ico" l'icone de votre application web. par défaut le logo d'Angular.
• "index.html" l'unique véritable page de votre site. c'est ici que se trouve le head et toute les informations classique d'une page web
• "styles.css" à contrario des autres fichiers CSS, celui ci touchera l'entièreté de votre application web.
• "main.ts", "polyfills.ts" et "test.ts" servent au fonctionnement d'Angular, pour plus de détail, vous pouvez ouvrir ces fichiers et lire les commentaires.
• "assets" un dossier vide où vous pourrez ranger toute vos images, vidéo et autres assets.
• "environments" un dossier avec deux fichiers servant à indiquer si votre projet est en développement ou en production.

Composants

Angular fonctionne avec des composants. chaque partie d'une page, chaque outils, chaques pages est un composant.
Chaque composant est divisé en 3 ou 4 fichiers si on compte le fichier de test.
Pour générer un nouveau composant, on va taper la commande suivante :

ng generate component nomDuComposant

            

• "ng" On utilise l'outil d'Angular
• "generate" On souhaite générer quelque chose
• "component" Ce que l'on souhaite générer est un composant
• "nomDuComposant" le nom que l'on souhaite donner à notre composant

Angular va donc générer dans le dossier "src/app/" un nouveau dossier portant le nom de notre composant. Celui ci contiendra les 4 fichiers suivant :

• "nomDuComposant.component.html" qui contiendra le HTML de votre composant.
• "nomDuComposant.component.css" qui contiendra le CSS s'appliquant à ce composant et aucun autre.
• "nomDuComposant.component.spec.ts" qui est là pour les tests fait par Angular.
• "nomDuComposant.component.ts" qui contient tout le fonctionnement et le Javascript du composant"

Chaque nouveau composant génère donc ces fichiers. Le HTML et le CSS ne change pas d'une page classique, nous allons donc peu en parler.
Par contre le fichier TypeScript peut paraître effrayant à première vue avec tout ce code inconnu, nous allons donc nous y pencher.

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

@Component({
  selector: 'app-nomDuComposant',
  templateUrl: './nomDuComposant.component.html',
  styleUrls: ['./nomDuComposant.component.css']
})
export class NomDuComposantComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
}

			

• "import ... ;" Cette ligne importe les deux éléments de base de chaque composant.
• "@Component({ ... }) Cette partie se nomme un "Décorateur", il sert à affecter certaines propriétés à la classe qui le suis.
  • "selector: ... ," C'est le nom de la balise que l'on devra placer dans notre HTML pour appeler ce composant.
  • "templateUrl: ... ," C'est le fichier HTML qui correspond à notre composant.
  • "styleUrls: ..." C'est le fichier CSS lié à notre composant.
• "export class ...{ ... }" La classe principale de notre composant qui est appelé quand on l'utilise.
  • "export" Angular c'est énormément d'import et export de classes, donc généralement chaque classe est prête à être exporté.
  • "implements OnInit" Cette interface décrit comment doit être utilisé un composant classique de Angular.
  • "constructor(){}" Le constructeur classique des classes en POO. seulement on y mettra moins de chose qu'habituellement car :
  • "ngOnInit()" Angular a besoin d'activer certaines fonction quand le composant est chargé et non quand il est créé, par ce fait une grosse partie de ce que l'on mettrais habituellement dans un constructeur sera ici.

Ensuite si l'on veut afficher le composant, il existe deux façons principales.
En tant que page entière grâce au routing, ce que l'on verra dans un chapitre à part.
Ou en tant qu'une partie d'une page de la façon suivante :

<app-nomDuComposant></app-nomDuComposant>

            

Angular remplacera cette balise portant le nom présent dans notre fichier typescript à la propriété "selector" par notre composant.

Services

Un composant doit être lié à une vue, au même titre qu'en MVC un Contrôleur est lié à une vue. Mais ce n'est ni le contrôleur ni le composant qu'on utilise pour obtenir de données, c'est le rôle du modèle ou ici du Service.
Dans l'idéal, le service pourra aussi gérer tout fonctionnement qui n'est pas directement lié à la vue ou bien qui fait le lien entre différents composants.
Pour génerer un nouveau composant, on va utiliser cette commande :

ng generate service nomDuService

			

• "ng" le mot clef pour Angular
• "generate" pour indiquer que l'on souhaite générer quelque chose
• "service" ce que l'on souhaite générer
• "nomDuService" le nom de notre service

On remarquera que contrairement aux composants, aucun dossier n'est créé et ni aucun html ni css.
Notre service nouvellement générer contient le code suivant:

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

@Injectable({
  providedIn: 'root'
})
export class nomDuServiceService {
  constructor(){}
}

			

• "import ... ;" import d'une fonctionalité de Angular
• "@Injectable({...})" Un décorateur qui indique que la classe est faite pour être inséré quelque part en tant que dépendance.
  • "provideIn:..." Indique où et comment le service sera disponible.
• "export class ... {...}" Une classique class prête à être exporté.