Configuration de l’environnement de développement angulaire

Vous commencez simplement en tant que développeur angulaire? Ou prêt à optimiser votre configuration? Lisez ces conseils pour préparer votre environnement angulaire.

Commencer avec Angular peut vous sembler beaucoup au début, mais une fois que vous avez installé votre environnement, les pièces commencent à se réunir. Que vous plongez dans Angular pour la première fois ou que vous soyez un développeur expérimenté qui tourne un nouveau projet, la configuration de votre environnement de développement est ce qui donne le ton à tout ce qui suit.

Dans ce guide, nous allons parcourir comment installer la CLI angulaire, échafauder un nouveau projet angulaire, l’exécuter localement et disséquer la structure du fichier de projet angulaire.

Configuration de votre première application angulaire

Angular fournit un puissant outil de ligne de commande appelée Angular CLI, qui rationalise l’ensemble du flux de travail de développement. Avec lui, vous pouvez échafaucher de nouvelles applications angulaires, les servir et les tester localement, construire pour la production et gérer diverses parties de votre projet, directement à partir du terminal.

Avant d’installer Angular CLI, vérifiez que vous avez Node.js et NPM installé sur votre système. Si vous ne le faites pas, rendez-vous sur la page de téléchargement officielle Node.js et installez une version LTS active (support à long terme). Angular nécessite une version LTS active ou de maintenance de Node.js, alors assurez-vous de vérifier votre version actuelle avec:

node -v

Installation de CLI angulaire

Pour installer la CLI angulaire dans le monde sur votre machine, exécutez:

npm install -g @angular/cli

Création d’un nouveau projet angulaire

Une fois la CLI installée, accédez au répertoire où vous souhaitez créer votre projet, puis exécutez cette commande:

ng new my-angular-app

Vous serez invité à répondre à quelques questions de configuration, telles que si vous souhaitez inclure le routage angulaire et quel format de feuille de style que vous préférez. Après avoir fourni vos réponses, la CLI angulaire créera votre projet et installera les dépendances nécessaires. Ce processus peut prendre quelques minutes, selon votre vitesse de connexion Internet.

Ensuite, accédez à votre dossier de projet:

cd my-angular-app

Exécution du serveur de développement

Angular CLI est livré avec un serveur de développement intégré qui regarde vos fichiers et recharge l’application lorsque vous apportez des modifications. Pour démarrer le serveur, exécutez la commande suivante:

ng serve -o

Le ng serve Commande compile votre application et démarre un serveur de développement local à http: // localhost: 4200. Le -o Indicateur ouvre automatiquement l’application dans votre navigateur par défaut.

Structure des fichiers de projet angulaire

Dans la section précédente, nous avons utilisé le ng new commande pour générer un projet angulaire. Cette commande crée un dossier d’espace de travail et initialise une nouvelle application à l’intérieur. Un espace de travail peut inclure des fichiers pour plusieurs projets, applications ou bibliothèques.

Par défaut, ng new Configure une application squelette initiale au niveau racine de l’espace de travail. Angular nomme l’application après l’espace de travail et place ses fichiers source dans le sous-dossier SRC /.

Fichiers de configuration de l’espace de travail

La racine de l’espace de travail contient des fichiers de configuration globale, ainsi que des paramètres de l’application initiale et des sous-dossiers pour ses fichiers source et test. Tous les projets dans l’espace de travail partagent un fichier de configuration central nommé: angular.json.

Ce fichier définit les paramètres globaux et spécifiques au projet pour les outils de construction, de service, de test et de développement fourni par la CLI angulaire. Il indique à la CLI comment créer et gérer votre application ou votre bibliothèque.

Si vous travaillez avec Angular 15, 16 ou plus récent (y compris Angular 20), ce fichier joue un rôle clé dans la personnalisation du comportement CLI pour répondre aux besoins spécifiques de votre projet.

Ouvrir le angular.json fichier dans le dossier racine de votre projet. Analysons la configuration:

Note: Au moment de la rédaction, Angular 20 est la dernière version. Bien que la structure centrale d’Angular.json reste cohérente sur les versions récentes, vous remarquerez peut-être certaines variations en fonction de votre version. Cependant, je vais expliquer certains concepts clés qui sont cohérents dans les versions précédentes.

Comprendre Angular.json

Décomposons certaines des parties clés du angular.json déposer.

Structure de niveau supérieur

Les propriétés au niveau supérieur du fichier configurent le lieu de travail.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
     "my-angular-app": {
      ...
     }
   }
}

• $schema: Une référence au schéma utilisé pour valider le fichier et fournir le support IntelliSense dans les éditeurs.

• version: Spécifie la version schéma du fichier de configuration. Il est généralement prêt à 1.

• newProjectRoot: Spécifie le dossier où les nouveaux projets (applications ou bibliothèques) seront créés à l’aide de commandes CLI angulaires (par exemple, ng generate application).

