Démarrer une Application Web

avec Angular CLI

13
Guide Complet

23/12/2021

Nous allons réaliser

une Application Web.

Dans ce ce tutoriel nous utiliserons

le framework
javascript Angular version 13.1.1

Pour commencer notre application

nous partirons de rien (from
scratch) en nous efforçant de suivre
les meilleures pratiques (best
practices) d'Angular.

[Link]
 Comment le faire ?

Pour débuter notre projet voici un résumé de ce que nous allons faire.

 Installation des outils nécessaires

[Link] sera notre plateforme de développement javascript.

Pas le choix, sans [Link] ç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

Git sera notre gestionnaire de logiciel.

Grâce à lui vous pourrez utiliser le code source de ce tutoriel.

Angular CLI sera notre homme à tout faire.

Sans doute l'outil le plus connu et le plus utilisé du Framework Angular.

 Initialisation du projet
Nous utiliserons Angular CLI pour la mise en place de l'architecture du projet,
en utilisant les best practices (les meilleurs pratiques) préconisées par Google.

 Mise à jour du projet

Vérifier les dépendances utilisées et les mettre à jour.
 Effectuer les Tests
Les tests Unitaires et les tests end-to-end.
Et chacun d'eux disposent de leurs outils dédiés.

 Déploiement
Comment déployer votre application sur internet.

 Code source
Pour les plus pressés d'entre vous, le code complet du projet est disponible sur
Github.
 Etape 1

Installation des outils

nécessaires

Avant d'utiliser Angular il nous

faut installer un certain nombre de
logiciels

 [Link]
Impossible de faire fonctionner
Angular sans lui.

 Visual Studio Code

Ce choix est arbitraire.

 Git : Très utile mais pas essentiel

 Angular CLI
C'est l'homme à tout faire d'Angular

[Link]
Installation de [Link]

Si vous ne l'installez pas, Angular ne fonctionnera pas.

A ce propos Angular, React et Vuejs ont besoin tous trois de [Link].

Le site officiel c'est ici [Link]

Voilà ce qu'il nous dit:

[Link] est un environnement d’exécution JavaScript construit sur le
moteur JavaScript V8 de Chrome.

Son inventeur Ryan Lienhart Dahl l'a créé le 27 mai 2009.

Il avait une idée précise derrière la tête : la simplicité et la rapidité d’exécution de
programmes écrits en javascript.

Le choix du nom n'est donc pas anodin.

 Node signifie noeud

 JS signifie javascript

[Link] est ainsi le point central qui va permettre d'exécuter des programmes
écrits en javascript côté serveur.
[Link] utilise un outil npm (Node Pakage Manager)
Npm simplifie la vie du développeur en permettant de publier et de partager des
librairies [Link].
Npm 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 [Link]

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,

 [Link] version 16.13.1 LTS

 npm (node package manager) version 8.1.3

Il s'agit d'une installation classique.

 Choisissez votre système d'exploitation.

 Téléchargez le programme et éxécutez le.

Une fois l'installation effectuée on peut vérifier que [Link] est installé sur notre
poste de travail.

# Vérification de la version de [Link] et de npm (méthode 1)

node --version
npm --version

# Vérification de la version de [Link] et de npm (méthode 2)

node -v
npm -v

# Mise à jour de npm

npm install npm -g

# Vérification de la mise à jour de npm

npm -v
 Comment savoir que [Link] fonctionne ?

On va vérifier que [Link] fonctionne et qu'il permet d'exécuter un programme

javascript.

Allons sur Wikipedia [Link]

Testons le programme d'exemple "un Hello Word" qu'il nous propose.

Créez un fichier [Link] 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) => {
[Link](200, {'Content-Type': 'text/plain'});
[Link]('Hello World\n');
});

