Démarrer une Application Web avec Angular CLI 8

14/11/19 dannyEnglish Version

Qu’allons nous faire ?

Nous allons réaliser une Application Web.
Nous utiliserons le framework javascript Angular version 8.2.14

Ce tutoriel correspond à l'étape 1 qui nous permettra d'obtenir une  Progressive Web App.
Nous partirons de rien (from scratch) en nous efforcant de suivre les meilleures pratiques (best practices) d'Angular.
Notre guide Angular décrit chacune des étapes permettant de réaliser cette application.

Tous les sources créés sont indiqués en fin de tutoriel.

L' application est à l'adresse suivante 


Comment le faire ?

Le résumé de ce que nous allons faire

  • Avant de Commencer
    Nous parlerons frontend et Backend et pourquoi choisir Angular.
  • Les outils nécessaires
    Tout ce que nous utiliserons pour créer notre application
  • Initialisation du projet
    En utilisant Angular CLI
  • Visual Studio Code
    Pourquoi et comment utiliser cet éditeur de code
  • Mettre à jour le projet
    Verifier les dépendances utilisées.
  • Effectuer les Tests
    Unitaires et end to end.
  • Déploiement
    Comment déployer l'application sur internet.
  • Code source
    Le code complet du projet sur github.

Avant de commencer

Le développement d'une application Web se divise en deux parties

  • la partie front-end :
    Il s'agit de la partie visible par l'utilisateur, celle que l'on voit dans le navigateur.
    Elle utilise en général les langages CSS, HTML et Javascript.
    Elle concerne le design du site web, les éléments graphiques, l'UX, l'UI.
    Les outils et les techniques de développement y sont en perpétuelle évolution.
     
  • la partie back-end ;
    Elle correspond à la partie non visible.
    Elle est souvent opposée à la partie Frontend qui est la partie visible de l'iceberg.
    Elle concerne des éléments comme le serveur, la base de données, l'administration, la sécurité ...

L'exemple classique mais simple d'une boutique va nous permettre de comprendre le concept.
Imaginons un video-club (concurrencé par la VOD il n'en existe presque plus malheureusement)

En tant que client

  • Nous entrons dans la boutique pour choisir nos DVD et être conseillé par notre vendeur préféré, c'est le front-end.
  • Nous n'entrons jamais dans l'arrière boutique où est géré le stockage et l'approvisionnement des DVD, c'est le back-end.


Les outils pour développeur front-end sont extrêmement nombreux.
Difficile dans ces conditions de savoir quel framework choisir.

Citons quelques Frameworks javascript parmi les connus

  • Ember
  • Backbone
  • Meteor
  • Polymer

Mais depuis quelques années 3 frameworks Javascript dominent sans partage le développement frontend.

  • React (Créé par Facebook le 29 mai 2013)
  • Vue (Créé par Evan You le 11 Février 2014)
  • Angular (Créé par Google le 14 Septembre 2016)


Angular est un framework javascript open source basé sur TypeScript.
Il a été développé par l'équipe du projet Angular chez Google.
Angular a succédé à AngularJS dont il est une réécriture complète.

Les versions successives ont été les suivantes :

  • AngularJS version 1.0.0 est sortie en juin 2012.
  • AngularJS version 1.7.5 est sortie en octobre 2018.
  • AngularJS version 1.7.8 est sortie en mars 2019.
  • AngularJS 1.7 LTS Period prendra fin le 30 juin 2021.
     
  • Angular 2.0.0 est sortie le 14 septembre 2016.
  • Angular 4.0.0 est sortie le 23 mars 2017.
  • Angular 5.0.0 est sortie le 1er novembre 2017.
  • Angular 6.0.0 est sortie le 4 mai 2018.
  • Angular 7.0.0 est sortie le 18 Octobre 2018.
  • Angular 8.0.0 est sortie le 29 Mai 2019.

Les outils nécessaires

Les outils que nous utiliserons pour réaliser ce didacticiel sont

  • Angular version 8.2.14
  • Angular CLI version 8.3.19
  • Visual studio code version 1.40.1
  • Typescript version 3.5.3
  • Node.js version 12.13.0 LTS (Long Term Support)
  • npm (node package manager) version 6.12.0

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

Avant de commencer à utiliser Angular il nous faudra au préalable installer Node.js et npm.

Le tutoriel suivant nous explique comment faire
Installer nodejs sous Windows ou Ubuntu


Initialisation du projet

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 préconisées par l'équipe d'angular.

Nous utiliserons pour cela l'un des outils mis à notre disposition par l'équipe Angular.

Cet outil se nomme Angular CLI (Command Line Interface)
Angular CLI est un outil pour initialiser , développer et maintenir des applications Angular.

La procédure d'installation est détaillée sur le site officiel d'Angular https://angular.io/cli

- 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
  • Installer angular-cli en global sur votre poste.
    Lors de l'installation vous pourrez accepter ou non de partager des données anonymes avec l'équipe Angular.
    La réponse par défaut est Non.
    Vous pouvez installer une version spécifique d'angular ou installer par défaut la dernière disponible.
  • Vérifier la version installée.
# 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@8.3.19

# Test de version installée
ng --version

La documentation relative aux commandes Angular CLI est la suivante
https://github.com/angular/angular-cli/wiki

La commande que nous allons utiliser est ng new ou ng n

- Générer le  projet (dans notre exemple nous choisirons arbitrairement angular-starter)

  • 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

- Se positionner dans le projet
- Exécuter le projet

# 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 éxecute le projet sur un port par défaut (4200).

Il ne reste qu'à tester le fonctionnement dans un navigateur en lancant l'url suivante.

# Tester
http://localhost:4200

Visual studio code

Il existe de nombreux éditeurs de code pour développer une application.
Parmi les plus célèbres nous pourrions citer

  • Atom
  • Sublime Text
  • Brackets
  • 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.

Après avoir lancer VS code ouvrez un dossier dans le répertoire angular-starter
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électionner Afficher/Terminal) pour éxécuter les scripts suivants

  • npm run  start : Execute l'application en mode développement.
  • npm run  build : Compile l'application dans le répertoire dist.
  • npm run  test : Execute les tests unitaires en utilisant le framework Karma.
  • npm run  lint : Execute l'analyse de code avec TSLint.
  • npm run  e2e : Execute les tests end-to-end avec Protractor.

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.

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

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

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

