« Hello World » SUR ANGULAR CLI

Angular est un framework très populaire et très complet reposant sur un système de composant basé sur du TypeScript. Le framework est basé sur une architecture MVC et permet de séparer les actions dans un fichier de configuration TypeScript, le visuel dans le Template HTML et le style dans un fichier SCSS qui est une sorte de CSS amélioré…

Tout au long de ce tutoriel, nous réaliserons un « Hello World » étape par étape.

Installation des dépendances

Avant tout, pour réaliser un projet angular, aussi basique qu’il soit, il nous faut un minimum de configuration :

  1. Tout d’abord il nous faut un Environnement de Développement Intégré (IDE).
  • Ce cours ne parlera pas de l’installation ou de la configuration d’un IDE
  1. Ensuite il vous faudra installer Node et son Node Package Manager (npm)
  • Déjà pour installer nodeJS, il faut simplement se rendre sur le site de nodeJs et choisir la version voulu en fonction de son OS
  • Cette installation vous donne accès donc au Node Package Manager qui vous permettra d’installer par la suite le CLI d’angular

         3. Et enfin, pour compléter le tableau, il faudra installer le Command Line Interface (CLI) d’angular avec la commande :

npm install -g @angular/cli
  • Le i est un raccourci pour install et le -g dit à npm que vous voulez installer ce package de manière globale sur votre PC
  • Pour vérifier que l’installation a été bien faite, vous pouvez taper la commande : ng v

                        Pour afficher les détails de la version installée, la commande ng correspond au CLI d’angular.

!!! biensûr, la commande de création dépends de la version en cours c’est-à-dire que lorsque j’ai installé angular-cli, la version en cours était, comme vous l’avez vu plus haut le 15.0.0, donc vous n’aurez potentiellement pas la même version que la mienne et c’est pareil pour Node.

Mais si vous voulez néanmoins avoir une version spécifique, vous pouvez utiliser la commande :

npm install -g @angular/cli@7

Comme vous le voyez donc, il s’agit de la version 7 d’angular-cli dans ce cas de figure

Nous pouvons enfin entrer dans le vif du sujet !!!

Contruisons notre premier projet angular

Pour créer un projet angular, il faut utiliser la commande :

ng new helloworld

Si le CLI vous demande si vous voulez ajouter du routing, repondez Non(n) car on en aura pas besoin ici.

Et ensuite on vous demandera de choisir votre langage de style :

Angular vous donne le choix parmi plusieurs options et vous devez choisir le scss. Je pense que tout le monde connais le css mais scss un peu moins J . le scss est juste une version un peu plus amélioré du css et c’est ce qui est utilisé fréquement sous angular.

Vous devriez avoir un écran similaire :

Une fois cette étape terminée, vous pouvez lancer votre IDE et vous devriez avoir cette arborescence :

Comme vous pouvez le voir, il y’a beaucoup de fichier et de dossier mais tout ce qui nous interesse c’est le dossier src plus precisément le dossier app de ce dernier :

Mais pour survoler rapidement quelques fichiers, on peut remarquer rapidement le fichier styles.scss qui contient le style de l’application depuis la racine et le fichier index.html contenant du html classique à l’exception de la balise app-root.

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Helloworld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Bon il est temps de lancer notre projet avec la commande ng serve sur le terminal de votre IDE, s’il en a un.

Une fois lancé, vous devez avoir cette écran au-dessus et par defaut angular nous fournit un serveur de développement au localhost 4200. Et une fois lancé, l’interface qui est affiché est le suivant :

Bizarre !!!

Tout à l’heure le fichier index.html ne contenait rien de spécial mais pourquoi cette interface bien garnit ??? et bah la réponse se trouve dans la balise app-root, qui comme son nom l’indique correspond à la racine de votre application ou plus précisément à l’AppComponent qui est le component (composant) racine de votre application. Angular sait qu’il doit remplacer cette balise app-root par le AppComponent.

Comme vu plus haut le AppComponent contient 4 fichiers :

  • Le fichier template component.html
  • Le fichier de style component.scss
  • Un fichier de configuration component.ts
  • Et un fichier module qui ne nous intéresse pas dans ce tutoriel

Si vous regardez votre app.component.html, vous pouvez vous rendre compte que tout le contenu de l’interface y est mais bah du coup, comment angular sais qu’il faut remplacer la balise app-root par le contenu html et la réponse se trouve dans la le fichier Typescript :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'helloworld';
}

Grâce au sélecteur angular fais une correspondance avec nôtre template et nôtre fichier de style.

Bon revenant sur nôtre hello world, il faut tout d’abord supprimer le contenu du template et écrire un « hello world » encadré dans un paragraphe.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

Et voilà le résultat sur le localhost :