AngularJS wait for simple promise to be resolved

Question

I'm really new with AngularJS and WebApi and I can't figure out how to wait for promises to be resolved.

I have a very simple application.

This is my HTML code:

<body ng-app="PersonApp">
<div ng-controller="PersonController">
    <div id="personTable">
        <table>
            <tr ng-repeat="p in person">
                <td>{{ p.surname }}</td>
                <td>{{ p.name }}</td>
                <td>{{ p.birthDate | date:'yyyy-MM-dd' }}</td>
                <td>{{ p.fiscalCode }}</td>
                <td>
                    <button type="submit" data-ng-click="edit(p)" class="btn btn-default">Edit</button>
                    <button type="submit" data-ng-click="delete(p)" class="btn btn-default">Delete</button>
                </td>
            </tr>
        </table>
    </div>//.................

My controller:

app.controller('PersonController', ['$scope', 'PersonApp', function ($scope, PersonApp) {
    PersonApp.getPersons($scope);

And finally the service:

app.service('PersonApp', ['$http', function ($http) {
    this.getPersons = function ($scope) {
        return $http({
            method: "GET",
            url: "../api/person",
            headers: { 'Content-Type': 'application/json' }
        }).success(function (data) {
            $scope.person = data;
            console.log(data);
        }).error(function (data) {
            console.log(data);
        });;
    };

I have tried to insert promises everywhere but I really can't figure it out.

I know this is a really dumb question but I hope you have the patience to give me a simple aswer.

Many thanks in advance!

What exactly isn't working? Where are you trying to wait for the promise to resolve? — Aaron Greenwald
– Aaron Greenwald, Commented Jun 8, 2015 at 15:31

Kmart2k1 · Accepted Answer · 2015-06-08 15:23:42Z

1

You shouldn't inject $scope into your service. The $http service will return a promise. If you modify your PersonApp service to simply return the $http promise, you can assign your $scope.person property in your controller. The code below is untested, but you will understand the basic idea.

PersonApp service

app.service('PersonApp', ['$http', function ($http) {
    this.getPersons = function () {
        return $http({
            method: "GET",
            url: "../api/person",
            headers: { 'Content-Type': 'application/json' }
        });
    };
}]);

PersonController

app.controller('PersonController', function($scope, PersonApp) {
  PersonApp.getPersons().then(function(data) {
      $scope.person = data;
      console.log(data);
  });
});

Here is a link to a working plunker with your code (I faked the $http part since I don't have access to your service).

http://plnkr.co/edit/tpl:rfqcl9AHEoJZEEJxyNn2?p=preview

Here is an article on promises with $http.

http://www.peterbe.com/plog/promises-with-$http

edited Jun 8, 2015 at 15:23

answered Jun 5, 2015 at 23:17

Kmart2k1

5635 silver badges12 bronze badges

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

4 Comments

Meccuz Over a year ago

it's still not working...I'm sure I'm missing something stupid but I can't figure out what...

Kmart2k1 Over a year ago

I added a plunker so you can see the code in action. I noticed you named your service to PersonApp, but in your HTML you have ng-app="PersonApp". Try renaming your service to something different (ie PersonService).

Aaron Greenwald Over a year ago

Good answer. One recommendation: you should be able to call .success() and .error() on getPersons() instead of simply .then().

Meccuz Over a year ago

Thanks a lot guys! Finally it's working. Thank you for your patience!

Collectives™ on Stack Overflow

AngularJS wait for simple promise to be resolved

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related