$http calls with angular routes

Question

I just setup routes in my angular app. The first view, List makes an http call to get a list of presentations

function ListController($scope, $http)
{
    $scope.error            = null;
    $scope.presentations    = null;
    $scope.requesting       = true;
    $scope.currentTitle     = '-1';
    $data = {
        'type' : 'presentations'
    };

    $http.post('resources/request.php', $data, {timeout:20000})
        .success(function(data, status, headers, config)
        {
            $scope.requesting   = false;
            $scope.presentations    = data;
        })
        .error(function(data, status, headers, config)
        {
            $scope.requesting   = false;
            log(status + ', data:" ' + data + '"');
        }
      }
    );
}

My route is

angular.module('main',[]).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {controller:ListController, templateUrl:'resources/views/list.html'}).
      when('/view/:id', {controller:VforumController, templateUrl:'resources/views/vforum.html'}).
      otherwise({redirectTo:'/'});
  });

the problem I have is when I go to #/view/:id and then back to / the $http call gets called again. How can I make it so it only loads the first time going into the app and reference the same data that was loaded the first time?

I attempted to create a variable outside of angular and set it equal to the data loaded the first time. Then, in the ListController basically did a if data is null, do the $http call else set $scope.data = data but that didn't work. The list view was just blank. $scope.data is what builds my list.

Did you try passing $route to your controller and checking the $routeParams before the $http.post()? Worth a shot. — couzzi
– couzzi, Commented Mar 22, 2013 at 22:20
I've never used $routeParams before..well, $routes in general. This is my first time. I'll look into this, thanks — Ronnie
– Ronnie, Commented Mar 22, 2013 at 22:26

Josh David Miller · Accepted Answer · 2013-03-22 23:04:20Z

4

What you want is a service, which in angular is a singleton:

.factory( 'myDataService', function ( $http ) {
  var promise;

  return function ( $data ) {
    if ( ! angular.isDefined( promise ) ) {
      promise = $http.post('resources/request.php', $data, {timeout:20000});
    }

    return promise;
  }
});

And now you can simply replace the call to $http with a call to your service:

function ListController( $scope, myDataService )
{
  // ...

  myDataService( $data ).then( function success( response ) {
    $scope.requesting = false;
    $scope.presentations = response.data;
  }, function error( response ) {
    $scope.requesting = false;
    log(status + ', data:" ' + response.data + '"');
  });
}

edited Mar 22, 2013 at 23:04

answered Mar 22, 2013 at 22:26

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ronnie Over a year ago

I don't think I am doing this correct. I am getting $data is not defined. Again, haven't used factories/services before: pastie.org/7084834 what is wrong here? How do I pass $data to the service?

Josh David Miller Over a year ago

That depends on whether it's static. Since you defined it statically here, you can just place it statically in the service. If you want to have it dynamic, then your factory can return a function instead. I'll update the answer for the latter case.

Ronnie Over a year ago

Awesome, that worked! Is var promise what the service is checking? I am not sure what is making it so the app doesn't invoke the $http call twice. In other words, does promise containt my loaded data?

Josh David Miller Over a year ago

No, promise is a promise. :-) A promise provides an API for working with data that is generated asynchronously. $http returns one, which we store the first time the function returned from the service is called. Each subsequent time, that promise has already been defined, so we just return the existing one. Inside the promise chain is your data; you must always access the data from within then blocks because your code doesn't know if the data has been loaded yet. Whether it takes 7 ms or 7 sec won't matter and you don't need to account for it.

Ronnie Over a year ago

Ok, I understand now. This is awesome. I am loving angular the more I use it, thank you!

Collectives™ on Stack Overflow

$http calls with angular routes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related