He encontrado un problema similar para todos mis programas de ejemplo con datos de recuperación angularJS de WebApi. Creo que no hay nada que ver con mi código, pero algunas configuraciones que se pueden ignorar, por favor, ayúdenme a verificarlo: Aquí está mi API web: URL: http: // localhost: 1883 / api / Subcriber y devolver los datos:

enter image description here

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

Módulo AngularJS:

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

Servicio AngularJS:

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

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

Después de ejecutar, no hay información de error de la ventana de depuración del navegador. Es demasiado extraño, si necesito publicar mi webapi en IIS y luego llamarlo.

Actualización: 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 podría obtener los datos del webapi, pero solo copié el código html en un archivo .html que no pude acceder a los datos. Espero que alguien pueda ayudarlo. No hay nada malo con el código, puede ser que ignoré algunos incluye.

0
qianli 6 mar. 2017 a las 17:13

2 respuestas

La mejor respuesta

Está funcionando, necesito importar algunas bibliotecas necesarias, como jquery y bootstrap.js. Pero encontré otra pregunta que: al principio, creo que mi código no funciona, puede estar equivocado, la velocidad de recuperación de datos desde el webapi es demasiado tardía, por lo que ya no lo veo. Solo 2 segundos después, todos los datos se muestran con éxito. Por lo tanto, la velocidad del archivo .cshtml es más rápida que la del archivo .html, lo que causó este problema. ¿Alguien tiene el mismo problema que el mío?

0
qianli 7 mar. 2017 a las 07:57

Asegúrese de lanzar el error para verlo en la ventana de la consola:

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

Cuando un controlador de rechazo de método prometedor .then omite una instrucción throw, la función de manejo devuelve un valor de undefined. Esto convertirá una promesa rechazada en una promesa cumplida.

$ q:

Debido a e13eea, un error arrojado de una promesa se cumple o se trata. exactamente lo mismo que un rechazo regular. Anteriormente, también se pasaría al $ exceptionHandler () (además de rechazar la promesa con el error como razón).

- Guía del desarrollador de AngularJS - Migración desde V1.5 a V1.6.

0
georgeawg 6 mar. 2017 a las 20:06