Comment installer Angular ?

Résumé en 3 étapes

• Installer Angular CLI
• Créer un projet Angular
• Développer en lançant le serveur local

npm install -g @angular/cli
ng new mon-projet
cd mon-projet
ng serve

---

Etape 1: Installer Angular CLI

Pour installer Angular, vous aurez besoin d'avoir Node.js (version LTS) et npm (gestionnaire de paquets Node) installés sur votre ordinateur. Une fois que ces prérequis sont installés, vous pouvez utiliser npm pour installer Angular en utilisant la commande suivante :

Terminal

npm install -g @angular/cli

Cette commande va télécharger et installer Angular sur votre ordinateur.

TIP

La commande npm install -g @angular/cli permet d'installer Angular sur votre ordinateur. La partie npm install indique à npm de télécharger et d'installer un paquet, tandis que -g indique que le paquet doit être installé globalement, c'est-à-dire qu'il sera disponible pour tous les projets sur votre ordinateur. Enfin, @angular/cli est le nom du paquet Angular à installer.

Assurez-vous d'exécuter la commande en tant qu'administrateur pour éviter les problèmes de permissions.

Une fois que Angular est installé, vous pouvez vérifier que l'installation s'est bien déroulée en utilisant la commande ng version. Cette commande vous affichera la version d'Angular que vous avez installée ainsi que d'autres informations utiles.

Si vous rencontrez des problèmes lors de l'installation d'Angular, vous pouvez consulter la documentation officielle d'Angular pour obtenir de l'aide.

Etape 2: Créer un projet

Pour créer un projet Angular, vous devez d'abord ouvrir un terminal et naviguer jusqu'au dossier où vous souhaitez créer votre projet. Une fois que vous êtes dans le bon dossier, vous pouvez utiliser la commande ng new suivie du nom de votre projet pour créer un nouveau projet Angular. Par exemple, si vous souhaitez créer un projet nommé "mon-projet", vous pouvez utiliser la commande suivante :

Terminal

ng new mon-projet

Première question: le format du fichier CSS

Si vous commencez avec Angular, vous pouvez choisir le format CSS par défaut, qui est le CSS standard. Pas d'inquiétude, vous pourrez toujours changer plus tard.

Terminal

ng new mon-projet

Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS [ https://developer.mozilla.org/docs/Web/CSS ] Sass (SCSS) [ https://sass-lang.com/documentation/syntax#scss ] Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org ]

Angular vous propose plusieurs options pour gérer vos styles :

1. CSS : Le format standard pour les feuilles de style. C'est l'option la plus simple et la plus directe.

CONSEIL

Choisissez CSS si vous débutez avec Angular ou si votre projet est de petite taille. C'est plus facile à maintenir et ne nécessite pas d'apprentissage supplémentaire.

2. Sass (SCSS) : Une extension de CSS qui ajoute des fonctionnalités puissantes comme :
   • Les variables
   • Les mixins (réutilisation de code)
   • Les imbrications de sélecteurs
   • Les fonctions

RECOMMANDATION

SCSS est le choix le plus populaire pour les projets Angular de taille moyenne à grande. Il offre un bon équilibre entre puissance et facilité d'utilisation.

3. Sass (Indented) : Une syntaxe alternative de Sass qui utilise l'indentation au lieu des accolades.

ATTENTION

Cette syntaxe est moins courante dans l'écosystème Angular et peut être déroutante pour les nouveaux développeurs.

4. Less : Un préprocesseur similaire à Sass mais avec une syntaxe différente.

NOTE

Less est moins utilisé dans la communauté Angular, Sass/SCSS étant devenu le standard de facto.

Exemple de la même chose écrite dans différents formats :

style.css

.user-card {
  background-color: #fff;
  padding: 20px;
}
.user-card .title {
  color: blue;
}

style.scss

$primary-color: blue;

.user-card {
  background-color: #fff;
  padding: 20px;
  
  .title {
    color: $primary-color;
  }
}

style.sass

$primary-color: blue

.user-card
  background-color: #fff
  padding: 20px
  
  .title
    color: $primary-color

style.less

@primary-color: blue;

.user-card {
  background-color: #fff;
  padding: 20px;
  
  .title {
    color: @primary-color;
  }
}

Deuxième question: Activer le SSR

Si vous commencez avec Angular, vous pouvez choisir de ne pas activer le SSR (mettez N ou tapez sur la touche Entrée). Pas d'inquiétude, vous pourrez toujours l'activer plus tard.

Terminal

ng new mon-projet

? Which stylesheet format would you like to use? CSS [ https://developer.mozilla.org/docs/Web/CSS ] ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)

Le Server-Side Rendering (SSR) et la Static Site Generation (SSG) sont deux fonctionnalités puissantes d'Angular qui peuvent améliorer significativement les performances et le SEO de votre application.

Imaginons un restaurant avec deux façons de servir :

• Sans SSR : Le client (navigateur) reçoit tous les ingrédients (JavaScript) et doit préparer le plat lui-même.
• Avec SSR : Le serveur prépare le plat complet (HTML) avant de le servir au client.

RECOMMANDATION

Activez le SSR si :

• Votre site doit être bien référencé
• Vous avez beaucoup de contenu dynamique
• Vous visez une performance optimale

ATTENTION

Le SSR ajoute une complexité supplémentaire :

• Configuration serveur nécessaire
• Certaines APIs du navigateur ne sont pas disponibles côté serveur
• Coût d'hébergement potentiellement plus élevé

Etape 3: Développer

Une fois que vous avez créé un projet Angular et lancé le serveur local en utilisant la commande suivante :

Terminal

ng serve

Vous pouvez aussi lancer npm start qui prendra la version de Angular CLI du projet et non celle installée globalement.

Vous pouvez accéder à l'application de développement en ouvrant votre navigateur et en naviguant jusqu'à l'adresse http://localhost:4200. Cette adresse correspond au serveur local que vous avez lancé.

Ouvrez le projet généré dans votre IDE favori comme VSCode, Webstorm, etc. et commencez à coder !

Changer le port

Si vous avez changé le port par défaut utilisé par ng serve, vous devrez utiliser l'adresse correspondante dans votre navigateur pour accéder à l'application. Par exemple, si vous avez utilisé la commande ng serve --port 4300 pour lancer le serveur local sur le port 4300, vous devrez accéder à l'application en utilisant l'adresse http://localhost:4300 dans votre navigateur.