Angular

Introduction
Angular 9, Angular 10 & Angular 11 : 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 est sorti en septembre• Angular 7 en octobre 2018,
2016,
1 • Angular 8 en mai 2019,
• Angular 4 en mars 2017,
• Angular 9 en février 2020,
• Angular 5 en novembre 2017,
• Angular 10 en juin 2020.
• Angular 6 en mai 2018,
• Angular 11 en novembre 2020
 Angular est un framework
Contrairement à d'autres alternatives intéressantes telles que React, Angular n'est pas
une "library" mais bien un framework.
Angular fournit donc nativement tout le nécessaire pour produire une application entière
avec une configuration standard :
• Configuration de build et d'optimisation complète.
• Module d'animations.
• Module de "routing".
• Module de formulaires.
• Debug.
• Tests unitaires et e2e.
2 Avec Angular, la majorité des applications ont la même structure de projet et la même
"stack" d'outils. Les applications Angular sont donc homogènes et vous tomberez
donc plus rarement sur des "cas particuliers".
Dans la plupart des cas, vous éviterez les problèmes de compatibilité de dépendances
en laissant l'équipe Angular s'en charger pour vous.
3
 Démarrer une Application Web avec
Angular CLI 11
Comment le faire ?
Pour débuter notre projet voici un résumé de ce que nous allons faire.
Installation des outils nécessaires
❖Node.js sera notre plateforme de développement javascript. Pas le
choix, sans Node.js ça ne marchera pas.
❖Visual studio Code sera notre éditeur de code. Le choix est
totalement arbitraire mais pour un outil Microsoft c'est une petite
merveille
4 ❖Git sera notre gestionnaire de logiciel. Grâce à lui vous pourrez
utiliser le code source de ce tutoriel.
❖ Angular CLI est un outil permettant de créer, construire, générer et
tester vos applications et librairies Angular..
5

Etape 1

Installation des outils nécessaires

Installation de Node.js

Node.js est un environnement d’exécution JavaScript construit sur le

moteur JavaScript V8 de Chrome.
Node.js est ainsi le point central qui va permettre d'exécuter des
programmes écrits en javascript côté serveur.
Node.js utilise un outil npm (Node Pakage Manager)
Npm simplifie la vie du développeur en permettant de publier et de partager
des librairies Node.js.
6Npm permet notamment de simplifier l'installation, la mise à jour ou la
désinstallation de ces librairies. On pourra parler de librairies, de paquets ou
de dépendances (en anglais packages ou dependencies).
Comment l'installer ?
Sur le site officiel le téléchargement est accessible à l'adresse
https://nodejs.org/fr/download/
Installation de Node.js

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 14.15.0 LTS
❖ npm (node package manager) version 6.14.8
Une fois l'installation effectuée on peut vérifier que Node.js est installé sur
7notre poste de travail.
# Vérification de la version de Node.js et de npm (méthode 1) node --version
npm –version ou ( node -v npm –v)
# Mise à jour de npm npm install npm -g
Comment savoir que Node.js fonctionne ?

On va vérifier que Node.js fonctionne et qu'il permet d'exécuter un

programme javascript.
Créez un fichier index.js avec un éditeur de code (bloc-notes fera l'affaire).
Copiez le code exemple suivant
const { createServer } = require('http');
//Creation du serveur const server = createServer((request, response) => {
response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('Hello World\n');
});
server.listen(3000, () => console.log(`Adresse du serveur : http://localhost:3000`));
8
Il ne reste plus qu'à procéder aux tests
Exécution du programme javascript
node index.js
# Vérification dans le navigateur
http://localhost:3000
Installation de Visual studio code

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 1.51.0 à télécharger ici
9https://code.visualstudio.com/updates/v1_51
 Installation de Git

Ecrire une Application Web c'est un peu comme écrire un livre.

Plus le temps passe plus le nombre de pages augmentent.
De quelques centaines vous pouvez passer à des milliers de pages.
Le nombre de modifications devient considérable et pour s'y retrouver ce
n'est pas une mince affaire.
Pour gérer ce problème, des outils ont été développés.
10Ce sont les logiciels de gestion de versions (ou VCS en anglais, pour
version control system). Le plus connu est Git.
Il va nous permettre de gérer notre code source et ses différentes versions.
 Installation de Git

Et surtout de pouvoir partager ce code source, permettant ainsi de travailler à

plusieurs.
Git vous permettra aussi d'utiliser et de tester le code source de ce tutoriel.
Passons à l'installation.
Le site officiel est à l'adresse suivante https://git-scm.com/
L'installation est accessible ici https://git-scm.com/download/win
11Téléchargez l'application puis exécutez la.
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

Angular CLI ça veut dire Angular Command Line Interface.

# Installation d'angular-cli dernière version disponible
npm install -g @angular/cli
# Installation d'angular-cli version spécifique
npm install -g @angular/cli@11.0.0
NB: Les modules Angular officiels sont préfixés par @angular/
L'installation de ce module mettra à votre disposition la commande ng

12qui vous permettra plus tard de créer votre application Angular.

# Test de version installée
ng --version
13

Etape 2

Initialisation du projet avec Angular CLI

14

Angular est un framework complet qui couvre un grand nombre de

fonctionnalités.

Nous pouvons créer manuellement chaque élément de notre

application mais le plus simple est d'utiliser Angular CLI
 Créer notre application avec Angular CLI
❖Pour créer un nouvel espace de travail et une application de démarrage initiale :
1. Exécutez la commande CLI ng new et indiquez le nom my-app, comme indiqué
ici:

ng new my-app
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.

La15CLI Angular installe les packages Angular npm nécessaires et d'autres

dépendances. Cela peut prendre quelques minutes.

L'interface de ligne de commande crée un nouvel espace de travail et une

application de bienvenue simple, prête à fonctionner.
❖ Lancez l'application

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 my-app. cd my-app
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/.

16
 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. : (ou angular-cli.json avant la version 6) : 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
❖17
développeur (nombre de caractères max par ligne, l’emplacement des
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
18
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.
19
 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“
20 },