Avec ce tutoriel, je vais vous montrer comment utiliser Angular et Highcharts pour créer une simple page web qui génère un graphique. Vous pouvez utiliser cette méthode pour vos projets Angular de tableaux de bord ou tout autre applications faisant appel à des graphiques pour visualiser des données.

Dans un précédent billet, je vous avais présenter comment créer votre premier projet Angular. Nous allons utiliser la même méthode en passant par la ligne de commande. Je vous invite à consulter mon précédent billet pour vous assurer que vous avez bien les prérequis d’installer sur votre machine (npm et node).

0. Cas d’usage

Dans le cadre d’un projet permettant de présenter des indicateurs de suivi de pilotage d’activité, je cherchais à créer un tableau de bord avec des visuels permettant de suivre les évolutions de plusieurs indicateurs pour animer des instances COPRO et COPIL. J’ai testé plusieurs bibliothèques permettant de créer des graphes et mon choix s’est arrêté sur Highcharts.

Après avoir expérimenté une première version de ce tableau de bord en version HTML, CSS et JavaScript, j’ai tenté d’implémenter Highcharts avec Angular. Voici le partage des étapes que j’ai utilisé pour afficher un graphique avec Angular dans une page web.

1. Créer le projet Angular

Rendez-vous dans le dossier dans lequel vous souhaitez créer votre projet pour configurer l’environnement de développement. D’abord, nous installons l’Angular CLI pour utilise la ligne de commande :

sudo npm install -g @angular/cli

Ensuite nous créons le projet Angular appelé dans mon exemple « angular-highcharts » :

ng new angular-highcharts

Une fois le projet créé, nous entrons dans le dossier contenant le projet :

cd angular-highcharts/

Pour tester le projet, nous allons lancer le serveur avec l’option permettant de lancer le navigateur web par défaut sur votre machine pour visualiser le projet :

ng serve --open

Le serveur web local s’ouvre sur le port 4200 et bingo votre projet apparait sous forme d’une page de test par défaut :

2. Adapter le projet Angular

Dans le cadre de ce tutoriel, nous allons créer un composant permettant d’afficher le graphe mais libre à vous d’organiser votre projet différemment.

Maintenant, créons le composant que j’ai appelé « view-graph » en utilisant cette commande :

ng generate component view-graph

Le nouveau composant, view-graph, se trouve sous /src/app/ et se compose de quatre fichiers différents :

• .CSS : Tous les CSS pour les styles doivent aller dans ce fichier.
• .HTML : Ce fichier comprend le modèle HTML et toutes les balises HTML.
• TS : Ce fichier comprend tout le code application, la logique métier, les appels API et la manipulation des données.
• SPEC.TS:Tous les tests unitaires vont dans ce fichier.

Nous modifions « app component » pour appeler le nouveau composant « view-graphe ».

Pour cela nous retirons le contenu par défaut de app/app.component.html et ajoutons le nouveau composant :

<div id="main-head" style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
  <app-view-graph></app-view-graph>
</div>
<router-outlet></router-outlet>

3. Intégrer Highcharts au projet Angular

Installons maintenant dans notre projet Angular le module Highcharts en lançant la commande :

npm install highcharts

Modifions view-graph.component.ts pour importer la librairie Highcharts :

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

declare var require: any;


@Component({
  selector: 'app-view-graph',
  templateUrl: './view-graph.component.html',
  styleUrls: ['./view-graph.component.css']
})
export class ViewGraphComponent implements OnInit {
  public options: any = {
    Chart: {
      type: 'area',
      height: 700
    },
    title: {
      text: 'Evolution de la population'
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      tickmarkPlacement: 'on',
      title: {
          enabled: false
      }
  },
    series: [{
      name: 'Asia',
      data: [502, 635, 809, 947, 1402, 3634, 5268]
  }, {
      name: 'Europe',
      data: [163, 203, 276, 408, 547, 729, 628]
  }, {
      name: 'America',
      data: [18, 31, 54, 156, 339, 818, 1201]
  }]
  }

  constructor() { }

  ngOnInit() {
    Highcharts.chart('container', this.options);
  }

}

N’oublions pas de modifier view-graph.component.html pour ajouter une div permettant d’afficher le graphe sur la page web :

<p>view-graph works!</p>

<div id="container"></div>

Il ne reste plus qu’à visualiser le résultat dans le navigateur :

Félicitations ! Si vous avez suivi toutes les étapes de ce tutoriel, vous pouvez maintenant créé une application Angular affichant un graphique qui exploite la puissance de Highcharts. N’hésitez pas à tester d’autres type de graphiques car le choix est très vaste et vous trouverez très certainement celui qui répondra à vos besoins.

J’espère que ce projet vous aidera à mieux comprendre comment construire une application Angular et comment intégrer la bibliothèque Highcharts. N’hésitez pas à ajouter vos commentaires ou questions ci-dessous, je me ferai un plaisir d’y répondre.

Dans cet article, je vous propose de découvrir les bases du framework web Angular en vous montrant comment créer votre premier projet.

