使用 AngularJS 中的$http将数据传递到控制器

我正在AngularJS中创建一个小的联系人应用程序，并希望通过调用Web服务来检索数据。

我在VS中创建了两个项目（一个网站用于angularJS代码，一个Web应用程序用于Web服务代码）。我将它们都放在同一个解决方案下。

这是我的索引.html标记：

<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>...

我的联系人.html标记，它位于 ui-view 标记内：

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

在JS中，我创建了以下服务：

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

和以下索引控制器：

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

在我的 Web 应用程序中，我创建了一个模型：

    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="aaaa@gmail.com",address="sdsd"});
                c.Add(new Contact() { name = "bbbb", phone = "222", mail = "b@g.com", address = "sss" });
                c.Add(new Contact() { name = "cc", phone = "444", mail = "a@l.com", address = "ggg" });
                return c;
        }

及其控制器：

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

当我运行整个项目（Angular 和 WS）时，我收到一个ERR_CONNECTION_REFUSED错误。这里可能有什么问题？我的 ajax 调用使用 $http 有问题吗？

附言我在我的 Web 应用程序中允许 CORS。

作为

依赖项添加的"getContacts"将仅返回承诺，而不是您想要的列表。它应该看起来像这样：

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

我希望这就是您正在寻找的答案！

相关内容

最新更新

热门标签：