Mises à jour

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

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

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

  • Angular 8.2.14 accepte TypeScript> = 3.4.0 and <3.6.0
  • Nous indiquerons Typescript version 3.5.3

- Modifier le fichier package.json comme suit puis executer le script
npm install

package.json
  "dependencies": {
    "@angular/animations": "8.2.14",
    "@angular/common": "8.2.14",
    "@angular/compiler": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/router": "8.2.14",
    "rxjs": "6.5.3",
    "tslib": "1.10.0",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.803.19",
    "@angular/cli": "8.3.19",
    "@angular/compiler-cli": "8.2.14",
    "@angular/language-service": "8.2.14",
    "@types/node": "12.12.7",
    "@types/jasmine": "3.4.6",
    "@types/jasminewd2": "2.0.8",
    "codelyzer": "5.2.0",
    "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.0",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.2",
    "protractor": "5.4.2",
    "ts-node": "8.5.2",
    "tslint": "5.20.1",
    "typescript": "3.5.3"
  }

Tests

Effectuons le debuggage, les tests et le passage en production.

- Debugage.
Toute modification entraine une recompilation du code.

# Executer
npm run start

# Tester
http://localhost:4200/

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. Songez à en mettre un correct.
Par exemple récupérez celui de ce dépôt


- Modifier le fichier package.json comme suit puis executer le script
- Tests à effectuer 

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

# Analyse de code
npm run lint

# Tests unitaires
npm run test

# Tests end to end
npm run e2e

- Compilation

# Compiler
npm run build


Déploiement

Les tutoriels suivants nous permettront de déployer l'application sur un serveur ubuntu

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


Commentaires 2
User Image
danny ganatan
Merci Stéphan pour ce commentaire,

Dans quelques jours une nouvelle version sera disponible avec un nouveau dépôt github et plus de détails
sur la partie Frontend et Backend.
Notamment sur la gestion de base de données (avec une API en postgreSQL).
J'attendrai alors vos commentaires.

cordialement




User Image
Stéphan
Bonjour, tout d'abord merci de votre initiative pour Application Web avec Angular CLI 8.
Dans la parti backend plus précisément dans la base de donnée, si possible vous pouvez donner plus des détails ou des tuto pour mieux comprendre... ( j'utilise : Angular CLI: 8.1.1 et
Node: 10.16.0)
merci d'avance!!!


Laissez un commentaire

Votre avis
Cette adresse ne sera pas publiée