• projects: Contient toutes les applications et bibliothèques dans l’espace de travail. Chaque entrée de cette section représente un projet distinct et comprend son propre bloc de configuration.

Bloc de configuration du projet

Chaque entrée à l’intérieur du projects La section comprend la configuration pour un projet spécifique. Voici un exemple:

"projects": {
   "my-angular-app": {
     "projectType": "application",
     "schematics": {},
     "root": "",
     "sourceRoot": "src",
     "prefix": "app",
     "architect": {
       ...
      }
   }
}

• projectType: Peut être «application» ou «bibliothèque». Une application est destinée à s’exécuter dans le navigateur, tandis qu’une bibliothèque est censée être importée dans d’autres projets angulaires.

• schematics: Un ensemble de schematics Définit les options par défaut pour les sous-commandes de génération NG dans un projet. Les schémas angulaires sont des modèles ou des instructions utilisés pour modifier un projet en générant de nouveaux fichiers ou en mettant à jour ceux existants. Ils vous permettent de personnaliser comment les composants, services, modules et autres éléments sont créés dans votre projet.

• root: Spécifie le dossier racine du projet, par rapport au répertoire de l’espace de travail. Pour l’application initiale, cela est généralement défini sur une chaîne vide («  »), en la plaçant au niveau supérieur de l’espace de travail.

• sourceRoot: Pointe vers le répertoire racine des fichiers source de ce projet (généralement «SRC»). Il aide la CLI angulaire à localiser le code source de votre application (comme les composants, les services, les principaux.ts, etc.) pendant les commandes de construction, de service et de test.

• prefix: Utilisé dans les sélecteurs de composants générés automatiquement (par exemple, <app-header>).

• architect: (Appelé targets dans les versions plus anciennes.) Configure des tâches liées à la construction telles que la construction, le service, les tests et la libellés.

Pour une compréhension complète du angular.json Structure de fichiers, consultez le Documentation angulaire officielle.

Fichiers de source d’application src

Le src Le répertoire est le principal dossier de développement d’un projet angulaire. Il contient tous les fichiers essentiels requis pour exécuter votre application, c’est là que la logique, les composants, les services, les itinéraires et les actifs de votre application sont définis.

• app/: C’est là que vont vos composants, itinéraires, services et fonctionnalités. Avec Angular 20, les composants autonomes et les API sont maintenant la valeur par défaut:

app/
  app.component.ts       # Root component (standalone by default in Angular 20)
  app.component.html     # Root component template
  app.component.css      # Root component styles
  app.routes.ts          # Application routes using standalone routing
  app.config.ts          # Optional configuration (e.g., providers)
  app.component.spec.ts  # Defines a unit test for AppComponent

Dans Angular 20, les projets commencent à nettoyer, il n’y a pas app.module.ts Par défaut, sauf si vous optez sur les modules. Plutôt, main.ts agit comme votre nouveau point d’entrée d’application, en utilisant bootstrapApplication() pour lancer. C’est une approche plus maigre et légère de module hors de la boîte.

• main.ts: Ceci est le principal point d’entrée de votre application. Dans Angular 20, c’est le nouveau point d’entrée pour bootstrap votre application angulaire:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations()
  ]
});

Cela remplace l’ancien module platformBrowserDynamic().bootstrapModule(AppModule) modèle.

• index.html: Il s’agit de la page HTML principale qui est servie lorsque quelqu’un visite votre site. La CLI ajoute automatiquement tous les fichiers JavaScript et CSS lors de la création de votre application, vous n’avez généralement pas besoin d’ajouter de <script> ou <link> Tags ici manuellement.

• style.css: Styles globaux pour votre application. Vous pouvez passer à SCSS, moins ou un autre préprocesseur lors de la configuration du projet.

Pour une compréhension plus approfondie de l’espace de travail angulaire et comment gérer les espaces de travail multi-projets, consultez la documentation angulaire officielle: les espaces de travail CLI angular.

Emballage

Angular a parcouru un long chemin, et Angular 20 fait un autre grand pas vers la simplification de la configuration du projet et stimulant la productivité des développeurs. Avec la bonne configuration d’environnement et une compréhension claire de la structure du projet moderne, vous passerez moins de temps à lutter avec des configurations et plus de temps à développer.

Dans ce guide, nous avons exploré Angular CLI, comment le configurer et l’utiliser pour générer une nouvelle application angulaire. Nous avons également parcouru la configuration de l’espace de travail et la structure des fichiers. Bien que la structure n’ait pas radicalement changé par rapport aux versions précédentes, Angular 20 embrasse pleinement des composants autonomes, des amateurs de bootstrap simplifiés et des fournisseurs à arbre pour une expérience de développement plus propre et plus moderne.

Mais n’arrêtez pas ici, plongez plus profondément dans le La documentation officielle d’Angular ou lisez le Bases angulaires Série si vous êtes nouveau sur Angular.

Bonne chance, et profitez de la construction avec Angular!