Load initial data in an angularjs app

Question

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!

There's an ng-init directive, might be worth looking at. Is the table eventually getting populated or always blank? — tymeJV
– tymeJV, Commented Sep 11, 2013 at 18:00
hi tymeJV, thanks - i'll have a look at that :-) The table is always blank, unfortunately. — bomortensen
– bomortensen, Commented Sep 11, 2013 at 18:06
Ahh, seems your service is a bit messed up, see the answer below, have to carry that promise over! — tymeJV
– tymeJV, Commented Sep 11, 2013 at 18:10

Turnip · Accepted Answer · 2024-07-29 09:10:45Z

19

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;
    });
  }
});

edited Jul 29, 2024 at 9:10

Turnip

36.8k15 gold badges92 silver badges118 bronze badges

answered Sep 11, 2013 at 18:08

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

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

2 Comments

bomortensen Over a year ago

Ajay, you Sir did just save me from pulling my hair all night! It works like a charm. Thank you so much!! :-)

user3366706 Over a year ago

I think the init() method is redundant. It should work without making it as a init method like, app.controller('feedbackController', function ($scope, feedbackService, $filter) { feedbackService.getFeedbackPaged(1234, 1, 20).then(function(data){$scope.feedbackItems=data;}); });

Collectives™ on Stack Overflow

Load initial data in an angularjs app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related