AngularJs with REST Api

Question

i'm new to angularJs and want to learn more about it, i'm trying to display some users from a fake REST Api, when trying to run my code i got empty page and the console doesn't give me any errors , i don't know where is the error or where i can debug.

app.js

var myApp = angular.module("app", []);

contactsData.service.js look like that :

(function () {
    var app = angular.module("app");
    app.service("contactDataSvc", function ($http) {
        var self = this;
        self.getContacts = function () {
            var promise1 = $http.get("http://localhost:3000/contacts");
            var promise2 = promise1.then(function (response) {
                return response.data;
            });
            return promise2;
        }
    });
})();

contacts.controller.js

(function () {
    var myApp = angular.module("app");
    myApp.controller("contactsCtrl", contactsCtrl);

    function contactsCtrl(contactDataSvc) {
        contactDataSvc.getContacts()
        .then(function(data){
            this.contacts = data;
        });

    }
})();

finally my view index.html

<html ng-app="app">

<head>
    <title></title>
    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="contacts.controller.js"></script>
    <script src="contactsData.service.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />

    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
</head>

<body class="container">
    <div>

        <div ng-controller="contactsCtrl as ctrl">
            <div class="raw">
                <ul class="list-group">
                    <li class="li-group-item" ng-repeat="obj in ctrl.contacts">
                        {{obj.name.title + " " + obj.name.first + " " + obj.name.last}}
                    </li>
                </ul>
            </div>            
        </div>
    </div>
</body>

</html>

First try to debug the angular script in your browser console. In your get service call, you have not defined any error handler for the promise. Als check to see the Network tab in browser developer tools and see if request completes and what data is received. Also, try adding contactsCtrl.$inject = ["contactDataSvc"] as the last line in controller code after the controller function ends — Shahzad, May 25 '17 at 11:51
@Casper Do check the response you are getting in controller. It might be you need to write this.contacts = data.data; — geminiousgoel, May 25 '17 at 11:55
thanks guys the error was in my controller since i was using this keyword that's was different from my scope u can see the accepted answer :) — Casper, May 25 '17 at 12:02

Sreekumar P · Accepted Answer · 2017-05-25T11:59:55.590

1

Small correction required in your contactsCtrl

function contactsCtrl(contactDataSvc) {
        var vm = this;
        contactDataSvc.getContacts()
          .then(function(data){
              vm.contacts = data;
        });
}

You cannot use this inside the then callback as the scope will be different.

Corrected working example here : http://plnkr.co/edit/LLKJipkBbiZ17QjQpw1X

Refer more:

https://www.w3schools.com/js/js_scope.asp

What is the scope of variables in JavaScript?

edited May 25 '17 at 11:59

answered May 25 '17 at 11:53

Sreekumar P

5,900
11
57
82

First of all, if you want to show some value in UI the value have to be set in property of Controller class/function. ie you need to set `contacts` variable in `contactsCtrl`. `this` refers to the current function's scope which means... in your case `then(function(data)..` is another function and if you try to access a variable that should be set in the coctactsCtrl – Sreekumar P May 25 '17 at 12:09

score 0 · Answer 2 · answered May 25 '17 at 11:49

0

1 - Is this url correct? http://localhost:3000/contacts

2 - Open the url on any browser, does it return any response ? JSON?

Please check this first to see if the problem is not on the server side.

answered May 25 '17 at 11:49

leonardo

121
1
5

Could you try to add an alert(response) just to check the response is filled with any data? – leonardo May 25 '17 at 11:54

score 0 · Answer 3 · answered May 25 '17 at 12:03

Firstly inject $scope in controller because anything/data that we want to access over Html from controller needs to be binded on $scope. So you controller would look like:

(function () {
    var myApp = angular.module("app");
    myApp.controller("contactsCtrl", contactsCtrl);

    function contactsCtrl($scope,contactDataSvc) {
        contactDataSvc.getContacts()
        .then(function(data){
            $scope.contacts = data;
        });

    }
})();

Secondly from the service you need to return a promise from it only then you will be able to get the data once the response is back from the API. So,the updated service code is :

(function () {
    var app = angular.module("app");
    app.service("contactDataSvc", function ($http,$q) {
        var self = this;
        var defered = $q.defer();
        self.getContacts = function () {
            var promise1 = $http.get("http://localhost:3000/contacts");
             promise1.then(function (response) {
                defered.resolve(response.data);
               });
            return defered.promise;
        }
    });
})();

i'm using controller AS syntax . this don't need the $scope to be injected to the controller, it's automatically creates something like that var this = $scope. — Casper, May 25 '17 at 12:07

AngularJs with REST Api

3 Answers3