[Link](3000, () => [Link](`Adresse du serveur : [Link]

Il ne reste plus qu'à procéder aux tests

# Exécution du programme javascript

node [Link]

# Vérification dans le navigateur

[Link]

Pour plus de détails, je vous conseille le tutoriel suivant.

Installer [Link] sous Windows ou Ubuntu

Installation de Visual studio code

Visual Studio Code est l'éditeur utilisé dans la plupart des conférences sur
Angular.
Il est notamment utilisé par John Papa l'un des meilleurs conférenciers Angular
et auteur des guides Angular
[Link]

Dans la suite du tutoriel nous utiliserons donc Visual 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à

 [Link]

Nous utiliserons la dernière version 1.63.0 à télécharger ici

[Link]

L'installation est simple comme celle de [Link].

Vous choisissez votre système d'exploitation, vous téléchargez le programme et

vous l'exécutez.

L'icône Visual Studio Code nous permettra de lancer VS Code.

Ce que nous ferons dans la partie Initialisation avec Angular CLI

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.

Ce sont les logiciels de gestion de versions (ou VCS en anglais, pour version
control system).

Le plus connu est Git. Il a été créé par Linus Torval le créateur de Linux.

Il va nous permettre de gérer notre code source et ses différentes versions.

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 [Link]

L'installation est accessible ici [Link]

Té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.

Mais c'est surtout ça.

L’homme à tout faire d’Angular

Et autant utiliser la version la plus récente.

 Angular version 13.1.1

 Angular CLI version 13.1.2

Les dernières versions de ces outils sont disponibles ci-dessous

  [Link]
 [Link]

La procédure d'installation est détaillée sur le site officiel

d'Angular [Link]
La méthode est décrite sur la page du site officiel.

Je vais détailler celle-ci.

- Si une version précédente était installée sur votre poste vous pouvez la
désinstaller avec la commande suivante

# Désinstallation d'angular-cli
npm uninstall -g @angular/cli

Angular CLI est une librairie (ou package).

Nous allons l'installer avec npm le gestionnaire de [Link]

Vous pouvez installer une version spécifique d'angular ou installer par défaut la
dernière disponible.

# 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@13.1.2

# Test de version installée

ng --version
 Etape 2

Initialisation du projet avec

Angular CLI

Angular est un framework

complet qui couvre un grand
nombre de fonctionnalités.

La documentation est
particulièrement fournie et
détaillée.

Nous essaierons le plus

souvent possible de
respecter les best practices
(meilleures pratiques)
préconisées par l'équipe
d'angular.

Nous pouvons créer

manuellement chaque
élément de notre application
mais le plus simple est
d'utiliser Angular CLI

[Link]
Créer notre application avec Angular CLI

Angular CLI est un outil pour initialiser, développer et maintenir des applications
Angular.

Le site officiel est ici [Link]

Et si vous voulez avoir la liste des commandes Angular CLI

[Link]

Pour aller plus vite je vous fais un résumé essentiel.

Angular CLI nous offre un certain nombre de commandes.

Ces commandes nous évitent d'effectuer des tâches répétitives.

La première commande que nous allons utiliser est ng new ou ng n

 Elle va créer notre application.

 Elle va générer tous les fichiers nécessaires à cette application.
 Elle va évidemment suivre les best practices préconisées par l'équipe de
Google.

On choisit le nom de notre application (arbitrairement ce sera ici angular-

starter)
On tape la commande ng new avec les paramètres correspondants

- On génère le projet (cette partie prend quelques minutes)

 Pour une compréhension plus simple nous gérerons le routing et le sass

dans un autre tutoriel.
 Répondre non pour le routing
 Choisir le type CSS

- On se positionne dans le projet

- On exécute le projet

Ce qui donne

# Générer un projet appelé angular-starter avec choix manuel des options

ng new angular-starter

# Générer un projet appelé angular-starter avec options par défaut

ng new angular-starter --defaults

# Se positionner dans le projet

cd angular-starter

# Exécuter
ng serve

# Exécuter et lancer automatiquement l'application dans le navigateur

ng serve -o

Angular CLI via la commande ng serve exécute le projet sur un port par défaut
(4200).

Il ne reste qu'à tester le fonctionnement dans un navigateur en lançant l'url

suivante.

# Tester
[Link]
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 [Link].

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.

Remarque:
La commande ng eject (permettant de générer la configuration webpack) a été
désactivée.
Elle a été supprimée depuis la version 8.
Projet exemple de gestion du format de configuration
[Link]

En mode développement si nous voulons personnaliser le port il suffit

de modifier le script start dans le fichier [Link].
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",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
 Etape 2

Mise à jour de
[Link]

[Link] est la plateforme pour

développer notre application.
[Link] est basée sur
l'utilisation de librairies ou
dépendances.

Npm est le gestionnaire des

librairies (packages en
anglais)

La mise à jour d'une

application et donc de ses
librairies est une question
périlleuse.

Je vais vous montrer qu'avec

Angular la notion de mise à
jour des versions est
essentielle.
Elle doit être menée avec
prudence.

[Link]
Update or not update

Les librairies javascript sont constamment modifiées et mises à jour par leur
concepteur.
Lorsqu'une nouvelle version est disponible elle porte le nom de release (sortie
en anglais) et dispose d'un numéro spécifique.

Si la librairie est open-source vous pouvez voir les dernières versions

disponibles en allant sur le dépôt correspondant sur Github puis allez sur
Releases.

Par exemple les différentes versions d'Angular sont accessibles ici

[Link]

Le calendrier des mises à jour est ici

[Link]

Votre passé, votre présent et votre futur.

Remarquez que les versions 4, 5, 6, 7,8 et 9 ne sont plus supportées.

Et le danger est évidemment que toutes ces mises à jour altèrent le

fonctionnement de notre application.
Dans tous les cas on ne pourra y échapper il faudra un jour ou l'autre essayer de
les intégrer dans nos projets.

Je vais vous expliquer comment je procède personnellement

Comment fait-on?

Utilisons npm (Node Package Manager) le gestionnaire de librairies de [Link].

La documentation complète est ici [Link]

npm nous permet de vérifier les versions de nos librairies via la commande

 npm outdated

Cette commande vérifie le registre des dépendances pour vérifier si les

packages installées sont à jour.
Elle nous fournit ainsi une liste que l'on peut contrôler.
Remarque
Avant de vérifier les dépendances modifions le fichier [Link]
Pour chaque dépendance indiquée supprimez le caractère ~ ou ^
Par exemple remplacez

 "rxjs": "~7.4.0",
 "tslib": "^2.3.1",

par

 "rxjs": "7.4.0",
 "tslib": "2.3.1",

Puis réinstallez les dépendances avec npm install

Vous comprendrez pourquoi plus loin dans le paragraphe c'est parti pour la
mise à jour.

# Vérification des dépendances disponibles

npm outdated
Résultats de la mise à jour !

Si je mets à jour le fichier [Link] je me retrouve confronté à 3 cas de

figure

 1/ Ca marche
C'est pas tous les jours la fête mais depuis Angular 8 c'est de plus en
plus souvent

 2/ Ca ne marche pas on essaie de debugger sans y passer trop de

temps.
Ca dépend de votre patience et du temps que vous avez devant vous

 3/ Ca marche pas et on attend.

Souvent (mais pas toujours) Angular résout votre problème avec la mise
à jour suivante.
De toute façon ce n'est pas la peine d'attendre indéfiniment, il faudra
bien trouver une solution.
Ou alors on se retrouve avec AngularJS en 2022 et là on n’est pas dans
le pétrin.
Notre prototype Angular

L’idéal est d'avoir un prototype d'application qui contienne suffisamment de

fonctionnalités.
Vous pouvez être à-peu-près sûr que la mise à jour pourra s'effectuer sur la
plupart de vos applications.
Bien sûr ça ne vous épargnera pas d'optimiser votre CI/CD et de veiller à vos
tests.

En tout cas voici une liste des fonctionnalités essentielles à une application
selon moi.

En vert celles que j'ai traité via un tutoriel sur ganatan et en rouge celle que je
traiterai (un jour peut-être).

 Routing
 Lazy Loading
 Bootstrap
 Httpclient
 TransferState
 SSR
 PWA
 SEO
  Components
 Services
 Observables
 Directives
 Pagination
 ScrollBox
 Charts
 Authentification (Route guard/role guard)
 Ngrx
 Reactiveform / Tempate Driven form
 Form Modal
 Internationalization
 Tests (unit et end-to-end)

Le dépôt qui me sert pour l'instant de prototype est le suivant.

[Link]

Donc c'est parti pour la mise à jour

Pour l'exemple nous allons utiliser cette méthode sur notre application angular-
starter.

Le fichier [Link] contient les différentes dépendances de votre projet.

Les dépendances sont en quelque sorte toutes les librairies que vous avez
décidé d'utiliser dans votre projet.
Elles sont gérées par npm (node package manager) le gestionnaire de
dépendances de [Link].

Concernant les dépendances et leur version la documentation npm est la

suivante
[Link]

Les spécificateurs de version sont nombreux.

Nous pouvons utiliser par exemple

 version Doit correspondre à la version exactement

 ~version "Approximativement équivalente à la version"
 ^version “Compatible avec la version”
Nous opterons quant à nous pour le premier spécificateur "version", qui est
le plus simple, le plus explicite mais aussi le plus restrictif.

Nous allons mettre à jour le fichier [Link] avec les dernières

dépendances

- Pour contrôler les dépendances à mettre à jour lancez la commande

npm outdated

- Dans certains cas toutes les dépendances peuvent être mises à jour à
l'exception de Typescript

 Angular 13.0.0 accepte par exemple TypeScript> = 4.0.0 and <4.2.0

- Dans le cas d'Angular 13.1.0 toutes les dépendances peuvent être mises
à jour.

- Modifiez le fichier [Link] comme suit puis executez le script

npm install
"dependencies": {
"@angular/animations": "13.1.1",
"@angular/common": "13.1.1",
"@angular/compiler": "13.1.1",
"@angular/core": "13.1.1",
"@angular/forms": "13.1.1",
"@angular/platform-browser": "13.1.1",
"@angular/platform-browser-dynamic": "13.1.1",
"@angular/router": "13.1.1",
"rxjs": "7.4.0",
"tslib": "2.3.1",
"[Link]": "0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "13.1.2",
"@angular/cli": "13.1.2",
"@angular/compiler-cli": "13.1.1",
"@types/jasmine": "3.10.2",
"@types/node": "17.0.2",
"jasmine-core": "3.10.1",
"karma": "6.3.9",
"karma-chrome-launcher": "3.1.0",
"karma-coverage": "2.1.0",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.7.0",
"typescript": "4.5.4"
}

Il suffit alors de tester tous les scripts pour vérifier que les
mises à jour ont fonctionné.
 Etape 4

Tests et déploiement

Le développement est entré

dans sa phase
d'industrialisation.

Au même titre que les autres

industries la qualité et la
quantité doivent être au
rendez-vous.

Des méthodes Agile ont été

inventées pour cela.
Les tests en font partie
intégrante.

Nous allons voir que les

concepteurs d'Angular ont tout
prévu.

[Link]
Les Tests : Le secret de mon succès

Créer une application Web c'est comme créer n'importe quel objet.
On crée une voiture, une télévision ou un avion par exemple.
Et avant de le donner à quelqu'un on va tester son fonctionnement.

Les informaticiens se sont dit autant que ce soit simple et automatique.

Plus facile à dire qu'à faire.

Un peu d'histoire avant de commencer

Depuis ces débuts le monde informatique a cherché à s'améliorer.

Plusieurs méthodes de travail ont été adoptées.
En simplifiant on pourrait dire qu'on en est là.

Méthode Cycle en V contre méthode Agile.

 La plus rapide est-elle vraiment celle qu'on croit ?

Mais qui a fait quoi ?

Si vous voulez travailler dans la programmation c'est sûr il va falloir se montrer

agile.
La méthode la plus utilisée actuellement est la méthode Scrum.
En Novembre 2009 Mike Cohn décrit la pyramide des tests (The test
pyramide en anglais) dans son livre
Succeeding with Agile: Software Development Using Scrum

Avec Angular nous nous intéresserons à deux catégories.

 Les tests unitaires

 Les tests e2e ou end to end

Faisons un survol en image de l'architecture d'Angular pour visualiser les tests.

Les tests avec Angular

Les tests unitaires utilisent

 Karma
 Jasmine

Les tests end-to-end utilisent

 Protractor

Remarque : Depuis angular 12 les tests end-to-end ont été désactivés.

Pour les lancer on utilise les scripts correspondants contenus dans le fichier
[Link]

Juste quelques explications sur les tests end to end

 Protractor est un Framework de test end-to-end utilisé

par Angular et AngularJS
 Selenium est une librairie d'automatisation pour navigateur
 Protractor s'appuie sur Selenium
 Selenium utilise ChromeDriver pour piloter Chrome
 Enfin "webdriver" Selenium communique avec les "navigateurs".

Tout ça pour en venir à quelques remarques

Vous devez utiliser chrome dans sa version 89 minimum.

Des erreurs peuvent survenir dans les tests end to end suivant la version de
Chrome utilisée et de chromeDriver.
Je n’en dirai pas plus et advienne que pourra.

# Tests unitaires
npm run test

# Tests end to end

npm run e2e
Modifier et vérifier

Effectuons le test simple de modification et de débuggage et le test de contrôle

de code source.

- Débuggage.
Toute modification entraine une recompilation du code.

Par exemple Modifier le fichier [Link]

<p>Modifications : Here are some links to help you get started:</p>
La compilation est alors exécutée automatiquement et le navigateur se
réactualise.

Remarque :Le fichier [Link] est incorrect. Pensez à en mettre un correct.

Dans cet exemple vous pouvez récupérer celui de ce dépôt.

# Executer
npm run start

# Tester
[Link]

# Effectuer des modifications

Vérification du code

- La commande ng lint exécute l’analyse statique du code source TypeScript.

Angular utilise l’outil TSLint accessible à cette

adresse [Link]
Remarque
Cette commande a été désactivée à partir d'Angular 12.
On attend le prochain outil préconisé par angular (probablement ESLint ?).

# Test du code source

npm run lint
Déploiement
Tout ce que nous avons fait est bien sympathique.
Mais une application Web n’a d’intérêt que si nous la rendons accessible sur le
Web.
C'est ce que l'on appelle le déploiement.
Nous allons voir comment le faire via deux méthodes de la plus simple à la
plus compliquée.

Mais tout d’abord parlons compilation.

Comme nous l’avons vu précédemment le fichier [Link] contient un

certain nombre de scripts (ou commandes).

Le script qui nous intéresse est npm run build

Il permet de compiler notre application.

Ce script exécute la commande d’Angular CLI

ng Build

Sans rentrer dans les détails voilà comment ça fonctionne.

Via cette commande Angular utilise l’outil Webpack (un module bundler) pour
créer le produit final.

L’exécution de cette commande va créer un répertoire dist.

Celui-ci contiendra ce que l’on peut appeler le produit final (ou livrable ou
artefact).

C’est cette partie que l’on va déployer.

Les conseils donnés par Angular sont à l'adresse suivante
[Link]

Déploiement avec lite-server

Le déploiement le plus simple est d'utiliser le serveur Http développé par John
Papa.
Comment procéder ?

 On installe la librairie lite-server en global avec npm

 On exécute l'application en mode production

# Compilation du projet
npm run build

# Installation du serveur de développement lite-server

npm install -g lite-server

# Exécution de notre application

lite-server --baseDir="dist/angular-starter"

# Tester l'application dans notre navigateur avec l'url suivante

[Link]

Déploiement avec nginx

Le déploiement le plus simple est d'utiliser le serveur Http développé par John
Papa.

Une solution plus complexe mais plus proche de la réalité.

Il nous faudra disposer d'un serveur virtuel ou VPS (Virtual private server).

Je vous conseille d'en acheter un chez un fournisseur de VPS.

Par exemple OVH ou Digital Ocean sont parmi les moins chers et les plus
efficaces.
Les tutoriels suivants peuvent vous être utiles

Installer un serveur Ubuntu chez OVH

Installer Angular sur un serveur Ubuntu

Sur notre serveur (exemple d'un serveur avec ubuntu et l'adresse ip

[Link])

 Installer nginx
 Tester nginx
 Copier notre répertoire dist sur /var/www/html
 Tester le serveur

# installation de nginx sur le serveur

sudo apt-get --yes install nginx
sudo apt-get update

# Démarre le service nginx

sudo service nginx start

# Tester l'installation du serveur nginx

[Link]

# Copier le contenu du répertoire dist/angular-starter

# sur le serveur dans le répertoire /var/www/html/

# Tester l'application
[Link]
 Etape 5

Code Source

Ce guide nous a permis de créer

une application Web prête à
fonctionner.

Pour vous simplifier la tâche vous

pouvez utiliser directement le
code source de cette application,
pour la tester et vérifier qu'elle
fonctionne.

Pour cela il suffit d'utiliser le

logiciel Git.
Je vais vous montrer comment
procéder.

Cette première application reste

néanmoins basique.
Je vous proposerai pour terminer
un certain nombre d'étapes qui
vous permettront de créer une
application plus complexe.
 [Link]

Utiliser Git avec notre code source

En suivant chacun des conseils que je vous ai donnés dans ce guide vous
obtenez au final un code source Angular.
Ce code représente votre travail et doit faire l'objet de toute votre attention.

Comme nous l'avons vu précédemment, Git va nous permettre de gérer tous

nos codes sources.

Un petit tour sur Wikipedia [Link] nous apprend

que
GitHub est le plus grand hébergeur de code source au monde.

En mai 2019 on compte

 37 millions d'utilisateurs
 Plus de 100 millions de dépôts (ou repositories en anglais)

Je vous conseille donc de publier vos sources sur cet hébergeur.

Le code source de ce tutoriel est bien évidemment disponible sur GitHub.

Utilisez git pour récupérer ce code et vérifier son fonctionnement.

Il vous suffit de vous rendre à l'adresse suivante

[Link]
Si ce guide vous a plu et que vous allez sur GitHub pour consulter le code,
n'hésitez pas à cliquer sur STAR ça fait toujours plaisir.

Sinon pour aller plus vite encore suivez les conseils suivants.

Utilisez la commande classique de prompt sous windows (cmd) ou linux.

Puis tapez la liste des commandes

# Créez un répertoire demo (le nom est ici arbitraire)

mkdir demo

# Allez dans ce répertoire

cd demo

# Récupérez le code source sur votre poste de travail

git clone [Link]

# Allez dans le répertoire qui a été créé

cd angular- starter

# Exécutez l'installation des dépendances (ou librairies)

npm install

# Exécutez le programme
npm run start

# Vérifiez son fonctionnement en lançant dans votre navigateur la commande

[Link]
Pour aller plus loin

Ce tutoriel nous a permis de créer notre première application.

Celle-ci reste relativement simple.

Si vous voulez créer une application plus complète, il vous faudra mettre en
œuvre certains principes et fonctionnalités supplémentaires comme

 Le Routing (gestion de plusieurs pages)

 Le Lazy loading (rapidité de l'application)
 Le Server Side Rendering (permettre le référencement)
 Les PWA (fonctionnement sur mobile et desktop)

L' étape suivante est logiquement la gestion du Routing.

Elle nécessite un tutoriel complet qui est à l'adresse suivante

 Etape 2 : Routing avec Angular

Les étapes suivantes vous permettront d'obtenir une application prototype

 Etape 3 : Lazy loading avec Angular

 Etape 4 : Bootstrap avec Angular
 Etape 5 : Architecture avec Angular
 Etape 6 : Components avec Angular
 Etape 7 : Services avec Angular
 Etape 8 : Template Driven Forms avec Angular
 Etape 9 : Charts avec Angular
 Etape 10 : Server Side Rendering avec angular
 Etape 11 : HttpClient avec Angular
 Etape 12 : Transfer State avec Angular
 Etape 13 : Progressive Web App avec Angular
 Etape 14 : Search Engine Optimization avec Angular

La dernière étape permet d'obtenir un exemple d'application

 Etape 15 : Créer une application Web complète avec Angular

Le code source de cette application finale est disponible sur GitHub
[Link]