從angularjs消費REST Web Api服務

Question

靜脈？

我正在開發一個程序，該程序應該能夠從MVC .net服務器恢復數據並在angularjs前端中可視化它們。 不幸的是沒有用。 這是代碼：

MVC控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;
using MvcPrueba.Models;
using System.Diagnostics;
using System.Web.Mvc;

namespace MvcPrueba.Controllers
{
public class ValuesController : ApiController
{
    #region camposPrivados
    private static Logica l;
    #endregion
    #region metodosREST
    // GET api/values

    public IEnumerable<TablaEntrada> Get()
    {
        Debug.WriteLine("Llamada GetAll");
        return l.getTEList();
        //return new string[] { "value1", "value2" };
    }
    /*public JsonResult Get()
    {
        return l.getTEList();
    }*/

    // GET api/values/5
    public string Get(int id)
    {
        return l.getSingleTE(id);
        //return "value";
    }

    // POST api/values
    public void Post([FromBody]string value)
    {
        l.addNewTE(value);
    }

    // PUT api/values/5
    public void Put(int id, [FromBody]string value)
    {
        l.modifyExistingTE(id, value);
    }

    // DELETE api/values/5
    public void Delete(int id)
    {
        l.deleteExistingTE(id);
    }
    #endregion
    #region metodosInicio
    public static void App_Start()
    {
        l = Logica.fillListaTE();
    }
    #endregion
}
}

而且，angularjs工廠：

(function () {

var ETFactory =   function ($http, $window) {
    var TEs = [];

    var factory  =   {};
    factory.bidaliGetAllRequest = function () {
        $http.get('http://localhost:50059/api/values').
            success(function (response) {
                TEs = response;
                $window.alert("Http request OK, values:"+"\n"+TEs[0].descripcion+"\n"+TEs[1].descripcion+"\n"+TEs[2].descripcion);
            }).error(function () {
                $window.alert("error");
        });
    }
    factory.getTEs =   function () {
          /*$http.get('http://localhost:50059/api/values').
            success(function (response) {
                TEs = response;
                $window.alert("OK.\n"+movimientos[0].descripcion);
                return TEs;
            });*/
        return http.get('http://localhost:50059/api/values');
    }
    factory.anadirNuevo = function (nuevo) {

    }
    /*
    factory.cambiarvalor =   function ()  {
      if (a.valor == "a")
      {
        b.visible = false;
        c.enabled = "checked";
        movimientos[4].dominio =   ["opcion1","opcion2","opcion3","opcion4","opcion5"];
      }
      else
      {
        b.visible = true;
        c.enabled = "";
        movimientos[4].dominio =   ["opcion1","opcion2"];
      }

    };*/
    return factory;
}

controlCajaApp.factory('ETFactory', ETFactory);
}());

我知道http請求到達后端，我做了一些嘗試。 關鍵是前端沒有任何改變。 有任何想法嗎？

編輯：

開發者工具的“網絡”標簽和控制台的屏幕截圖：

http://i.stack.imgur.com/W815y.jpg http://i.stack.imgur.com/usZ0f.jpg

EDIT2：

這是控制器，它調用工廠：

(function () {
var ControlETCtrl = function (ETFactory, $scope, $http, $window) {
    var scope = this;

    scope.titulo = "Mi tabla de entradas";

    scope.movimientos = ETFactory.getTEs();
    //scope.movimientos = [];

    scope.funciones = {};
    scope.cargarDatos = function () {
        /*ETFactory.bidaliGetAllRequest();*/
        $http.get('http://localhost:50059/api/values').
            success(function (response) {
                this.movimientos = response;
                $window.alert("OK.\n"+movimientos[0].descripcion);
            });
    }
    function cargar (){
        $http.get('http://localhost:50059/api/values').
            success(function (response) {
                this.movimientos = response;
                $window.alert("OK.\n"+movimientos[0].descripcion);
            });
    };
    scope.funciones.cambiarvalor = function () {
        ETFactory.cambiarvalor();
    }
    scope.funciones.guardarMovimiento = function () {
    /*
        var auxCopyMov = angular.copy(scope.nuevoMovimiento);
        auxCopyMov.tipo = scope.funciones.tipo(auxCopyMov);
        ETFactory.postMovimiento(auxCopyMov);
        scope.movimientos = ETFactory.getMovimientos();
        scope.total = ETFactory.getTotal();
        scope.nuevoMovimiento.importe = 0;
        */
    }
}
controlCajaApp.controller('ControlETCtrl', ['ETFactory', ControlETCtrl]);
}());

最后是html視圖，其中ai在ng-repeat中使用來自控制器的變量movimientos：

<section name="ET" class="row-fluid">
    <form class="form-horizontal text-left">
        <fieldset>
            <div id="legend">
                <legend class="">{{controlET.titulo}}</legend>
            </div>
            <br>
            <div>
                <div class="control-group" ng-repeat="valor in controlET.movimientos"     ng-show="valor.visible">
                    <label class="control-label">{{valor.descripcion}}</label>
                    <input ng-show="valor.tipo_visualizacion == 2" ng-disabled="valor.enabled" type="text" class="input" ng-model="valor.valor" ng-change="controlET.funciones.cambiarvalor()"></input>
                    <select ng-show="valor.tipo_visualizacion == 1" ng-disabled="valor.enabled" name="v" ng-model="valor.valor" ng-options="v for v in valor.dominio"></select>
                    <!--            
                    <input type="checkbox" ng-show="valor.tipo_visualizacion == 3"              ng-disabled="valor.enabled" type="text" class="input" ng-model="valor.valor" ng-change="controlET.funciones.cambiarvalor()"> 
                    -->
                </div>
            </div>
        </fieldset>
    </form>
</section>

Answer 1

為此更改服務方法

factory.getTEs =   function () {
    var promise = $http.get('http://localhost:50059/api/values').
        success(function (response) {
            TEs = response;
            $window.alert("OK.\n"+movimientos[0].descripcion);
            return TEs;
        });
    return promise;
}

並在您的控制器中編寫此代碼進行測試

ETFactory.getTEs().success(function(data){
    scope.movimientos = data;
});