Angular JS persisting data across controller instances

Where do we want to store our data in Angular JS and how does it flow through your web/mobile app. This is especially important if you are using Angular JS in the mobile context. Recently I’ve been working on some Ionic Framework apps. Here is my example.

The user leaves the page then navigates back. We are duplicating API calls and losing the users context within the data. Behind the scenes we did this:

  1. Initialize controller A
  2. Load data set A into controller A via API call
  3. Load page B
  4. Initialize controller A
  5. Load data set A into controller A via API call

Alternatively we could have done this:

  1. Initialize controller A
  2. Load data set A into service A via API call
  3. Pass data from service A to Controller A via a promise
  4. Load page B
  5. Initialize controller A
  6. Load cached data set A from service A

An example of a controller and service pairing might look like this (NOTE: This is specific to my Ionic Cordova mobile app, but you can get the idea. Also note that the more function returns a promise):

.controller('HotCtrl', function($scope, UtilService, HotService) {
 $scope.util = UtilService;
 $scope.movies = HotService.all();

 $scope.doRefresh = function() {
   $scope.movies = [];
   setTimeout(function() {
   }, 700);

 $scope.moreMovies = function() {
     $scope.movies = HotService.all();
     setTimeout(function() {
     }, 200);
     $scope.hasMore = HotService.hasMore();

.factory('HotService', ['$resource', 'MovieService', 'UtilService', function($resource, MovieService, UtilService) {
 var page = 1;
 var movies = [];
 var regions = UtilService.getRegions();
 var hasMore = true;
 return hotObj = {
   all: function() {
     if(regions !== UtilService.getRegions()) {
       regions = UtilService.getRegions();
     return movies;
   more: function() {
     options = {page: page, n: 'hot', per_page: 500};
     return MovieService.query(UtilService.getParams(options), null, function(response, headers){
       if(response.length < 1) {
         hasMore = false; 
       } else {
       hasMore = true;
     angular.forEach(response, function(value, key) {
       function(response) {
   get: function(index) {
     return movies[index];
   hasMore: function(){
     return hasMore;
   clear: function() {
     page = 1;
     movies = [];
     hasMore = true;

Published by Anthony

Anthony loves open source software. Especially Linux and Ruby on Rails. He enjoys tinkering with his Raspberry Pi/Arduino projects, writing code late at night, and drinking coffee. He aspires to be a Linux guru and software development magician. He is currently reading books on AI.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.