menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

La structrue d'un projet

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


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

Les composants dans Angular

une application Angular est composé de plusieurs components
Chaque component contient 3 fichiers :
  1. app.component.html :la template (interface graphique)
  2. app.component.ts : la partie logique de la component
  3. app.component.css : les styles CSS
  4. 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>