Angular factory with $http

Question

I am writing a factory that calls a JSON feed and returns the results.

Here is the factory using $http

nearestLocationApp.factory("allTheLocationsFactory", function($http){
    var locations = "Not sure why it don't work";
    $http.get('/json/locations/').then(function(res){
        locations = res.data;
    });
    return locations;
});

When I include this in the controller I get the first version of the locations variable. It's like there are 2 different scopes here. I am pretty sure that's my problem but I don't know why.

Here is me calling and printing out the console.log for the controller.

nearestLocationApp.controller("getTheLocation", function($scope, allTheLocationsFactory){

    $scope.locationResponse = "Find your location";
    $scope.locations = allTheLocationsFactory;
    console.log($scope.locations);

});

What I need to know is why I have multiple scopes in my factory and how to fix it.

If anyone is interested the JSON data looks like this.

[
{
    "Name":"#########",
    "ID":#########,
    "address1":"#########",
    "address2":"#########",
    "city":"#########",
    "state":"#########",
    "zip":"#########",
    "phoneNumber":"#########",
    "thumbnail":[
        "#########",
        #########,
        #########,
        #########
    ],
    "permalink":"#########",
    "weekdayHours":"#########",
    "saturdayHours":"#########",
    "sundayHours":"#########",
    "coords":{
        "longitude":"#########",
        "latitude":"#########"
        },
    "options":{"animation":#########}
}, ......

Pankaj Parkar · Answer 1 · 2015-08-26T16:49:52.620

You are dealing with asynchronous call, that gets data asynchronously for you. In this Your factory should return $http promise & you could get that promise inside your controller and put .then function, That will get call when the factory $http returns a locations from it success callback.

Factory

nearestLocationApp.factory("allTheLocationsFactory", function($http){
    return $http.get('/json/locations/').then(function(res){
        return res.data;
    });
});

Controller

nearestLocationApp.controller("getTheLocation", function($scope, allTheLocationsFactory){

    allTheLocationsFactory.then(function(data){
        $scope.locations = data;
        console.log($scope.locations);
    })

});

Jhey · Accepted Answer · 2015-08-26T17:15:47.320

Your factory instance should ideally return a promise instance that can be resolved either within a controller or ideally within a routers resolve option.

nearestLocationApp.factory("allTheLocationsFactory", function($http){
    var jsonURL      = '/json/locations/',
        getLocations = function(){
            return $http.get(jsonURL).then(function(result){
                return result.data;
            });
        };
    return {
        getLocations: getLocations
    };
});

Then within your application config or router something like;

var nearestLocationsApp = angular.module('myApp', [
    'ngRoute'
])
    .config(function($routeProvider) {
        $routeProvider.when("/", {
             templateUrl: "templates/someTemplate.html",
             controller:'SomeCtrl',
             controllerAs: 'ctrl',
             resolve: {
                 locations: function(allTheLocationsFactory) {
                     return allTheLocationsFactory.getLocations();
                 }
             }
         });
      });

And within your controller something similar to;

nearestLocationApp.controller('someController', [
    '$scope',
    'allTheLocationsFactory',
    'locations',
    function($scope, allTheLocationsFactory, locations) {
         $scope.locations = locations;
    }
]);

Or without using the resolve option in your router;

nearestLocationApp.controller('someController', [
    '$scope',
    'allTheLocationsFactory',
    function($scope, allTheLocationsFactory) {
        allTheLocationsFactory.getLocations().then(function(res) {
            $scope.locations = res;
        });
    }
]);

The former option is one I personally prefer rather to relying on promises within the controller. You can check out some other useful angular tips here

Hope some of that helps you out!

Angular factory with $http

2 Answers2