Consume Rest with Angularjs

Asked

Viewed 1,682 times

1

I created a Webservices to receive query by string and return a list, example:

url/mePath/Luiz - Since Luiz is the parameter that will be passed, based on this parameter will return me a list of Luiz.

In Angularjs I can: List All, Search by ID, Delete, Change and I can’t pass a parameter as a string. Follow the code snippet:

reportServices.factory('MeuServico', ['$resource',
    function($resource){
   return $resource('/url/meuPath/:nome', {}, {
    query: { method: 'GET', isArray: true },
    queryParameter: { method: 'GET',  params: {query: '@nome'} , isArray: true,} 
  });
}]);

Angularjs generates the url like this: /url/meuPath?0=%2F&1=a&2=b&3=e&4=r&5=t&6=a

As he generated in this way the Angularjs discards the q comes after the "?" and ends up falling in the service to list all.

NOTE: if I change the /url/meuPath/:nome for /url/meuPath/nome query is done correctly by passing the variable name and not the value.

Solution

My mistake occurred by the following:

When I called the service I was doing so:

MeuServico.Query("Amarelão");

Since I should call it that:

animal.nome = "Amarelão";

MeuServico.Query(animal);

By doing this the service can access the services of the service without generating the URL as if the parameter were an array

javascript angularjs rest

  • Recently I did a series of slides for a course here at the company that was just about that: Integration with Angular and Webapi. At the end of the course I posted the slides on Slideshare, take a look, it may be useful. http://pt.slideshare.net/anisanwesley/angular-jumpstart-1-introduo-38460785 The description of this one contains the other slides

2 answers

1

Apparently the problem is in

queryParameter: { method: 'GET',  params: {query: '@nome'} , isArray: true,}

The name parameter is not an array, so it should be

queryParameter: { method: 'GET',  params: {query: '@nome'} , isArray: false}

0


I didn’t exactly understand the problem with your code. I played your code in Plunker with a few changes:

http://plnkr.co/edit/sTc7jcRXvIsth5Ht0mZR?p=info

var app = angular.module('plunker', ['ngResource']);

app.factory('MeuServico', ['$resource', function($resource) {
  return $resource('/url/meupath/:nome', null, {
    query: {method: 'GET', isArray: true},
    queryParameter: { method: 'GET',  params: {query: '@nome'} , isArray: true}
  });
}]);

app.controller('MainCtrl', function($scope, MeuServico) {
  $scope.name = 'World';
  $scope.enviar = function() {
    $scope.name = 'Yuri';
    MeuServico.queryParameter({
      nome: 'yuri',
      grupo: 'programadores'
    });

    MeuServico.query({
      nome: 'yuri2',
      grupo: 'html'
    });
  }
});

  • The problem occurred in the way I was passing the parameter to the service. For example: Search an animal by name. It should look like this: animal.nome = "Amarelão"; and when I would pass I would pass animal' para o service e no service eu iria esperar o atributo @`name. The error occurred pq was trying to call the service already passing the value of the name directly.

Browser other questions tagged javascript angularjs rest

You are not signed in. Login or sign up in order to post.