Angular est l’un des frameworks front-end les plus utilisés dans le monde du développement web. Maintenu par Google, il permet de construire des applications web robustes, scalables et bien structurées. Que vous soyez débutant ou développeur confirmé, ce guide vous accompagne pas à pas dans la création de votre première application Angular.
1. Prérequis avant de commencer
Avant d’installer Angular, votre machine doit disposer de Node.js et de npm (Node Package Manager). Ces outils sont indispensables pour gérer les dépendances et exécuter les commandes Angular.
Vérifiez que vous disposez bien de :
- js version 16 ou supérieure
- npm version 8 ou supérieure
- Un éditeur de code, Visual Studio Code est fortement recommandé
Pour vérifier vos versions installées, ouvrez un terminal et tapez : node -v puis npm -v. Si ces commandes retournent un numéro de version, vous êtes prêt à passer à l’étape suivante.
2. Installer Angular CLI
Angular CLI (Command Line Interface) est l’outil officiel fourni par l’équipe Angular. Il simplifie considérablement la création, la gestion et le déploiement des projets Angular en automatisant les tâches répétitives.
Pour l’installer globalement sur votre machine, exécutez la commande suivante dans votre terminal :
npm install -g @angular/cli
Une fois l’installation terminée, vérifiez qu’elle s’est bien déroulée avec la commande ng version. Vous verrez s’afficher la version d’Angular CLI ainsi que les versions des dépendances associées.
3. Créer un nouveau projet Angular
La création d’un projet Angular se fait en une seule commande. Placez-vous dans le dossier où vous souhaitez travailler, puis lancez :
ng new mon-application
Angular CLI vous posera ensuite deux questions : si vous souhaitez activer le routing (navigation entre pages) et quel format de styles vous préférez (CSS, SCSS, SASS ou LESS). Pour débuter, vous pouvez répondre oui au routing et choisir CSS. Le CLI génère alors toute la structure du projet automatiquement.
4. Lancer l’application en local
Une fois le projet créé, accédez au dossier du projet puis démarrez le serveur de développement :
cd mon-application ng serve
Ouvrez ensuite votre navigateur et rendez-vous sur http://localhost:4200. Vous verrez la page d’accueil par défaut d’Angular. Le serveur de développement surveille automatiquement vos fichiers : chaque modification est répercutée en temps réel dans le navigateur, sans avoir à recharger manuellement.
5. Comprendre la structure du projet
Angular génère une arborescence de fichiers bien organisée. Voici les éléments essentiels à connaître :
- src/app/ : le cœur de votre application, là où se trouvent vos composants
- component.ts : le composant racine de l’application
- module.ts : le module principal qui déclare tous vos composants
- json : le fichier de configuration du projet
- json : la liste des dépendances npm du projet
6. Créer votre premier composant
Les composants sont les briques de base d’une application Angular. Chaque composant regroupe une vue (HTML), un style (CSS) et une logique (TypeScript). Pour en générer un nouveau, utilisez Angular CLI :
ng generate component mon-composant
Cette commande crée automatiquement quatre fichiers et met à jour le module principal. Vous pouvez ensuite intégrer votre composant dans une page en utilisant son sélecteur dans un fichier HTML.
Conclusion
Créer une application Angular n’a rien de compliqué quand on suit les bonnes étapes. L’installation de Node.js, la mise en place d’Angular CLI et la génération du projet suffisent pour avoir une base fonctionnelle en quelques minutes. La vraie richesse d’Angular se découvre ensuite, au fil des composants, des services et des modules que vous ajouterez progressivement à votre projet.
N’hésitez pas à consulter la documentation officielle sur angular.io, très complète et régulièrement mise à jour. C’est la meilleure ressource pour approfondir chaque notion et suivre les évolutions du framework.
