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 :
  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

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
  1. *NgFor :boucler sur un element Dom
  2. *NgIf : insérer des structure conditionnelle dans les balise HTML
  3. ...

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...
  1. *ngClass:gérer les css Classes
  2. *ngStyle : Gérer le styles
  3. ...

Installation des outils de développement :

a. Node.js: c'est le serveur du projet Angular
Télécharger et installer node.js à partir du site: https://nodejs.org/en/
Vérifier si node.js est installée
commande :
npm -v
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

b. Installer Angular cli
commande :
-> npm install -g @angular/cli

c. Créer une application Angular
commande :
-> ng new angularApp

d. Accéder au projet créer angularApp
commande :
-> cd angularApp

e. Lancer le projet créer
commande :
-> ng serve -o
-o : open  le projet sera lancer dans le naviguer
Remarque: si une erreur s'affiche veuillez installer le package manquant
exemple:
erreur -> An unhandled exception occurred: Could not find module "@angular-devkit/build-angular"
Solution :
npm install @angular-devkit/build-angular
Erreur ->An unhandled exception occurred: Cannot find module '@angular/compiler-cli'
Solution :
npm install @angular/compiler-cli
Si le meme erreur reste meme si vous installez le package
solution:
npm link