Question

我的所有示例程序都遇到了类似的问题，其中包含来自WebApi的angularJS获取数据。我认为与我的代码无关，但有些设置可能会被忽略，请帮我检查一下：这是我的网页api：网址：http://localhost:1883/api/Subcriber 并返回数据：

enter image description here

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.')
    })
}   
})

运行后，浏览器调试窗口中没有错误信息。这太奇怪了，我是否需要将我的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可以从webapi获取数据，但我只是将html代码复制到我无法访问数据的.html文件中。希望有人可以帮助它。代码没有任何问题，可能是我忽略了一些包含。

Answer 1

请务必抛出错误，以便在控制台窗口中看到它：

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语句时，处理函数返回值undefined。这将转换被拒绝的承诺到履行承诺。

$ Q：

由于e13eea，promise的onFulfilled或onRejection处理程序抛出的错误被视为与常规拒绝完全相同。以前，它也会被传递给$ exceptionHandler（）（除了以错误为理由拒绝承诺）。

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

Answer 2

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

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

2 个答案:

$ Q：