Consuming REST Web Api service from angularjs

Question

Ça va?

I'm developing a program that should be able to recover data from an MVC .net server and visualize it in an angularjs front-end. Unfortunately isn't working. Here's the code:

MVC controller:

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

And, angularjs Factory:

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

I know the http request gets to the back-end, I've made some tries. The thing is that in the front-end doesn't change anything. Any ideas?

Edit:

A couple of screenshots of developer tools network tab and console:

https://i.sstatic.net/W815y.jpg https://i.sstatic.net/usZ0f.jpg

Edit2:

This is the controller, which calls to the factory:

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

And finally the html view, where a i use the variable movimientos from controller in the ng-repeat:

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

I haven't worked too much with aliases in controllers, but I think that you have to change this line this.movimientos = response; for scope.movimientos = response; — Eylen
– Eylen, Commented Nov 14, 2014 at 10:22
The function where i use that expression isn't being used. I only use the getTEs() function from the factory. In the controller movimientos is declared in this way scope.movimientos = ETFactory.getTEs(); — m.jonian
– m.jonian, Commented Nov 14, 2014 at 10:28

Eylen · Accepted Answer · 2014-11-14 10:51:27Z

1

Change the service method for this

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

And in your controller write this to test

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

answered Nov 14, 2014 at 10:51

Eylen

2,6955 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eylen Over a year ago

Great, just to clarify a bit, your problem was that you were returning the promise and assigning it to the movimientos variable. You have to wait (with the success callback) until the request is completed

m.jonian Over a year ago

Well, i will take it into account next time. :)))

Collectives™ on Stack Overflow

Consuming REST Web Api service from angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related