[SOLVED] Load initial data in an angularjs app

Load initial data in an angularjs app

I'm currently trying to develop an AngularJS app. This is my first application using AngularJS and I think I'm pretty aware of how it works since I've been a Silverlight developer for some years :-)

However, there's one, simple thing I cannot figure out: how to get the initial data for the app when it starts.

What I need is a simple table of data where a few fields can be edited inline (by dropdowns) My app structure is like this:

app.js

var app = angular.module('feedbackApp', []);

feedbackService.js

app.service('feedbackService', function ($http) {
this.getFeedbackPaged = function (nodeId, pageNumber, take) {
    $http.get('myUrl', function (response) {
        return response;
    });
};
});

feedbackController.js

app.controller('feedbackController', function ($scope, feedbackService, $filter) {
// Constructor for this controller
init();

function init() {
    $scope.feedbackItems = feedbackService.getFeedbackPaged(1234, 1, 20);
}
});

Markup

<html ng-app="feedbackApp">
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <table class="table" style="border: 1px solid #000; width:50%;">
        <tr ng-repeat="fb in feedbackItems | orderBy: 'Id'" style="width:auto !important;">
            <td data-title="Ansvarlig">
                {{ fb.Name }}
            </td>
            <td data-title="Kommentar">
                {{ fb.Comment }}
            </td>
        </tr>
    </table>
</body>

But the table is empty when I run the application. I think it's because the app starts before the data from the service is added to the viewmodel ($scope), but I have no idea of how to make it initialise before the app starts, so the first 20 table rows are displayed.

Does anyone know how to do this?

Thanks in advance!

Solution

You should modify your code a bit to make it working since you are working with promise here you should use .then

app.service('feedbackService', function($http) {
  this.getFeedbackPaged = function(nodeId, pageNumber, take) {
    return $http.get('myUrl');
  };
});

app.controller('feedbackController', function($scope, feedbackService, $filter) {
  // Constructor for this controller
  init();

  function init() {
    feedbackService.getFeedbackPaged(1234, 1, 20).then(function(data) {
      $scope.feedbackItems = data;
    });
  }
});