Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Application de Graphiques

Bonjour, aspirants programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde d'AngularJS et des applications de graphiques. En tant que votre professeur de science informatique de quartier, je suis ravi de vous guider dans cette aventure. Ne vous inquiétez pas si vous êtes nouveau en programmation - nous allons commencer par les bases et progresser pas à pas. Alors, prenez une tasse de café (ou votre boisson favorite), et plongeons dedans !

AngularJS - Chart Application

Qu'est-ce qu'AngularJS ?

Avant de commencer à créer des graphiques, comprenstons ce qu'est AngularJS. Imaginez que vous construisez une maison. AngularJS est comme le cadre qui vous aide à structurer votre maison efficacement. C'est un framework open-source basé sur JavaScript pour le développement d'applications web front-end qui rend plus facile la création d'applications à page unique dynamiques.

Caractéristiques Clés d'AngularJS

Fonctionnalité Description
Liaison des données bidirectionnelle Synchronise automatiquement les données entre le modèle et la vue
Injection de dépendances Aide à rendre les composants réutilisables, maintainables et testables
Directives Vous permet d'étendre HTML avec des attributs et des éléments personnalisés
Modèles Utilise HTML avec un marquage spécial comme modèles
Architecture MVC Suit le modèle Modèle-Vue-Contrôleur pour une meilleure organisation

Configuration de Notre Application de Graphiques

Maintenant que nous avons une compréhension de base d'AngularJS, mettons en place notre application de graphiques. Nous allons utiliser une bibliothèque appelée Chart.js en combinaison avec AngularJS pour créer des graphiques magnifiques et réactifs.

Étape 1 : Inclure les Fichiers Nécessaires

Tout d'abord, nous devons inclure AngularJS et Chart.js dans notre fichier HTML. Ajoutez les lignes suivantes dans la section <head> de votre HTML :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

Étape 2 : Créer le Module AngularJS

Maintenant, créons notre module AngularJS. Dans votre fichier JavaScript, ajoutez :

var app = angular.module('chartApp', []);

Cette ligne crée un module AngularJS nommé 'chartApp'. Pensez-y comme si vous créiez un nouveau livre de recettes pour notre aventure de création de graphiques !

Création de Notre Premier Graphique

Excité pour voir des merveilles visuelles ? Créons notre premier graphique - un simple graphique à barres montrant la popularité des langages de programmation.

Étape 1 : Configuration HTML

Dans votre fichier HTML, ajoutez ce qui suit :

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
</div>

Cela crée un élément canvas où notre graphique sera dessiné. Les directives ng-app et ng-controller relient notre HTML à notre application et contrôleur AngularJS.

Étape 2 : Créer le Contrôleur

Dans votre fichier JavaScript, ajoutez :

app.controller('ChartController', function($scope) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'],
datasets: [{
label: 'Popularité des Langages de Programmation',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});

Whaou, c'est beaucoup de code ! Mais ne vous inquiétez pas, analysons-le :

  1. Nous créons un contrôleur nommé 'ChartController'.
  2. Nous obtenons le contexte de notre élément canvas.
  3. Nous créons un nouvel objet Chart, en spécifiant qu'il s'agit d'un graphique à barres.
  4. Nous fournissons des données pour le graphique, y compris des étiquettes et un ensemble de données.
  5. Nous définissons des options pour le graphique, comme commencer l'axe y à zéro.

Rendre Notre Graphique Dynamique

Les graphiques statiques sont sympas, mais les graphiques dynamiques le sont encore plus ! Modifions notre graphique pour utiliser des données provenant de notre scope AngularJS.

Étape 1 : Mettre à Jour le Contrôleur

Modifiez votre contrôleur pour qu'il ressemble à ceci :

app.controller('ChartController', function($scope) {
$scope.languages = ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'];
$scope.popularity = [12, 19, 3, 5, 2];

$scope.updateChart = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: $scope.languages,
datasets: [{
label: 'Popularité des Langages de Programmation',
data: $scope.popularity,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
};

$scope.updateChart();
});

Ici, nous avons déplacé nos données dans des variables de scope et créé une fonction updateChart.

Étape 2 : Ajouter l'Entrée Utilisateur

Ajoutons des champs d'entrée pour que les utilisateurs puissent mettre à jour les données du graphique :

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
<div ng-repeat="language in languages">
{{language}}: <input type="number" ng-model="popularity[$index]" ng-change="updateChart()">
</div>
</div>

Maintenant, lorsque vous modifiez les nombres dans les champs d'entrée, le graphique se mettra automatiquement à jour !

Conclusion

Félicitations ! Vous venez de créer votre première application de graphique dynamique avec AngularJS et Chart.js. Nous avons couvert beaucoup de terrain aujourd'hui, allant de la compréhension des bases d'AngularJS à la création de graphiques interactifs.

N'oubliez pas, devenir compétent en programmation est comme apprendre à cuisiner - cela nécessite de la pratique, de l'expérimentation et la volonté d'apprendre de ses erreurs. Alors n'ayez pas peur de jouer avec le code, d'essayer différents types de graphiques, ou d'ajouter de nouvelles fonctionnalités.

Au fil des ans, j'ai vu des élèves passer de complets débutants à la création d'applications incroyables. Avec de la persévérance et de la curiosité, vous serez bientôt en train de créer des visualisations de données complexes et magnifiques !

Continuez à coder, continuez à apprendre, et surtout, amusez-vous ! Jusqu'à la prochaine fois, bon graphique !

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Application de Traduction
Tutoriel suivant:
AngularJS - Application de Cartes