Angular est un framework [1] open-source, compatible JavaScript/Dart, développé par Google afin de créer des applications sur une seule page, dynamique et interactive. Il utilise une syntaxe plus flexible que son prédécesseur, AngularJS, alimenté par la richesse du langage ES2015 [2].

Angular multiplie les composants. « Plus de modularités vous permettra d’avoir une application flexible et facile à maintenir ».

INSTALLATION DE NODEJS ET D’ANGULAR/CLI :
Google nous propose un outil clé en main pour réaliser les tâches de développement les plus courantes : Angular/Cli, projet open-source ember CLI.
Télécharger NodeJS sur votre poste de travail (https://nodejs.org/en).

Dans votre console, taper les commandes suivantes:
① « node -v » pour connaître la version de NodeJS ;
② « npm install npm@latest -g », pour mettre à jour node package manager ;
③ « npm install -g @angular/cli@latest », pour initier le squelette du projet ;
④ « ng new « nom-de-votre-projet » », pour créer le dossier source de votre nouveau projet ;
⑤ « ng g component my-component », pour créer le dossier source de vos composants ;
⑥ « ng g directive my-directive », pour créer le dossier source de vos directives ;
⑦ « ng g pipe my-pipe », pour créer le dossier source de vos filtres ;
⑧ « ng g service my-service », pour créer le dossier source de vos services ;
⑨ « ng g class my-class », pour créer le dossier source de vos classes ;
⑩ « ng g interface my-interface », pour créer le dossier source de vos interfaces ;
⑪ « ng g enum my-enum », pour créer le dossier source de vos valeurs énumérées ;
⑫ « ng g module my-module », pour créer le dossier source de vos modules.

INSTALLATION DE l’IDE VISUAL CODE STUDIO :
Télécharger l’IDE Visual Code Studio sur votre poste de travail (https://code.visualstudio.com).

A QUOI RESSEMBLE LE PACKAGE JSON ?
① Le fichier « package.json » :
Le fichier de configuration « package.json » permet de définir les ressources nécessaire à votre projet, notamment Angular ou d’autres librairies, comme Bootstrap. Il favorise le travail en équipe en indiquant les bases communes. Un exemple de code de ce fichier est disponible à l’adresse suivante : https://angular.io/docs/ts/latest/quickstart.html.

« « dependencies »:{ » répertorie les ressources nécessaire à un projet.

Au sein de ce script, vous trouverez :

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "

– « start » va permettre d’exécuter une commande ;
– « tsc » sert à compiler la syntaxe Typescript vers Javascript, interprété par le navigateur ;
– « && concurrently » indique le lancement d’une commande simultanément à la première ;
– « npm run tsc:w » lance votre application.

② Le fichier tsconfig.json :
Ce fichier est nécessaire à la compilation du projet.
« « target »: « es5 » » signale que la cible est ES5, le langage hérité avec Typescript.

③ Le fichier typing.json :
Ce fichier vient en support pour d’autres librairies.

④ Le fichier systemjs.config.js :
Ce fichier permet de configurer tous les modules, notamment le « node_modules », combinés avec les modules d’Angular, pour pouvoir exécuter votre application.

DEUX TYPES DE MÉTHODES DE COMPILATION :
– AOT (« ahead-of-time ») : L’application compile au moment de la construction avec des optimisations.
– JIT (« just-in-time ») : L’application compile dans le navigateur, à l’exécution, que l’application charge. C’est l’approche de développement le plus courant.

[EN COURS D’ÉCRITURE]

Notes :

[1] Un framework sert à structurer votre code, créer les fondations ainsi que les grandes lignes de tout ou d’une partie d’un logiciel. Composé de cadres, d’un conteneur (programme qui implémente l’inversion du contrôle, le pattern IoC) et de plugins (extension), il permet de spécialiser vos applications.

[2] Anciennement connu comme ECMAScript ES6, il intègre de nouvelles façons de déclarer ces variables grâce à « let » et « const ».