1

Installion d’angular
Pour installer Angular, vous aurez besoin d'avoir Node.js 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 :

npm install -g @angular/cli

Vérification de la version d’angular : ng version
Création d’un projet angular : ng new mon-projet
Lancement le serveur local : ng serve

Structure des fichiers dans un projet Angular

Lorsque vous créez un projet Angular en utilisant la commande ng new, plusieurs dossiers et
fichiers sont automatiquement générés pour vous. Voici une liste des dossiers et fichiers les
plus importants générés par Angular :

 e2e/ : Ce dossier contient les fichiers de test end-to-end (e2e) de votre application Angular. Ces tests
permettent de vérifier que l'application fonctionne correctement en simulant des actions réelles d'un
utilisateur. node_modules/ : Ce dossier contient toutes les dépendances npm (paquets Node) utilisées
par votre application Angular. Ces dépendances sont automatiquement téléchargées et installées
lorsque vous créez un nouveau projet Angular.
 src/ : Ce dossier contient les fichiers source de votre application Angular. C'est ici que vous allez
écrire le code de votre application et ajouter des fichiers tels que des composants, des services, des
modules, etc.
 .editorconfig : Ce fichier contient des réglages d'éditeur pour l'application Angular. Ces réglages
permettent de définir des conventions de code communes pour tous les développeurs de l'application,
afin de garantir une qualité et une cohérence du code.
 .gitignore : Ce fichier contient une liste des fichiers et dossiers que Git (outil de gestion de versions)
doit ignorer lors de l'envoi des modifications dans un dépôt Git. Par exemple, les fichiers générés
automatiquement par Angular ou les fichiers de configuration de votre environnement de
développement ne sont généralement pas ajoutés dans un dépôt Git.
 angular.json : Ce fichier contient les configurations de l'application Angular. Vous pouvez utiliser ce
fichier pour configurer les paramètres de l'application, tels que le nom de l'application, les options de
compilation, les chemins de fichiers, etc.
 package.json : Ce fichier contient les informations sur le paquet npm (Node Package Manager) de votre
application Angular. Il contient notamment le nom et la version de l'application, les dépendances
utilisées, les scripts npm, etc.
 tsconfig.json : Ce fichier contient les configurations pour l'utilisation de TypeScript dans l'application
Angular. TypeScript est un langage de programmation orienté objet qui permet de bénéficier de
fonctionnalités avancées telles que la vérification de types et l'intégration de classes.

Michel DOSSO Analyste développeur

Mastérien en Ingénierie de conception des SI +242 06 895 89 98
 2

Dans le dossier app

Dans un projet Angular, le dossier app/ se trouve généralement à la racine du dossier src/ . Ce
dossier contient les fichiers principaux de l'application Angular, tels que les composants, les
services, les modules, etc.

Le dossier app/ est généré par défaut lorsque vous créez un nouveau projet Angular en
utilisant la commande ng new . Il contient généralement les fichiers suivants :

 app.component.ts : Ce fichier contient le code du composant principal de l'application. Le composant

principal est le composant racine de l'application et est chargé automatiquement lorsque l'application
démarre.
 app.module.ts : Ce fichier contient le code du module principal de l'application. Le module principal
regroupe les différents composants, services, modules, etc. de l'application et permet de les utiliser
dans les autres parties de l'application.
 app.component.html : Ce fichier contient le code HTML du composant principal de l'application. C'est
ici que vous allez définir la structure et le contenu de votre application.
 app.component.css : Ce fichier contient les feuilles de style CSS du composant principal de
l'application. Vous pouvez utiliser ce fichier pour définir le style des éléments HTML de votre
application. Le dossier app/ peut également contenir d'autres dossiers et fichiers, en fonction de la
configuration de votre projet Angular. Par exemple, si vous avez ajouté des composants, des services,
ou des modules à votre application, ils seront généralement placés dans des sous-dossiers de app/ .

Michel DOSSO Analyste développeur

Mastérien en Ingénierie de conception des SI +242 06 895 89 98
 3

Michel DOSSO Analyste développeur

Mastérien en Ingénierie de conception des SI +242 06 895 89 98
 4

Installation global de ionic

npm i -g @ionic/cli

Ajout du framework angular : npm install @ionic/angular@latest --save

Création d’un nouveau projet : ionic start nomApplication options(sidemenu,
blank et tabs)

Lancement sur le serveur local : ionic serve

Ajout d’une plateforme : ionic capacitor add [platform]

Copy des fichiers pour émuler: ionic capacitor copy [platform] [options]

Ouverture du projet sur un IDE : ionic capacitor open [platform]

Compiler sur android : ionic capacitor run [platform] [options]

Synchronisation copy et mise à jour : ionic capacitor sync [platform] [options]

Ionic generate page nompage (pour créer une page ionic )
Ionicframework.com (la documentation officiel)

Michel DOSSO Analyste développeur

Mastérien en Ingénierie de conception des SI +242 06 895 89 98