Question

我是AngularJS和WebAPI的新手。我有两个Visual Studio 2015项目，EventViewer（AngularJS）和AppData（WebAPI），并已配置IIS Express 7来托管网站。我有AngularJS项目的路径作为网站的路径，这是正常的。对于AppData项目（WebAPI），我在网站上添加了一个应用程序。作为网站应用程序的路径，我正在使用容纳WebAPI项目的文件夹的物理路径。这是正确的吗？是否足以使角度和webAPI应用程序相互通信？ AngularJS应用程序似乎与WebAPI应用程序进行通信。当我从IIS浏览网站时，我得到了正确的页面但没有数据。我错过了什么？任何帮助将不胜感激。

AngularJS控制器：

'use strict';

    eventsApp.controller('EventListController',
        function EventListController($scope, eventData) {
            $scope.events = eventData.getAllEvents();
        });

AngularJS服务：

eventsApp.factory('eventData', function ($resource) {
    var resource = $resource('/data/event/:id', { id: '@id' }, { "getAll": { method: "GET", isArray: true, params: { something: "foo" } } });
    return {
        getAllEvents: function () {
            return resource.query();
        }
 };
});

WebAPI控制器：

namespace AppData.Controllers
{
    public class EventController : ApiController
    {
        public JToken Get(string id = null)
        {
            if (id == null)
                return GetAllJsonEventsAsArray();
            return GetSingleJsonFile(id);
        }

        private static JToken GetSingleJsonFile(string id)
        {
            var path = System.Web.Hosting.HostingEnvironment.MapPath("/");
            return JObject.Parse(System.IO.File.ReadAllText(path + "../app/data/event/" + id + ".json"));
        }

        public void Post(string id, JObject eventData)
        {
            var path = System.Web.Hosting.HostingEnvironment.MapPath("/");
            System.IO.File.WriteAllText(path + "../app/data/event/" + id + ".json", eventData.ToString(Formatting.None));
        }

        private JArray GetAllJsonEventsAsArray()
        {
            var path = System.Web.Hosting.HostingEnvironment.MapPath("/");
            var contents = "";
            foreach (var file in System.IO.Directory.GetFiles(path + "../app/data/event/"))
            {
                contents += System.IO.File.ReadAllText(file) + ",";
            }
            return JArray.Parse("[" + contents.Substring(0, contents.Length - 1) + "]");
        }

    }
}

Answer 1

首先，浏览器中的F12。

尝试 console.log 以获取$ scope.events = eventData.getAllEvents（）;
还检查BackEnd（Web API）中的 CORS 问题

修复，就像这个代码：在Startup.cs上

app.UseCors（Microsoft.Owin.Cors.CorsOptions.AllowAll）;

祝你好运：）

AngularJS项目不与WebAPI项目进行通信

1 个答案: