La structrue d'un projet

Projet: angularApp

angularApp
    ├── e2e
    ├── node_modules
    ├── src
    │    ├── app
    │    │   ├─Les composantes ICI on travaille
    │    ├── assets
    │    ├── environments
    │    ├── index.hmtl
    │    ├── styles.css

node_modules :un dossier qui contient les dépendances du projet
src:le dossier qui contient le code source de l'application
app: le dossier le plus important dans les projets Angular, qui contient les fichiers de types components, routing,modules...
index.html: le point d'entrer d'exécution du projet
styles.css : le fichier de style global

Les composants dans Angular

une application Angular est composé de plusieurs components
Chaque component contient 3 fichiers :

app.component.html :la template (interface graphique)
app.component.ts : la partie logique de la component
app.component.css : les styles CSS
app.component.spec :un fichier de test

app.component.ts :ce fichier contient la partie logique de la component c'est ici ou on fait l'ensemble des traitements est composé de trois parties:

1.les imports
la component utilise un ensemble de libraires et api donc on doit les importer dans la component

2.decorator:
la component est un objet affichable dans chaque component a besoin de:

a.la template html ->app.component.html
b.le styles css -app.component.scss

3.la logique:
le code TypeScript qui contient la logique de la component

Exemple:

//1.Les imports
import { Component } from '@angular/core';

//2.Décorateur
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
//3.Logique Code
export class ExampleComponent  {
  constructor() { }

  
}

La component Principale: app.component

-un projet Angular est composée de plusieurs component Mais toutes ces component seront affichée dans app.component
-app.component:joue le rôle de la templates

   
   <header>
    <!--Cette partie est statique ,ne se change pas même si
        on affiche une autre component   -->
   <div class="container">
     <a routerLink="/" >Logo</a>
     <nav>
       <ul>
       <!-- routerLink:permet d naviguer vers les autres component s
       le href ne sera pas utiliser -->
         <li><a href="#" routerLink="/">Home</a></li>
         <li><a href="#" routerLink="/list">List</a></li>
       </ul>
     </nav>
   </div>
 </header>
 
 <div class="container">
   <router-outlet>
   //le contenu des autres component sera affichée ici
   
   </router-outlet>
 </div>

Angular

By Hakiki

Les composants dans Angular

Exemple:

La component Principale: app.component