ANGULAR 7

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