Angular JS Retrieving Data in the Background with the Assistance of $timeout or $interval Service

Question

Angular JS Retrieving Data in the Background with the Assistance of $timeout or $interval Service

Looking to fetch data from a webapi in the background using either the $timeout or $interval service in Angular JS.

I have some concerns about how the $timeout and $interval services work. I've run into issues when incorporating these services into my controller. Here are some observations from my current development: - There is a presence of multiple nested controllers within the application. - Upon transitioning from one state to another, the $timeout or $interval service is triggered again. (This can be prevented by cancelling the timer on Scope Destroy) - However, how do we go about maintaining timer information?

Is it possible to create a service or factory to address this issue?

javascript angularjs ajax

Answer 1

Answer №1

Of course, it is possible to utilize a factory for this purpose. This approach ensures that the $timeout and $interval are instantiated only once.

By creating a factory similar to the one outlined below, you can easily share data obtained or generated within an $interval with your controller (refer to the bottom section):

angular.module('app')
  .factory('interval', interval);

interval.$inject = ['$interval'];

function interval($interval) {
  var counter = {};
  activate();

  return {
    counter: counter
  };

  function activate() {
    $interval(increaseCounter, 1000);
  }

  function increaseCounter() {
    if(angular.isUndefined(counter.count)) {
      counter.count = 0;
    } else {
      counter.count++;
    }
  }
}

Additionally, here's the corresponding controller:

angular.module('app')
  .controller('TestController', testController);

testController.$inject = ['interval'];

function testController(interval) {
  var vm = this;
  this.counter = interval.counter;
}

You can now showcase the counter (or any retrieved data from the $interval) in the view as follows:

<div ng-controller="TestController as ctrl">
  {{ctrl.counter.count}}
</div>

It's worth noting that directly sharing count isn't feasible due to JavaScript passing values by reference/value peculiarities.

Feel free to access a functional fiddle: https://jsfiddle.net/m5hw5w1o/

Answer 2

Of course, it is possible to utilize a factory for this purpose. This approach ensures that the $timeout and $interval are instantiated only once.

By creating a factory similar to the one outlined below, you can easily share data obtained or generated within an $interval with your controller (refer to the bottom section):

angular.module('app')
  .factory('interval', interval);

interval.$inject = ['$interval'];

function interval($interval) {
  var counter = {};
  activate();

  return {
    counter: counter
  };

  function activate() {
    $interval(increaseCounter, 1000);
  }

  function increaseCounter() {
    if(angular.isUndefined(counter.count)) {
      counter.count = 0;
    } else {
      counter.count++;
    }
  }
}

Additionally, here's the corresponding controller:

angular.module('app')
  .controller('TestController', testController);

testController.$inject = ['interval'];

function testController(interval) {
  var vm = this;
  this.counter = interval.counter;
}

You can now showcase the counter (or any retrieved data from the $interval) in the view as follows:

<div ng-controller="TestController as ctrl">
  {{ctrl.counter.count}}
</div>

It's worth noting that directly sharing count isn't feasible due to JavaScript passing values by reference/value peculiarities.

Feel free to access a functional fiddle: https://jsfiddle.net/m5hw5w1o/

Angular JS Retrieving Data in the Background with the Assistance of $timeout or $interval Service

Answer №1

Similar questions

Bug in toFixed causing incorrect results

Troubleshooting a ThreeJS Issue: the Mystery of the Malfunction

Cordova application encounters failure in making AJAX call to localhost with error code ::ERR_CONNECTION_REFUSED

Exploring the Magic of Class Variable Destructuring in React

Access the latest data within Sails' Waterline prior to the update process

Parsing JSON data using PHP and AJAX decoding

Using Jquery to detect if there are any Space characters in the user input

What is a method to raise the height when scrolling down without reducing it when scrolling up?

Code has been loaded successfully for react-loadable Chunks, however it has not been

Why does the method Array.concat on an extended class remove empty values in Node.js version 8.9.3?

Utilizing Custom Script Tag Types in Visual Studio for Enhanced HTML Template Functionality and Improved Syntax Highlighting

Utilizing Vue.js to share a single array of data across two distinct input lists

Enhancing Performance with Web Workers in Angular CLI

Confirm the session validity before invoking the web service function from an ajax function triggered by clicking a button

Conceal the visibility of the popover in Onsen UI

Explore button that gradually decreases max-height

Trouble accessing state when React child calls parent method

Node.js: Leveraging Express to Compare URL Parameters and Handle Delete Requests with Array Values

Tips for successfully integrating .dae files into three.js for online execution on a web browser

Is it possible to load multiple angular applications within a master angular shell application?