Professional Documents
Culture Documents
Angular Introduction
Angular Introduction
Introduction
Angular 13, Angular 14 & Angular 15 : déjà ?
En bref : il n’y a qu’un seul framework Angular.
Historique des versions d’Angular
Angular sort une nouvelle version majeure tous les 6 mois environ :
• Angular 2 en septembre 2016, • Angular 8 en mai 2019,
Etape 1
Nous allons utiliser la version LTS (Long Term Support ou Support à long
terme). LTS signifie que l'éditeur nous garantit en général une période de
maintenance d'au moins deux ans,
❖ Node.js version 18.17.1-x64
❖ npm (node package manager) version 9.6.7
Une fois l'installation effectuée on peut vérifier que Node.js est installé sur
7notre poste de travail.
Visual Studio Code est l'éditeur utilisé dans la plupart des conférences sur
Angular,
Studio Code. VS code est un éditeur de code développé par Microsoft pour
Windows, Linux et OS X. Procédons à l'installation. Le site officiel est là
https://code.visualstudio.com/
Nous utiliserons la dernière version à télécharger ici
8https://code.visualstudio.com
NB: Cette étape à faire si vous n’avez pas déjà installé visual studio code
S
Installation de Git
Pour vérifier que Git est installé sur votre poste de travail il suffit de lancer
une ligne de commande.
# Test de la version git --version
Installation d' Angular CLI
Etape 2
ng new l2dsi1
2. La ng new commande vous demande des informations sur les fonctionnalités à
inclure dans l'application initiale. Acceptez les valeurs par défaut en appuyant
sur la touche Entrée ou Retour.
La CLI angulaire comprend un serveur, afin que vous puissiez créer et servir votre application
localement.
1. Accédez au dossier de l'espace de travail, tel que l2dsi1. cd l2dsi1
2. Exécutez la commande suivante : ng serve –open (ou juste -o)
L’option --open(ou juste -o) ouvre automatiquement votre navigateur à http://localhost:4200/.
15
Arborescence d’un projet Angular
❖ e2e : contenant les fichiers permettant de tester l’application
❖ node modules : contenant les fichiers nécessaires de la librairie nodeJS pour
un projet Angular (c'est dans ce dossier que sont installés tous les plugins
«Node» installé via npm.)
❖ src : contenant les fichiers sources de l’application
❖ package.json : contenant l’ensemble de dépendance de l’application
❖ angular.json. : contenant les données concernant la configuration du projet
(l’emplacement des fichiers de démarrage...)
❖ tslint.json : contenant les données sur les règles à respecter par le
développeur (nombre de caractères max par ligne, l’emplacement des
16
espaces...)
❖ tsconfig.json : contenant les données de configuration de TypeScript
Que contient src?
assets : l’unique dossier accessible aux visiteurs et contenant les images, les sons...
index.html : l’unique fichier HTML d’une application Angular
styles.css : la feuille de style commune de tous les composants web de l’application
favicon.ico : le logo d’Angular
app : contient initialement les 5 fichiers du module principal
app.module.ts : la classe correspondante au module principal
app.component.ts : la classe associé au composant web
app.component.html : le fichier contenant le code HTML associé au composant web
app.component.css : le fichier contenant le code CSS associé au composant web
17
app.component.spec.ts : le fichier de test du composant web
Pour créer un projet sans les fichiers de test (.spec.ts), utiliser la commande :
• ng new ProjectName --skip-tests=true
Utiliser notre application avec Visual Studio Code
Lancez VS Code. Ouvrez un dossier dans le répertoire angular-starter que nous
avons créé lors de l'initialisation. Ouvrez ensuite le fichier package.json. Celui-ci
contient un certain nombre de commandes (ou scripts) que nous utiliserons tout
au long de ce tutoriel. Ouvrez une console VS code (sélectionnez
Afficher/Terminal) pour exécuter les scripts suivants
❖ npm run start : Exécute l'application en mode développement.
❖ npm run build : Compile l'application dans le répertoire dist.
❖ npm run test : Exécute les tests unitaires en utilisant le framework Karma.
❖ npm run lint : Exécute l'analyse de code avec TSLint.
❖ npm run e2e : Exécute les tests end-to-end avec Protractor.
18
Utiliser notre application avec Visual Studio Code
En mode développement si nous voulons personnaliser le port il suffit de modifier
le script start dans le fichier package.json. Par exemple pour utiliser le port 4201
le script serait le suivant "start": "ng serve --port 4201"
Nous laisserons le port 4200 modifiable à volonté pour la suite du tutoriel.
"scripts": { "ng": "ng",
"start": "ng serve --port 4200",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e“
19 },