AngularJS 从 WebApi 获取数据 - 错误未显示

Question

我的所有 angularJS 从 WebApi 获取数据的示例程序都遇到了类似的问题。我认为与我的代码无关，但可能我忽略了一些设置，请帮我检查一下：这是我的网站 api： URL:http://localhost:1883/api/Subcriber 和 return 数据：

Html正文：

<div id="tblSubs" ng-controller="APIController">
    <table>
        <tr>
            <th>ID</th>
            <th>Email ID ( Double click to update)</th>
            <th>Subscribed Date</th>
            <th></th>
        </tr>
        <tbody data-ng-repeat="sub in subscriber">
            <tr>
                <td>{{sub.SubscriberID}}</td>
                <td ng-blur="updSubscriber(sub,$event)" ng-dblclick="makeEditable($event)">{{sub.MailID}}</td>
                <td>{{sub.SubscribedDate}}</td>
                <td>
                    <input type="button" id="Delete" value="Delete" data-ng-click="dltSubscriber(sub.SubscriberID)" />
                </td>
            </tr>
        </tbody>
    </table>
    <div class="form-group">
        <label for="email">Sbscribe here</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" [required="string" ] data-ng-model="mailid" />
    </div>
    <button type="button" class="btn btn-default" data-ng-click="saveSubs();">Submit</button>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/ApiScripers/Module.js"></script>
<script src="Scripts/ApiScripers/Service.js"></script>
<script src="Scripts/ApiScripers/controller.js"></script>

AngularJS 模块：

    var app;
(function () {
app=angular.module('APIModule', []);
})();

AngularJS 服务：

app.service("APIService", function ($http) {
this.getSubs = function () {
    var url = 'api/Subscriber';
    return $http.get(url).then(function (response) {
        return response.data;
    });
}

AngularJS 控制器：

        app.controller('APIController', function ($scope, APIService) {
getAll();
function getAll() {
    var servCall = APIService.getSubs();
    servCall.then(function (d) {
        $scope.subscriber = d.data;
    }, function (error) {
        $log.error('Oops! Something went wrong while fetching the data.')
    })
}   
})

在运行之后，没有浏览器调试window的错误信息。太奇怪了，我的webapi是否需要先发布到IIS再调用？

更新： Index.cshtml:

@{
    ViewBag.Title = "Welcome";
}
<style>
    table, tr, td, th {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
    }
</style>

<h2>Welcome to Sibeesh Passion's Email List</h2>
<body data-ng-app="APIModule">
    <div id="tblSubs" ng-controller="APIController">
        <table>
            <tr>
                <th>ID</th>
                <th>Email ID ( Double click to update)</th>
                <th>Subscribed Date</th>
                <th></th>
            </tr>
            <tbody data-ng-repeat="sub in subscriber">
                <tr>
                    <td>{{sub.SubscriberID}}</td>
                    <td ng-blur="updSubscriber(sub,$event)" ng-dblclick="makeEditable($event)">{{sub.MailID}}</td>
                    <td>{{sub.SubscribedDate}}</td>
                    <td>
                        <input type="button" id="Delete" value="Delete" data-ng-click="dltSubscriber(sub.SubscriberID)" />
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="form-group">
            <label for="email">Sbscribe here</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" [required="string" ] data-ng-model="mailid" />
        </div>
        <button type="button" class="btn btn-default" data-ng-click="saveSubs();">Submit</button>
    </div>
</body>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/APIScripts/Module.js"></script>
<script src="~/Scripts/APIScripts/Service.js"></script>
<script src="~/Scripts/APIScripts/Controller.js"></script>

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Sibeesh Passion</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

.cshtml 可以从网络上获取数据api，但我只是将 html 代码复制到我无法访问的 .html 文件数据。希望有人能帮助它。代码没有问题，可能是我忽略了一些包含。

Answer 1

一定要抛出错误才能在控制台看到window:

function getAll() {
    var servCall = APIService.getSubs();
    servCall.then(function (d) {
        $scope.subscriber = d.data;
    }, function (error) {
        $log.error('Oops! Something went wrong while fetching the data.')
        //THROW error
        throw error;
    })
}

当 promise .then 方法拒绝处理程序省略 throw 语句时，处理函数 returns 的值为 undefined。这会将转换被拒绝的承诺为已履行的承诺。

$q:

Due to e13eea, an error thrown from a promise's onFulfilled or onRejection handlers is treated exactly the same as a regular rejection. Previously, it would also be passed to the $exceptionHandler() (in addition to rejecting the promise with the error as reason).

-- AngularJS Developer Guide - Migrating from V1.5 to V1.6.

Answer 2

它正在运行，我需要导入一些必要的库，例如 jquery 和 bootstrap.js。但是我发现了另一个问题：起初，我认为我的代码不起作用，可能是我错了，从 webapi 中获取数据的速度太慢了，所以我再也看不到了。 2s后，数据全部显示成功。所以.cshtml文件的速度比.html文件快，是什么原因造成的。有没有人遇到和我一样的问题。

AngularJS 从 WebApi 获取数据 - 错误未显示

AngularJS fetch the data from WebApi - errors not showing

javascript

asp.net-web-api

angularjs

angularjs-http

$q: