Tuto AngularJS

Le temps en Angularjs

Comment gérer le temps avec AngularJs? Il y a parfois dans un code des fonctions que l'on souhaiterait exécuter avec un temps de latence de quelques secondes ou bien de manière répétée à un intervalle régulier. La méthode $timeout permet l'exécution d'un code après un certain temps (200 ms, 2 secondes, 3 minutes...). La méthode $interval permet d'exécuter un code de manière régulière dans un intervalle paramétrable pour une durée donnée ou bien infinie.

la méthode $timeout

<!DOCTYPE html>
<html ng-app="TempsAngular">
<head>
    <meta charset="UTF-8">
    <title>Le temps en AngularJs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="timeController">
    <h2>{{affichageTardif}}</h2>
    <script>
        var TempsAngular = angular.module('TempsAngular', []); 

        TempsAngular.controller('timeController',function($scope, $timeout){
            $scope.affichageTardif = "";

            $timeout(function () {
                $scope.affichageTardif = "Affichage après 2 secondes...";
            }, 2000);
        });
    </script>
</body>
</html>

la méthode $tinterval

<!DOCTYPE html>
<html ng-app="TempsAngular">
<head>
    <meta charset="UTF-8">
    <title>Le temps en AngularJs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="timeController">
    <h2>{{affichageChrono}}</h2>
    <script>
        var TempsAngular = angular.module('TempsAngular', []); 

        TempsAngular.controller('timeController',function($scope, $interval){
            $scope.affichageChrono = 3;

            $interval(function () {
                $scope.affichageChrono -= 1;
            }, 1000, 3);
        });
    </script>
</body>
</html>