I► Angular

Dans cet article, nous allons étudier le FrameWork ANGULAR VII.

I – Angular CLI :

Nous aurons besoin de node.js. Je vous renvoie à l’article consacré à NODE.JS.
Vérifions nos versions :

Nous allons maintenant installer ANGLUAR CLI (Command LIne) , un puissant outil qui permet de créer des projets de type Angular :

Pour vider le cache, désinstaller les anciennes versions et mettre à jour ANGULAR ==>

Nous allons créer un premier projet grâce à la commande ng spécifique à Angular CLI et nous obtenons cette arborescence :

Nous allons lancer l’instance du serveur :

L’option serve démarre le serveur, liste tous les fichiers (éventuellement modifiés) et construit l’application (build)
L’option –open ouvre automatiquement le navigateur par défaut avec le port d’écoute de l’application.

Nous allons nous intéresser à notre premier composant, le composant racine nommé app-root.

Mais tout d’abord qu’est ce qu’un composant ?

Les applications ANGULAR sont développées à partir de composants. Un composant ANGULAR est construit avec :

un template HTML
un composant de type class qui contrôle l’affichage du composant

Voici un exemple de la structure d’une App. Angular : Cliquez ici !

II – Mise en place d’un projet quickstart

Nous allons récupérer le quickstart angular github.com/angular/quickstart sur github
Création d’un dossier 02App
Le fichier package.json nous indique toutes les dépendances node requises pour ce projet
npm install les installe

Dans src/app on trouve 1 : main.ts:

Main nous indique que l’on va booter sur un certain module et que l’application démarrera sur ce module en particulier appModule

Un module peut correspondre à une partie importante de de notre appli web : exemple SAV Commandes

Quoiqu’il en soit il y a toujours un module principal qui est démarré appModule

On trouve également 2 : app.module.ts

appModule.ts nous dira quel composant racine (principal) sera démarré en premier en l’occurence appComponent

On trouve également 3 : app.component.ts

appComponent décrit le composant principal

Puis nous démarrons l’appli avec npm start (utilisé dans beaucoup de technologies javascript actuelles)

tsc est le compilateur TypeSctipt en mode watch (-w) pour recharger la page au moindre changement. -p est l’option –path

npm start transpile le code typeScript en javascript ! De ce fait nous retrouvons dans l’arborescence de notre projet beaucoup de fichier .js et des fichiers de mapping par exemple nous avions app.component.ts et bien nous avons en plus app.component.js