Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

Question

Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

Situation

Currently, I am interested in developing a web application that tracks a specific data set based on the time since the page was loaded. For example, "how many calories have you burned since opening this webpage?"

I am still trying to grasp the concept of AngularJS services, factories, etc., and I am curious about the most efficient way to create an automatically updating Timer that can be used to constantly (every second) manipulate and update ng-model.

My Attempt with Limited Success:

Here is what I have tried so far:

app.factory('Timer', function($timeout) {
    var time = 0;

    var Timer = function() {
        this.time++;
        this.timeout = $timeout(this.Timer, 1000);
    }
});

This is how I attempted to use it:

$timeout(function() {
    $scope.someNgModelVarForTheView = Timer.time * $scope.data;
}, 1000);

Unfortunately, my imagined solution does not work as intended. I seem to be missing the correct approach to accomplish this task...

Therefore, I have two main questions:

How can I calculate the time elapsed since the page was loaded, as a callable function?
What is the best method for recalculating the data model consistently (every second)? Is $timeout the right tool for this job?

javascript angularjs timer timeout

Answer 1

Answer №1

To create your own custom service, you can follow these steps:

.factory('CustomService', function($interval){
    return function(delay){
        var startTime = (new Date()).getTime();
        var result = {totalTime: 0, count: 0};                
        $interval(function() {
            result.totalTime = (new Date()).getTime() - startTime;
            result.count++;
        }, delay);
        return result;
    };
 })

You can then use the custom service like this:

.controller('exampleController', function($scope, CustomService){    
    $scope.timer = CustomService(1000);
});

In your HTML, you can display the results like this:

<div ng-app="myApp" ng-controller="exampleController">
   Total Time: {{timer.totalTime}}
   Count: {{timer.count}}
</div>

Demo

Answer 2

To create your own custom service, you can follow these steps:

.factory('CustomService', function($interval){
    return function(delay){
        var startTime = (new Date()).getTime();
        var result = {totalTime: 0, count: 0};                
        $interval(function() {
            result.totalTime = (new Date()).getTime() - startTime;
            result.count++;
        }, delay);
        return result;
    };
 })

You can then use the custom service like this:

.controller('exampleController', function($scope, CustomService){    
    $scope.timer = CustomService(1000);
});

In your HTML, you can display the results like this:

<div ng-app="myApp" ng-controller="exampleController">
   Total Time: {{timer.totalTime}}
   Count: {{timer.count}}
</div>

Demo

Answer 3

Answer №2

Oops, I may have made things too complex initially. This simple solution worked like a charm:

const timeInterval = 1000; // 1 second
$scope.currentTime = 0;

$interval(function() {
  $scope.currentTime += timeInterval;
  $scope.someData *= $scope.currentTime;
}, timeInterval);

Answer 4

Oops, I may have made things too complex initially. This simple solution worked like a charm:

const timeInterval = 1000; // 1 second
$scope.currentTime = 0;

$interval(function() {
  $scope.currentTime += timeInterval;
  $scope.someData *= $scope.currentTime;
}, timeInterval);

Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

Situation

My Attempt with Limited Success:

Therefore, I have two main questions:

Answer №1

Demo

Answer №2

Similar questions

What are some creative ways to customize and animate the cursor or caret within an input field?

Get rid of the .php extension in the URL completely

`Next.js project experiencing issues with scroll trigger functionality`

Transforming Arrays of Objects into a Single Object (Using ES6 Syntax)

issue with Knex query output when integrated with Express.js

Display content exclusively in PDF format

Troubleshooting React child problems in TypeScript

Two unnamed objects cannot be combined using the AsyncPipe

Steps to develop a runnable Express API

Looping through Angular injection

How to link a CSS file from a JavaScript file

There are critical vulnerabilities in preact-cli, and trying to run npm audit fix leads to a never-ending loop between versions 3.0.5 and 2.2.1

When attempting to include fit="true" on ui-gmap-markers, a.lat does not function properly

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript

Wait until a svelte store value is set to true before fetching data (TypeScript)

Ways to protect my login details when making an ajax request?

Here are the steps to calculate the duration between two dates in the specified format:

Accessing my data on my personal server through firestore entails an extra step in the request process

I am currently dedicated to enhancing my background transitions and experimenting with creating smooth fade-ins

Attempting to capture a previously unhandled error thrown by Axios when utilized in conjunction with React Query (with suspense mode enabled) within a NextJs application