====== Introduction à NodeJS & Angular ======


[[ https://nodejs.org/en/ | 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.

[[ https://angular.io | Angular ]] est un //framework web// (open-source aussi) utilisé pour la partie client de PeerTube. Il est basé sur [[txs:contrib:peertube_a18:concepts_typescript|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 [[ https://github.com/Chocobozzz/PeerTube/blob/develop/support/doc/development/client/code.md | 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: 
   * https://angular.io/guide/quickstart
   * https://angular.io/tutorial/toh-pt0

==== 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
<code> npm run ng -- serve --hmr --configuration hmr --host 0.0.0.0 --disable-host-check --port 3000 </code>