Démarrer une Application Web avec Angular CLI 9

07/03/20 danny

Nous allons réaliser une Application Web.
Dans ce tutoriel nous utiliserons le framework javascript Angular version 9.0.5

Pour commencer notre application nous partirons de rien (from scratch) en nous efforcant de suivre les meilleures pratiques (best practices) d'Angular.

Démarrer avec Angular
Démarrer avec Angular

Vous n'avez pas le temps de lire ce guide en entier,
Téléchargez le maintenant il est gratuit

Il vous suffira de quelques secondes

Oui ! je veux télécharger mon guide gratuit

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

    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 dispose d'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

  • Node.js
    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
Installation des outils nécessaires pour Angular

Installation de Node.js

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

A ce propos Angular, React et Vuejs ont besoin tous trois de Node.js.

Le site officiel c'est ici https://nodejs.org/fr/ 

Voilà ce qu'il nous dit:
Node.js 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

Node.js est ainsi le point central qui va permettre d'exécuter des programmes écrits en javascript côté serveur.

Node.js et Angular

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.
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 https://nodejs.org/fr/download/

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 12.16.0 LTS
  • npm (node package manager) version 6.13.7

Il s'agit d'une installation classique.

  • Choisissez votre système d'exploitation.
  • Téléchargez le programme et exécutez le.

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

# Vérification de la version de Node.js et de npm (méthode 1)
node --version
npm --version

# Vérification de la version de Node.js 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 Node.js fonctionne ?

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

Comment marche Node.js et Angular

