Angular

Dépôt d'apprentissage pour découvrir et prendre en main Angular : définition, notions clés, commandes essentielles et exemples pratiques.

Définition

Angular est un framework front-end open-source de Google, écrit en TypeScript. Il sert à construire des applications web dynamiques (SPA) en assemblant des composants réutilisables, un peu comme des briques.

Il s'adresse aux développeurs front-end qui veulent un outil "tout-en-un" (CLI, routeur, formulaires, HTTP inclus), très utilisé en entreprise pour les projets de grande taille.

Table des matières

📖 Le cours complet vit sur le wiki du projet :

• Angular — définition, à quoi ça sert
• Installation
• Composants
• Routage
• Formulaires
• Services
• Injection de dépendances
• Pipes

Dans ce dépôt :

• Glossaire — vocabulaire technique en mots simples

Pour aller plus loin : tutoriel officiel « Learn Angular »

Structure du projet

Structure de ce dépôt d'apprentissage :

angular-cda/
├── README.md                       # Ce fichier : définition, sommaire, commandes
└── apprentissage/
    └── glossaire.md                # Vocabulaire technique

Le cours détaillé (composants, routage, formulaires, services, pipes...) est tenu à jour sur le wiki — c'est la référence, pour éviter d'avoir deux versions du cours à maintenir en parallèle.

Structure générée par défaut par ng new pour un premier projet Angular :

mon-projet/
├── src/
│   ├── app/
│   │   ├── app.component.ts        # Composant racine (logique)
│   │   ├── app.component.html      # Composant racine (template)
│   │   ├── app.component.css       # Composant racine (styles)
│   │   ├── app.config.ts           # Configuration de l'application (providers, routes...)
│   │   └── app.routes.ts           # Déclaration des routes
│   ├── index.html                  # Page HTML hôte
│   ├── main.ts                     # Point d'entrée (bootstrap de l'app)
│   └── styles.css                  # Styles globaux
├── angular.json                    # Configuration du CLI Angular
├── package.json                    # Dépendances npm
├── tsconfig.json                   # Configuration TypeScript
└── node_modules/

Commandes essentielles

Installation

# Installer Node.js (via nvm recommandé) puis vérifier
node -v
npm -v

# Installer le CLI Angular globalement
npm install -g @angular/cli

# Vérifier l'installation
ng version

Créer un premier projet

ng new mon-projet
cd mon-projet

Le CLI pose quelques questions à la création :

• Would you like to add Angular routing? → y pour activer le routage dès le départ
• Which stylesheet format would you like to use? → CSS (ou Sass/SCSS selon les besoins)

Lancer le serveur de développement

ng serve
# ou avec ouverture automatique du navigateur
ng serve -o

L'application est accessible sur http://localhost:4200 et se recharge automatiquement à chaque modification (hot reload).

Générer des éléments (schematics)

ng generate component nom-composant   # ou : ng g c nom-composant
ng generate service nom-service       # ou : ng g s nom-service
ng generate pipe nom-pipe             # ou : ng g p nom-pipe
ng generate directive nom-directive   # ou : ng g d nom-directive
ng generate interface nom-interface   # ou : ng g i nom-interface

Build et tests

ng build     # Compile l'application pour la production (dossier dist/)
ng test      # Lance les tests unitaires (Karma/Jasmine)
ng lint      # Vérifie le style du code (si configuré)

---