Installation

Introduction

Au même titre qu’un électricien a besoin de tournevis et d’un ampèremètre, le développeur JavaScript ou Angular a besoin d’un certain nombre d’outils. Certains sont facultatifs, d’autres absolument indispensables.

Même si du code HTML, CSS et JavaScript peut être écrit dans n’importe quel éditeur de texte, un environnement de développement permet une écriture plus rapide, mieux optimisée et améliore considérablement le travail du développeur. Plusieurs environnements (appelés IDE pour Integrated Development Environment) existent sur le marché. À titre personnel, nous utilisons la suite d’outils JetBrains, mais son utilisation nécessite l’achat d’une licence. Dans cet ouvrage, c’est l’IDE Visual Studio Code de Microsoft qui sera utilisé. Il a l’avantage d’être gratuit et de posséder plusieurs modules utiles aux développements Angular.

Bien entendu, un navigateur web est absolument obligatoire pour voir le résultat de plusieurs heures de travail dans l’IDE. Dans cet ouvrage, Google Chrome sera utilisé puisqu’il possède un certain nombre de modules permettant de corriger les erreurs d’une application JavaScript. Dans l’idéal, plusieurs navigateurs différents permettent de tester...

Visual Studio Code

Visual Studio Code est un environnement de développement écrit par Microsoft au cours de l’année 2015 et entièrement gratuit. D’apparence épurée, il prend en charge nativement les langages HTML, CSS, TypeScript et JavaScript, ce qui en fait un choix judicieux pour tout développeur web sérieux.

Sa philosophie repose sur une approche modulaire. Une place de marché permet d’ajouter les composants jugés nécessaires par le développeur. Il est aussi possible d’en retirer. Il est très léger et rapide pour des applications simples, et extrêmement performant pour des applications plus complexes grâce aux modules supplémentaires.

git

git est un gestionnaire de versions décentralisé. C’est l’outil le plus utilisé dans le monde pour gérer un projet de développement.

Le code de l’application en cours de développement est stocké sur un serveur distant et sur chaque machine de chaque développeur.

Lena et Maïwenn, deux développeuses confirmées, souhaitent développer une application de gestion de figurines Harry Potter et The Walking Dead. Lena crée le projet et "pousse" le code source sur un serveur distant sur Internet. Maïwenn "tire" le code source du serveur distant vers sa machine personnelle. Il existe donc trois versions identiques du code situées à trois emplacements différents. La force de git repose sur le fait que Lena et Maïwenn peuvent travailler, chacune de leur côté, sur le projet et "pousser" leurs modifications sur le serveur distant. Dès lors qu’elles travaillent sur des fichiers différents, les trois exemplaires sont mis à jour. S’il existe des conflits, git demandera quel exemplaire est le bon.

git a été créé par Linus Torvalds qui n’est pas inconnu de la communauté mondiale puisqu’il est le père du noyau Linux et du manchot Tux.

node --version 

npm

npm est un gestionnaire de paquets. Il recense, installe et désinstalle les paquets et dépendances nécessaires. Partie intégrante de Node.js, il ne nécessite pas d’installation supplémentaire. Si la commande suivante retourne la version de npm installée, alors l’installation peut être considérée comme correctement effectuée.

npm --version 

npm utilise un fichier nommé package.json situé à la racine d’un projet. Celui-ci contient une description du projet, les paquets nécessaires et les dépendances, et la définition de certains scripts utiles.

Avant de générer ce fichier, une configuration minimum peut être utile afin de ne pas avoir à répéter inutilement des informations pour chaque nouveau projet.

npm propose deux façons de modifier sa configuration.

npm config edit 

npm set init.author.name Caliendo 
npm set init.author.email caliendo@yopmail.fr
npm set init.author.url http://www.caliendo.fr 

Pour démarrer un nouveau projet JavaScript, créer un fichier package.json est quasiment indispensable :

npm init 

Réinventer la roue...

npm install -g @angular/cli 

Structure de cet ouvrage

Cet ouvrage se divise en deux parties bien distinctes.

Ainsi, les sept premiers chapitres de cet ouvrage sont dédiés à JavaScript en tant que langage de programmation web. Chaque exemple ou démonstration est intégré à une page HTML, et le rendu effectué par un navigateur.

Les douze chapitres suivants sont consacrés à Angular. Chaque démonstration est indépendante afin d’illustrer un point précis du programme. Une application fil rouge développée au fur et à mesure de l’ouvrage permet la mise en pratique des concepts.

Chaque bloc de code possède en première ligne l’emplacement du fichier et respecte la convention typographique suivante :

<!-- C:\JavaScript\index.html --> 
<!DOCTYPE html> 
<html lang="fr"> 
<head> 
   <meta charset="UTF-8"> 
   <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> 
   <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
   <title>ENI Éditions</title> 
</head> 
<body> 
   <p>Un bloc de code</p> 
</body> 
</html> 

L’ensemble des exemples, démonstrations...