Angular : Introduction, Installation
un framework JavaScript permettant de créer des applications web coté frontend
La dernière version d'Angular :14
Angular se Compose de :
@Component
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
Component1.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.component.css']
})
export class Component1Component {
attribut1:String="hi everyone"
}
Component1.component.html
<p>component1 works!</p>
<h1>{{attribut1}}</h1>
@Directives
Permet de manipuler les balise HTML en ajoutant en utilisant des structure conditionnelle ou des boucles
- *NgFor :boucler sur un element Dom
- *NgIf : insérer des structure conditionnelle dans les balise HTML
- ...
Component1.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.component.css']
})
export class Component1Component {
listeClient=[
{nom:"nom1",email:"email1@mail"},
{nom:"nom2",email:"email2@mail"},
{nom:"nom2",email:"email2@mail"},
]
}
Component1.component.html
<table>
<thead>
<th>Nom</th>
<th>Email</th>
</thead>
<tbody>
<tr *ngFor="let c of listeClient;">
<td>{{c.nom}}</td>
<td>{{c.email}}</td>
</tr>
</tbody>
</table>
Aussi des Directives pour gérer les css classes ,les styles...
- *ngClass:gérer les css Classes
- *ngStyle : Gérer le styles
- ...
Installation des outils de développement :
Télécharger et installer node.js à partir
du site: https://nodejs.org/en/
Vérifier si node.js est installée
commande :
commande :
si le numéro de la version est affiché
donc node.js est bien installée
sinon essayer d'installer une autre version 6.14.13
commande :
commande :
commande :
commande :
-o : open le projet sera lancer dans le naviguer
-o : open le projet sera lancer dans le naviguer
erreur -> An unhandled exception occurred: Could not find module "@angular-devkit/build-angular"
Solution :
Solution :
Erreur ->An unhandled exception occurred: Cannot find module '@angular/compiler-cli'
Solution :
Solution :
Si le meme erreur reste meme si vous installez le package
solution:
solution: