Angular service containing http get call not working with ng-repeat

Question

I have an angular controller that calls a service. The service is responsible for returning data from a json file.

controller:

function projectController         


        

Answer 1

$http is asynchronous, therefore the call to getProjects will return nothing. Using $q you can receive an instance to a promise which will receive the data when available.

Using $q

Here an example using $q: http://plnkr.co/edit/U72oJblvrVEgYt2mTmU2?p=preview

Using $resource

Alternatively, you can use $resource especially if your server code is RESTful, which requires adding the following dependency in your scripts: //ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.js

This is a 1st review of your code to use $resource: http://plnkr.co/edit/tLOAaXZHdGgWOok3Sdc8?p=preview

But you can simplify and shrink it more to this: http://plnkr.co/edit/pKO6k6GxJ1RlO8SNvqUo?p=preview

This is the new app.js file:

angular.module('app',  ['ngResource'])
  .factory('ProjectsService', ['$resource', function($resource) {
    return $resource('projects.json');
  }])
  .controller('ProjectsController', ['ProjectsService', '$scope', function(ProjectsService, $scope) {
    $scope.projects = ProjectsService.query();
  }]);

Find more information about $resource here: http://docs.angularjs.org/api/ngResource.$resource

Answer 2

If you want data to be loaded before the page Is loaded you can use 'resolve' property For the module. Have a look in the docs for details.

Answer 3

$http performs asynchronously and may or may not be finished at any given point in time which is why your return statement dont work.

Use $q or simply handle the promise inside the controller:

Service:

projectManagerApp.factory('ajaxServices', function ($http) {
    return {
         getProjects : function () {
            return $http.get('projects.json', { data: {} })           
        }
    }       
});

Controller:

function projectController($scope, ajaxServices) {
    ajaxServices.getProjects().success(function (data) {
        if (window.console && console.log) {
            console.log("objects returned: " + data.length);
        }                          
        $scope.projects = data
    });
}

Plunk

Answer 4

You need to use $q. Example is here