Introduction à NodeJS & Angular

Node.js est un environnement d'exécution (run-time environment) JavaScript open-source. Il permet d'exécuter du code JavaScript (et donc TypeScript) en dehors du navigateur.

Angular est un framework web (open-source aussi) utilisé pour la partie client de PeerTube. Il est basé sur TypeScript et ne doit pas être confondu avec AngularJS,qui est la première version, basée sur JavaScript et encore maintenue. Angular étant écrit en TypeScript, il utilise Node.js pour pouvoir s'exécuter.

Concept de framework web

Un framework web permet de développer, compiler, et déployer des applications web de manière standard. L'organisation des composants d'une application Angular changera très peu d'une application à une autre. Dans le cas de PeerTube, tous les composants Angular sont dans le dossier client/src/. Une description détaillée des contenus de chaque fichier est disponible sur la documentation du code client .

Fonctionnement d'Angular

Angular prend en charge toutes les étapes allant de la création au déploiement d'une application. La commande ng new my-app permet de créer la structure de base d'une application. Mais Angular permet aussi de servir l'application. La commande cd my-app && ng serve –open lancera le serveur, et surveillera les fichiers. Dès qu'une modification est faite, Angular recompilera l'application.

Pour plus de détails, le site d'Angular propose des tutoriels qui permettent de comprendre rapidement les concepts de base:

Foncctionnement de Node.JS (npm) + Angular (ng) pour PeerTube

On a vu qu'on utilise la commande npm run pour lancer PeerTube. Celle-ci permet d'exécuter soit un script du dossier scripts/, soit un module node préinstallé. Lorsqu'on exécute npm run dev, npm exécutera le script scripts/dev/index.sh, qui lui-même fera un appel aux scripts scripts/watch/client.sh et scripts/watch/server.sh. Par la suite, pour la partie client, scripts/watch/client.sh fera appel à ng avec la ligne

 npm run ng -- serve --hmr --configuration hmr --host 0.0.0.0 --disable-host-check --port 3000 
  • txs/peertube-a18/concepts_angular.txt
  • Dernière modification: 2019/05/13 15:42
  • (modification externe)