Allons sur Wikipedia https://fr.wikipedia.org/wiki/Node.js
Testons le programme d'exemple "un Hello Word" qu'il nous propose.

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`));

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

Pour plus de détails, je vous conseille le tutoriel suivant.
Installer Node.js 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
https://github.com/johnpapa/angular-styleguide

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à

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

L'installation est simple comme celle de Node.js.

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.

Git Angular et les versions

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 https://git-scm.com/

L'installation est accessible ici https://git-scm.com/download/win

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

Angular CLI l'homme orchestre

Et autant utiliser la version la plus récente.

  • Angular CLI version 9.0.5
  • Angular version 9.0.5

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

La procédure d'installation est détaillée sur le site officiel d'Angular https://angular.io/cli
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 node.js

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@9.0.5

# 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

Initialisation avec Angular CLI

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 https://cli.angular.io/
Et si vous voulez avoir la liste des commandes Angular CLI https://github.com/angular/angular-cli/wiki

Le site Angular CLI

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 execute 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
http://localhost:4200

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.

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

https://github.com/manfredsteyer/ngx-build-plus

 

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.

package.json
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
Etape 3

Mise à jour du package.json


Node.js est la plateforme pour développer notre application.
Node.js 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.

Mise à jour du package.json

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
https://github.com/angular/angular/releases

Le calendrier des mises à jour est ici
https://angular.io/guide/releases#release-schedule

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

Les releases Angular

Remarquez que les versions 4, 5 et 6 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.

Les mises à jour Angular

Comment fait on ?

Utilisons npm (Node Package Manager) le gestionnaire de librairies de Node.js.
La documentation complète est ici https://docs.npmjs.com/cli/outdated.html

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 package.json
Pour chaque dépendance indiquée supprimez le caractère ~ ou ^
Par exemple remplacez

  • "rxjs": "~6.5.4",
  • "tslib": "^1.10.0",

par

  • "rxjs": "6.5.4",
  • "tslib": "1.10.0",   

Puis réinstallez les dépendances avec npm install
Vous comprendrez pourquoi plus loin dans le paragraphe c'est parti pour la mise à jour.


Après cela dans le cas de notre application le résultat sera le suivant.

# Vérification des dépendances disponibles
npm outdated

Mise à jour angular avec npm outdated

Résultats de la mise à jour !

Si je mets à jour le fichier package.json 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ésoud votre problème avec la mise à jour suivante.
    De toute façon ce n'est 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.

Mise à jour angular : Résultat des courses

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.
 

Un prototype Angular

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 (authentication/Route guard/Role guard/Jwt)
  • 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.
https://github.com/ganatan/angular-example-seo

 


Donc c'est parti pour la mise à jour

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

Le fichier package.json 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 Node.js.

Concernant les dépendances et leur version la documentation npm est la suivante
https://docs.npmjs.com/files/package.json#dependencies

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 obterons 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 package.json avec les dernières dépendances

Mise à jour du fichier Package.json pour Angular

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

- Toutes les dépendances peuvent être mises à jour à l'exception de typescript

  • Angular 9.0.5 accepte TypeScript> = 3.6.4 and <3.8.3
  • Nous indiquerons Typescript version 3.7.5

- Modifiez le fichier package.json comme suit puis executez le script
npm install

package.json
  "dependencies": {
    "@angular/animations": "9.0.5",
    "@angular/common": "9.0.5",
    "@angular/compiler": "9.0.5",
    "@angular/core": "9.0.5",
    "@angular/forms": "9.0.5",
    "@angular/platform-browser": "9.0.5",
    "@angular/platform-browser-dynamic": "9.0.5",
    "@angular/router": "9.0.5",
    "rxjs": "6.5.4",
    "tslib": "1.11.1",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.900.5",
    "@angular/cli": "9.0.5",
    "@angular/compiler-cli": "9.0.5",
    "@angular/language-service": "9.0.5",
    "@types/node": "13.9.0",
    "@types/jasmine": "3.5.8",
    "@types/jasminewd2": "2.0.8",
    "codelyzer": "5.2.1",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "2.1.1",
    "karma-jasmine": "3.1.1",
    "karma-jasmine-html-reporter": "1.5.2",
    "protractor": "5.4.3",
    "ts-node": "8.6.2",
    "tslint": "6.0.0",
    "typescript": "3.7.5"
  }

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.

Tests unitaires et end-to-end avec Angular

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.
Comme toujours c'est plus facile à dire qu'à faire.
 

Angular et les tests : facile ou difficile

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 ?

Cycle en V versus Agile

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 Agile la plus utilisée actuellement est la méthode Scrum.

Ci dessous un petit historique des vingt dernières années.

Origine de la méthode Agile

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 test unitaires
  • Les test e2e ou end to end


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

Architecture Angular et Tests unitaires

Les tests avec Angular

Sans rentrer dans les détails Angular nous simplifie la vie avec les outils suivants.

Les tests unitaires utilisent

  • Karma
  • Jasmine

Les tests end-to-end utilisent

  • Protractor

Pour les lancer on utilise les scripts correspondants contenus dans le fichier Package.json

Remarque:
Vous devez utiliser chrome dans sa version 80 minimum.

# Tests unitaires
npm run test

# Tests end to end
npm run e2e

Modifier et vérifier

Effectuons le test simple de modification et de debuggage et le test de contrôle de code source.

- Debugage.
Toute modification entraine une recompilation du code.

Par exemple Modifier le fichier app.component.html
<p>Modifications : Here are some links to help you get started:</p>


La compilation est alors éxécutée automatiquement et le navigateur se réactualise.

Remarque :
Le fichier favicon.ico 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
http://localhost:4200/

# Effectuer des modifications

Vérification du code

- La commande ng lint execute l’analyse statique du code source TypeScript.
Angular utilise l’outil TSLint accessible à cette adresse https://palantir.github.io/tslint/

# Test du code source
npm run lint

Tests angular avec TSLint

Déploiement

Comme nous l'avons vu précédemment le fichier package.json 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 tutoriaux suivants nous permettront de déployer l'application sur un serveur ubuntu

 Installer un serveur Ubuntu chez OVH
 Installer Angular sur un serveur Ubuntu

 

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.

Notre Code Source Angular

Utiliser Git avec le 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 https://en.wikipedia.org/wiki/GitHub 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
https://github.com/ganatan/angular-example-starter

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.

Star sur Github et Angular

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 https://github.com/ganatan/angular-example-starter.git

# Allez dans le répertoire qui a été créé
cd angular-example-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
http://localhost:4200/

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 oeuvre 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


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


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


Le code source de cette application finale est disponible sur GitHub
https://github.com/ganatan/angular9-app

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos 4 guides complets
Démarrez avec angular CLI
Gérez le routing
Appliquez le Lazy loading
Intégrez Bootstrap

Ganatan site Web avec Angular