La structrue d'un projet
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 :
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
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:
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
b.le styles css -app.component.scss
3.la logique:
le code TypeScript qui contient la logique de la component
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
-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>