ENVIRONNEMENT DE DEVELOPPEMENT

1. OUTILS DE L’ENVIRONNEMENT DE DEVELOPPEMENT

Avant l’installation d’ANGULAR, le développeur doit installer sur sa machine les éléments suivants :

- NODE JS qui est un moteur d’exécution JavaScript côté serveur. Son installation permet,
également, l’installation de npm (Node Package Manager) qui permet de gérer les dépendances
des packages JavaScript. Il est conseillé d’installer la version LTS qui représente la dernière
version stable de Node. Pour tester l’installaion de Node et de npm, il suffit d’exécuter en ligne
de commande node –v, ensuite la commande npm –v qui permettent d’afficher,
respectivement, la version de Node et de celle de npm installées.

- Un IDE (Integrated Development Environment) qui supporte ANGULAR tels que VS CODE,
SublimeText ou Web Storm, etc.

- ANGULAR / CLI (ANGULAR Command Line Interface) qui est une interface de ligne de commande
pour la génération, l’initialisation, la construction et le test des applications ANGULAR. Pour
installer ANGULAR CLI, on exécute la commande npm install –g @angular/cli, en tant
qu’administrateur. La commande ng version permet de vérifier la version de ANGULAR CLI
installé.

Les commandes de ANGULAR CLI les plus importantes, lors du développement d’un projet ANGULAR,
sont:

 Ng new nom-application –minimal –style=css

Cette commande permet de créer toute la structure d’un nouveau projet ANGULAR et
installer tous les package et dépendances de l’application. L’option minimal permet de créer
une version minimale du socle de l’application ANGULAR.
 Ng serve : cette commande est utilisée lors du développement local d’une application
ANGULAR. Elle permet de démarrer un serveur local, qui sert l’application pendant le
développement. Les modifications des fichiers de l’application seront, alors appliquées
pendant que le serveur est en cours d’exécution.

2. STRUCTURE D’UN PROJET ANGULAR

Lors de l’exécution de la commande ng new une arborescence de dossiers et de fichier sera créée
représentant le socle de l’application.

1. Le dossier node_modules : contient tous les packages nécessaire pour le bon

fonctionnement de l’application, notamment le package @angular.
2. Le dossier srs > app : contient les fichiers de l’application tels que :
- app-routing.module.ts : contient les routes de l’application dans la ligne de code
const routes : [] ;
- app.component.ts : représente le composant racine.

3BI - IHEC | Framework de développement web 1

 - app.module.ts : représente le module racine
3. Le dossier src > assets : contient les ressources de l’application telles que images, vidéos, etc.
4. Le dossier src > environments : contient les variables d’environnement du projet
5. Les fichiers de configuration :
- browserlistsrc : configuration de certains outils en fonction des navigateurs.
- gitignore : liste des fichiers à ignorer en cas d’utilisation de Github.
- angular.json : contient la configuration de angular/cli.
- package.json : contient les packages et les dépendances du projet.
- package-lock.json : contient les dépendances figées du projet.
- tsconfig.app.json : contient la configuration du compilateur TypeScript pour le projet
Angular.
- tsconfig.json : c’est aussi un fichier de configuration de TypeScript.

3. LE COMPOSANT RACINE

Le composant racine est défini dans le fichier app.component.ts.

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

template: `

<h1>
Vue
Welcome to {{title}}!

</h1> `

})

export class AppComponent {

title = 'my-first-app'; Classe JavaScript

Le component racine est nommé par défaut app-root. Il sera affiché dans le fichier index.html à l’aide
de la balise <app-root></app-root>.

4. LE MODULE RACINE

Le fichier app.module.ts est le module racine du projet, il regroupe les components par
fonctionnalités. Ce module contient les imports des autres modules du projet.

3BI - IHEC | Framework de développement web 2

 Import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [
Déclaration des composants du projet
AppComponent ],

imports: [

BrowserModule, Importation des modules

AppRoutingModule ],

providers: [],  permet l’utilisation du système d’injection de dépendances d’Angular.

bootstrap: [AppComponent]  indique le premier composant à charger

})

export class AppModule { }

CONCLUSION

La création d’un nouveau projet, ANGULAR crée le socle et installe les packages et les dépendances
de l’application. Lors de sa création, le projet s’articule autour d’un seul composant racine et un seul
module racine, développeur fera, ensuite, évoluer le projet en créant de nouveau composants selon
les besoins de l’application.

3BI - IHEC | Framework de développement web 3