8

I have the following code (below), they work perfectly for me and to what I need at least. But Im kind of skeptical about this, Im having a feeling that its too good to be true. Since Im struggling with $http's async behavior this helped me a lot to use the response object from the $http request globally on the controller.

I just want to know if its the right way or at least an acceptable one or should I use the conventional way of using $http get like the one on AngularJS' Documentation before I move on with my project. Answers will help me a lot. Thank you.

$stateProvider

$stateProvider
    .state('test', {
        url: '/test',
        templateUrl: 'partial.template.html',
        resolve : {
            foo : function($http) {
                return $http({
                    method: 'GET',
                    url: '/api/something'
                });
            },
            bar : function($http) {
                return $http({
                    method: 'GET',
                    url: '/api/something'
                });
            },
        },
        controller: 'mainController',
    })

controller

.controller('mainController',['$scope', 'foo', 'bar', function($scope, foo, bar){
    $scope.fooObj = foo;
    $scope.barObj = bar;
}])
jofftiquez
  • 7,548
  • 10
  • 67
  • 121

1 Answers1

8

I think this is probably the best usecase for a ui-router resolve.

Anyway i'd prefer to wrap my http call into services and call this services into the resolve instead of using $http directly.

This may look like this :

app.service('FooService',function($http){
  var service={}; 
  service.getFoo = function(){
      return $http({
                method: 'GET',
                url: '/api/something'
             });
  }
  return service;
});

Thanks to that you can call this method all around your application (and centralize it at the same time).

In controller :

app.controller('MyController', function($scope, FooService) {
    $scope.controllerName = "MyController";
    FooService.getFoo().success(function(foo){
        $scope.foo = foo
    });
});

In a resolve :

$stateProvider
.state('test', {
    url: '/test',
    templateUrl: 'partial.template.html',
    resolve : {
        foo : function(FooService) {
            return FooService.getFoo();
        },
    },
    controller: 'MyController',
})

Go on with this approach, you're on a good way.

Hope it helped.

EDIT : Built a plunker to add a concrete exemple of theses methods.

Okazari
  • 4,597
  • 1
  • 15
  • 27
  • Uhm actually I got a little problem on this approach mate. It seems like that the resolve is preventing to load the template? It's weird but there's no error on console. – jofftiquez Jul 22 '15 at 14:24
  • Yeah actually the template will not load until the promise in the resolve is resolved. If you don't want this, just stay with the service and use the "controller" exemple. You could add some loaders and it would works like a charm. – Okazari Jul 22 '15 at 14:26
  • This may sound newbie but how do I resolve the promise? – jofftiquez Jul 22 '15 at 14:36
  • Actually it's fine now. Thanks :) – jofftiquez Jul 22 '15 at 14:42
  • @GreenFox Added a plunker to the answer to illustrate. Actually the $http promise is resolved when you get the response. You don't have to do it yourself. Handling a $http response can be done with .success(function(data)) in a controller and is automatically done in a resolve (you will get the data with "property.data"). – Okazari Jul 22 '15 at 14:46