Angular : Comment créer votre premier projet ?

Dans cet article, je vous propose de découvrir les bases du framework web Angular en vous montrant comment créer votre premier projet.

Après une petite introduction à Angular et les quatre piliers de sa conception, j’ai choisi d’utiliser l’Interface en ligne de commande (CLI) et la commande ng serve pour tester le projet Angular.

Table des matières

Présentons Angular ?

Je vous propose de commencer par une petite introduction à Angular histoire de planter le décor.

Angular est né en 2009 dans les locaux de Google. Shyam Seshadri proposa un framework fait maison initialement appelé AngularJS.
Vous rencontrerez cette dénomination pour les applications développées avec les versions 1 et 2 du framework.
Ne cherchez pas la version 3 d’Angular, Google a purement décidé de passer directement à la version 4 en perdant au passage le suffixe JS.

Qu’est-ce qu’Angular ?

Angular est un framework de développement structuré et puissant, conçu pour construire des applications web dynamiques et efficaces. Utilisant TypeScript comme langage principal, il offre aux développeurs un environnement cohérent et optimisé pour le développement d’applications à page unique (SPA).

Angular se distingue par son système de composants, qui encourage la modularité et la réutilisation du code, ainsi que par son architecture qui favorise une séparation claire entre la logique de présentation et la logique métier. Avec un ensemble riche de fonctionnalités telles que le data-binding bidirectionnel, l’injection de dépendances, et une suite complète pour le développement d’applications, Angular aide à réduire le temps de développement tout en améliorant la qualité et la maintenabilité du code.

De plus, sa communauté active et ses mises à jour régulières garantissent que le framework reste à la pointe de la technologie et des meilleures pratiques de développement. En somme, Angular est un choix robuste pour les entreprises et les développeurs cherchant à créer des applications web modernes et évolutives.

4 concepts clés d’Angular

Angular est construit autour de concepts clés et bonnes pratiques du développement web actuel :

Architecture MVC (Modèle-Vue-Contrôleur) : architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions possibles sur ces données (Contrôleur) ;
Data Binding :il s’agit d’un mécanisme permettant de lier la partie vue à la partie logique c’est-à-dire que les éléments de votre code HTML seront liés à votre contrôleur JavaScript ;
Injection de dépendances : les modules que vous développerez n’auront plus à se soucier d’instancier leurs dépendances ;
Manipulation du DOM grâce aux directives : la manipulation du DOM devient plus facile à maintenir et à tester que du pur JavaScript.

Prérequis pour démarrer votre projet Angular

Node 4.x.x ou supérieur ;
Npm 3.x.x ou supérieur.

Si vous avez déjà une installation de Node, vérifiez que vous utilisez au moins node 4.x.x et npm 3.x.x ou supérieur en exécutant dans le terminal/console :

node -v

npm -v

A vos claviers : premier projet Angular

Étape 1. Configurer l’environnement de développement

Pour la grande majorité des actions, vous allez utiliser la ligne de commande dans le terminal (pour MacOS et Linux) ou la console (pour Windows). vous allez tout d’abord installer l’Angular CLI. Cet environnement est incontournable pour créer les composants et services de votre application.

Pour installer l’Angular CLI :

npm install -g @angular/cli

Sous Mac OS et Linux vous devrez peut-être faire précéder la commande du terme « sudo » vous permettant d’élever vos droits (passer en mode root). Votre mot de passe vous sera demander pour poursuivre l’exécution de la commande.

Étape 2. Créer un nouveau projet

Ouvrez une fenêtre de terminal et créez un nouveau projet et un squelette d’application en exécutant les commandes suivantes:

ng new mon-application-angular

Cette commande créé un squelette d’application Angular.

Vous devez choisir le format de feuille de style que vous souhaitez utiliser en utilisant les flèches haut ou bas pour vous positionner devant le format puis cliquer sur Entrer.

Le versionning via Git est également initialisé par la même occasion 😉

Mais si vous souhaitez créer directement un projet Angular utilisant SASS, vous devez exécuter la commande suivante :

ng new mon-application-angular --style=scss

Lancez votre éditeur de code préféré (ici VS Code) et ouvrez le dossier de votre application créée sur le bureau de votre PC ou Mac.

Vous pouvez vérifier la structure des dossiers par défaut :

Vous découvrez un fichier styles.css dans lequel vous pourrez écrire vos styles.

Étape 3: Tester le projet

Rendez-vous dans le répertoire du projet en utilisant la commande :

cd mon-application-angular

Une fois que vous êtes dans votre dossier hébergeant votre application Angular, exécutez la commande suivante :

ng serve --open

La commande ng serve lance le serveur, surveille les fichiers et reconstruit l’application lorsque vous modifiez votre code. Vous n’avez pas besoin de rafraichir la page qui s’affiche dans votre navigateur : c’est automatique 😉

Voici ce qu’affiche ma console lors de l’exécution de ng serve :