Après une petite introduction à Angular et les quatre piliers de sa conception, j’ai choisi d’utiliser l’Interface en ligne de commande (CLI) et la commande ng serve pour tester le projet Angular.

Présentons Angular ?

Je vous propose de commencer par une petite introduction à Angular histoire de planter le décor.

Angular est né en 2009 dans les locaux de Google. Shyam Seshadri proposa un framework fait maison initialement appelé AngularJS.
Vous rencontrerez cette dénomination pour les applications développées avec les versions 1 et 2 du framework.
Ne cherchez pas la version 3 d’Angular, Google a purement décidé de passer directement à la version 4 en perdant au passage le suffixe JS.

Qu’est-ce qu’Angular ?

Angular est un framework de développement structuré et puissant, conçu pour construire des applications web dynamiques et efficaces. Utilisant TypeScript comme langage principal, il offre aux développeurs un environnement cohérent et optimisé pour le développement d’applications à page unique (SPA).

Angular se distingue par son système de composants, qui encourage la modularité et la réutilisation du code, ainsi que par son architecture qui favorise une séparation claire entre la logique de présentation et la logique métier. Avec un ensemble riche de fonctionnalités telles que le data-binding bidirectionnel, l’injection de dépendances, et une suite complète pour le développement d’applications, Angular aide à réduire le temps de développement tout en améliorant la qualité et la maintenabilité du code.

De plus, sa communauté active et ses mises à jour régulières garantissent que le framework reste à la pointe de la technologie et des meilleures pratiques de développement. En somme, Angular est un choix robuste pour les entreprises et les développeurs cherchant à créer des applications web modernes et évolutives.

4 concepts clés d’Angular

Angular est construit autour de concepts clés et bonnes pratiques du développement web actuel :

• Architecture MVC (Modèle-Vue-Contrôleur) : architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions possibles sur ces données (Contrôleur) ;
• Data Binding :il s’agit d’un mécanisme permettant de lier la partie vue à la partie logique c’est-à-dire que les éléments de votre code HTML seront liés à votre contrôleur JavaScript ;
• Injection de dépendances : les modules que vous développerez n’auront plus à se soucier d’instancier leurs dépendances ;
• Manipulation du DOM grâce aux directives : la manipulation du DOM devient plus facile à maintenir et à tester que du pur JavaScript.

Prérequis pour démarrer votre projet Angular

• Node 4.x.x ou supérieur ;
• Npm 3.x.x ou supérieur.

Si vous avez déjà une installation de Node, vérifiez que vous utilisez au moins node 4.x.x et npm 3.x.x ou supérieur en exécutant dans le terminal/console :

node -v

et

npm -v

A vos claviers : premier projet Angular

Étape 1. Configurer l’environnement de développement

Pour la grande majorité des actions, vous allez utiliser la ligne de commande dans le terminal (pour MacOS et Linux) ou la console (pour Windows). vous allez tout d’abord installer l’Angular CLI. Cet environnement est incontournable pour créer les composants et services de votre application.

Pour installer l’Angular CLI :

npm install -g @angular/cli

Sous Mac OS et Linux vous devrez peut-être faire précéder la commande du terme « sudo » vous permettant d’élever vos droits (passer en mode root). Votre mot de passe vous sera demander pour poursuivre l’exécution de la commande.

Étape 2. Créer un nouveau projet

Ouvrez une fenêtre de terminal et créez un nouveau projet et un squelette d’application en exécutant les commandes suivantes:

ng new mon-application-angular

Cette commande créé un squelette d’application Angular.

Vous devez choisir le format de feuille de style que vous souhaitez utiliser en utilisant les flèches haut ou bas pour vous positionner devant le format puis cliquer sur Entrer.

Le versionning via Git est également initialisé par la même occasion 😉

Mais si vous souhaitez créer directement un projet Angular utilisant SASS, vous devez exécuter la commande suivante :

ng new mon-application-angular --style=scss

Lancez votre éditeur de code préféré (ici VS Code) et ouvrez le dossier de votre application créée sur le bureau de votre PC ou Mac.

Vous pouvez vérifier la structure des dossiers par défaut :

Vous découvrez un fichier styles.css dans lequel vous pourrez écrire vos styles.

Étape 3: Tester le projet

Rendez-vous dans le répertoire du projet en utilisant la commande :

cd mon-application-angular

Une fois que vous êtes dans votre dossier hébergeant votre application Angular, exécutez la commande suivante :

ng serve --open

La commande ng serve lance le serveur, surveille les fichiers et reconstruit l’application lorsque vous modifiez votre code. Vous n’avez pas besoin de rafraichir la page qui s’affiche dans votre navigateur : c’est automatique 😉

Voici ce qu’affiche ma console lors de l’exécution de ng serve :

Ouvrez un navigateur sur http://localhost:4200/

L’application nous accueille avec cet écran :

J’espère que cette petite introduction vous aidera à créer votre premier projet Angular.

Réagissez en laissant un commentaire ci-dessous.