Passing Data to Controller using $http in AngularJS

Question

I'm creating a small contacts application in AngularJS and want to retrieve data by calling a web service.

I created two projects in VS (one Website for the angularJS code and one Web Application for the web service code). I put them both under the same Solution.

This is my index.html markup:

<body ng-app="app" ng-controller="controller" ng-cloak>
    <div class="header" ng-bind="header"></div>
    <div class="content">
        <!-- This content will switch -->
        <ui-view></ui-view>
    </div>...

My contacts.html markup, which goes inside ui-view tag:

  <ul>
     <li ng-repeat="c in contacts" >...

In JS I created the following service:

// Contacts Service
        app.service("getContacts", function ($http, $q) {                    
            // web-service path
            var ws = "http://localhost:65123/";
            var getContact = function () {
                //create defer object
                var contactsPromise = $q.defer();
                $http.get(ws + "api/Contact")
                    .then(function (res) { contactsPromise.resolve(res);
                    }, function (err) { contactsPromise.reject(err); });
                return contactsPromise.promise;
            };
            return
            { getContact: getContact }
        });

and the following index Controller:

//index(root) Controller 
        app.controller("controller", function ($scope,getContacts) {
            $scope.contacts = getContacts.getContact().then(function(res){ $scope.contacts = res; });
        });

In my Web Application I created a single Model:

    public class Contact
        {
            public string name;
            public string phone;
            public string mail;
            public string address;
            public static List<Contact> getContacts() {
// TODO retrieve Contacts from DB
                List<Contact> c = new List<Contact>();
                c.Add(new Contact() { name="aaaa", phone="111", mail="[email protected]",address="sdsd"});
                c.Add(new Contact() { name = "bbbb", phone = "222", mail = "[email protected]", address = "sss" });
                c.Add(new Contact() { name = "cc", phone = "444", mail = "[email protected]", address = "ggg" });
                return c;
        }

And its Controller:

namespace WebApplication1.Controllers
{
    public class ContactController : ApiController
    {
        // GET: api/Contact
        public List<Contact> Get()
        {
            return Contact.getContacts();
        }
}
}

When I run the whole project (both Angular and WS) I get an ERR_CONNECTION_REFUSED error. What could be the problem here? Is something wrong with my ajax call using $http?

P.S. I allowed CORS in my Web Application.

If you look at the "network" console tab, you see the request with the proper response? — andreybleme
– andreybleme, Commented Jan 29, 2019 at 16:09
I see no request and no response. Does that mean something is wrong with my ajax call? — Jadenkun
– Jadenkun, Commented Jan 29, 2019 at 16:54

XutNice · Accepted Answer · 2019-01-29 16:35:18Z

1

the "getContacts" added as a dependency will return only a promise and not the list you want. It should look like this:

//index(root) Controller 
    app.controller("controller", function ($scope,getContacts) {
        getContacts.then(function(contacts){ $scope.contacts = contacts; });
    });

I hope this is the answer you're looking for!

answered Jan 29, 2019 at 16:35

XutNice

262 bronze badges

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

5 Comments

Jadenkun Over a year ago

This gives me an error of "getContacts.then is not a function"

XutNice Over a year ago

Two options: "return getContact" instead of "return { getContact: getContact }" or "getContacts.getContact.then(function(contacts){ $scope.contacts = contacts; });" instead of what I put in my code example.

Jadenkun Over a year ago

If I use the former option, nothing's changed. I still get a Type Error of "getContacts.then is not a function". If I use the latter I get a Type Error of "Cannot read property 'then' of undefined"

Jadenkun Over a year ago

I think I figured it out. I was missing parentheses like so - getContacts.getContact().then

Jadenkun Over a year ago

but now I am getting an ERR_CONNECTION_REFUSED error.

Collectives™ on Stack Overflow

Passing Data to Controller using $http in AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related