Publié le : 01/01/2022
Un simple projet Angular

Les commandes qui vont suivre sont des commandes exécuter sous Ubuntu 20.04 LTS.
Installer l’environnement
Si l’on veut installer un projet Angular, il faut installer l’environnement où Angular va fonctionner.
Les éléments qui vont composer notre environnement sont :
- NodeJS ;
- npm ;
- et @angular/cli la CLI d’Angular.
Comme on l’a dit dans la partie Javascript ES6, NodeJS permet d’exécuter des scripts Javascript dans un environnement serveur.
Pour installer NodeJS, nous allons s’il n’est pas encore installer sur notre système avec la commande :
$ node -v
S’il ne retourne rien, on peut passer à la commande suivante, sinon, NodeJS est déjà installé.
Ensuite, on exécute les commandes :
$ sudo apt update
$ sudo apt install nodejs npm
Une fois que c’est fait, nous allons installer le CLI d’Angular.
$ sudo npm install -g @angular/cli
Créer un simple projet Angular
Une fois que nous avons la CLI d’Angular installé, nous pouvons maintenant créer notre projet. Pour ce faire, nous allons exécuter la commande :
$ ng new my-angular
Une fois que l’on a exécuté la commande ci-dessus, plusieurs questions sont posées, il faut y répondre une à une et ensuite le projet est installé.
Afficher la première page
Après avoir installé notre projet, nous allons maintenant passer à l’affichage de la première page d’Angular. Pour ce faire, nous allons exécuter successivement les commandes ci-dessous :
$ cd my-angular
$ ng serve
La dernière commande ng serve
va récupérer toutes les fichiers qui se trouve dans le répertoire my-angular
et les compiler en quelques fichiers Javascript.
La deuxième opération qui a été faite par la commande ng serve
est de démarrer un serveur de développement qui va nous permettre de voir notre application dans un navigateur. En effet, la CLI intègre son propre serveur de développement que l’on peut utiliser pour notre développement. Ainsi, nous pouvons accéder à la première page de notre application à l’adresse http://localhost:4200
.
Définition de la structure du projet Angular
Une fois que l’application ait été créé, nous avons la structure de notre application comme indiqué sur l’image ci-dessous.

Le dossier le plus important dans cette structure est le répertoire src
. En effet, c’est dans ce répertoire que la majorité de votre code va aller. Après, dans le répertoire src
, on trouve le répertoire app
où se trouve les codes de votre application. Ensuite, on trouve le répertoire assets
qui va contenir tous les images, et autes assets que le projet va contenir. Ensuite il y a le dossier environments
qui contient les différents variables. Enfin, il y a divers fichiers, en particulier le fichier index.html
qui contient le point d’entrée de l’application. Il y a aussi le fichier main.ts
qui est le point d’entrée des TypeScript. Ensuite, il y a le fichier styles.css
qui va contenir les différents style de l’application.
Après le répertoire src
, il y a le répertoire node_modules
. Il contient les dépendances du projet qui ont été installé ou qui vont être installé.
Enfin, il y a le fichier package.json
qui contient la liste des différentes dépendances qui sont utilisées dans l’application.