Français

Tutoriel AngularJS

Applications AngularJS

AngularJS - Application Minuterie

Bonjour, futurs programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant pour créer une application de minuteur en utilisant AngularJS. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - je serai votre guide amical à travers cette aventure, en expliquant tout étape par étape. Alors, mettons nos manches et plongeons dedans !

AngularJS - Timer Application

Qu'est-ce qu'AngularJS ?

Avant de commencer à construire notre minuteur, penchons-nous un moment sur ce qu'est AngularJS. Imaginez que vous construisez une maison. AngularJS est comme une boîte à outils magique qui rend plus facile la construction des murs, du toit et de tout ce qu'il y a entre les deux. C'est un framework JavaScript qui nous aide à créer des applications web dynamiques avec moins d'effort.

Configuration de Notre Projet

Étape 1 : Inclure AngularJS

Premierement, nous devons inclure AngularJS dans notre projet. C'est comme inviter un ami super-intelligent pour nous aider avec nos devoirs. Nous allons faire cela en ajoutant une seule ligne de code à notre fichier HTML :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Cette ligne indique à notre page web de charger AngularJS à partir des serveurs de Google. C'est comme ouvrir la boîte à outils magique dont nous avons parlé plus tôt.

Étape 2 : Créer la Structure HTML

Maintenant, créons la structure de base de notre application minuteur. Pensez-y comme un croquis du plan de notre maison :

<!DOCTYPE html>
<html ng-app="timerApp">
<head>
<title>Minuterie AngularJS</title>
</head>
<body ng-controller="TimerController">
<h1>Minuterie AngularJS</h1>
<p>Temps : {{time}}</p>
<button ng-click="startTimer()">Démarrer</button>
<button ng-click="stopTimer()">Arrêter</button>
<button ng-click="resetTimer()">Réinitialiser</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Décomposons cela :

  • ng-app="timerApp" : Cela indique à AngularJS que tout notre document HTML est une application Angular nommée "timerApp".
  • ng-controller="TimerController" : Cela applique un contrôleur (que nous allons créer bientôt) à notre élément <body>.
  • {{time}} : C'est où notre minuteur affichera le temps actuel.
  • Les boutons ont des attributs ng-click, qui déclencheront des fonctions lorsque cliqués.

Création de l'Application AngularJS

Étape 3 : Configuration du JavaScript

Maintenant, créons notre fichier app.js. C'est là que l'on opère la magie !

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

app.controller('TimerController', function($scope, $interval) {
$scope.time = 0;
var timer;

$scope.startTimer = function() {
if (!timer) {
timer = $interval(function() {
$scope.time++;
}, 1000);
}
};

$scope.stopTimer = function() {
if (timer) {
$interval.cancel(timer);
timer = null;
}
};

$scope.resetTimer = function() {
$scope.stopTimer();
$scope.time = 0;
};
});

Whaou, c'est beaucoup ! Décomposons cela étape par étape :

  1. var app = angular.module('timerApp', []); : Cela crée notre application AngularJS.

  2. app.controller('TimerController', function($scope, $interval) { ... }); : Cela définit notre contrôleur. Pensez-y comme le cerveau de notre application.

  3. $scope.time = 0; : Cela initialise notre minuteur à 0.

  4. Les fonctions startTimer, stopTimer, et resetTimer :

  • startTimer utilise $interval pour incrémenter $scope.time toutes les secondes.
  • stopTimer annule l'intervalle lorsque nous voulons mettre en pause.
  • resetTimer arrête le minuteur et remet le temps à 0.

Comment Ça Marche Ensemble

Lorsque vous ouvrez le fichier HTML dans votre navigateur, AngularJS entre en action. Il voit les directives ng-app et ng-controller et sait utiliser notre code JavaScript pour contrôler la page.

Le {{time}} dans notre HTML est automatiquement mis à jour chaque fois que $scope.time change dans notre JavaScript. Cela s'appelle la liaison de données bidirectionnelle, et c'est l'une des fonctionnalités les plus cool d'AngularJS !

Lorsque vous cliquez sur un bouton, la fonction correspondante dans notre contrôleur est appelée, mettant à jour le minuteur selon besoi

Credits: Image by storyset

Tutoriel précédent:
AngularJS - Application Météo
Tutoriel suivant:
AngularJS - Application Leaflet