Publié le : 01/01/2022

Un simple projet Angular

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.

Structure application Angular

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.

Les mots clés rattachés à cet article : Angular  -  Javascript  -  TypeScript

Nos clients

Une vingtaine de clients nationaux et internationaux