Consuming Json with AngularJS

2

I'm trying to access a EndPoint through AngularJS.

This is my Service:

angular.module('empresa-view')
    .factory('empresaService', ['$resource', function ($resource) {
        return $resource($SERVICES_CONTEXT + 'empresa/:params', {}, {
            update: {
                method: "PUT"
            },

            lista: {
                method: 'GET',
                params: {params: 'list'},
                isArray: true

            }

        });

    }]);

When I run the application it gives the following error:

  

GET XHR link [HTTP / 1.1 405   Method Not Allowed 5ms] error [object Object] main.js: 12: 21 Request   cross-origin blocked: Same Origin Policy (Same Origin   Prevents the remote resource from reading    link . (Reason: the header   CORS 'Access-Control-Allow-Origin' is not present).

But if I change the empresa/:params by empresa/list' it works and I can display get the data. Why params is not working?

    
asked by anonymous 11.09.2015 / 15:19

2 answers

1

Hello.

I think the design of the AngularJS service fatctory is wrong.

Here's the official documentation link $ resource

To do this as you would have to pass the: params on the service call, for example.

meuServico.$lista({params: list});

In the declaration of the service itself would be

angular.module('empresa-view')
    .factory('empresaService', ['$resource', function ($resource) {
        return $resource($SERVICES_CONTEXT + 'empresa/:params', 
        {params: list}, 
        {
            update: {
                method: "PUT"
            },

            lista: {
                method: 'GET',
                isArray: true

            }

        });

    }]);

But I see no reason to do so.

When you declare the defaultParams within the service itself it passes via URI, for example link .

That's why it alleges cross-origin violation.

  

Edited

You could do the following (if you feel better)

angular.module('empresa-view')
        .factory('empresaService', ['$resource', function ($resource) {
            return $resource($SERVICES_CONTEXT + 'empresa/:params', 
            {params: @parametros}, 
            {
                update: {
                    method: "PUT"
                },

                lista: {
                    method: 'GET',
                    isArray: true

                }

            });

        }]);

So when you instantiate this service, you can go directly through the property of the object. For example

var meuServico = new empresaService();

meuServico.parametros = "list";

meuServico.$lista();
  

Edited to better answer the query question

By default all angled services have these methods

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

Using the factory is as if you won these token invokers. So even without declaring the query, it knows there is a query method that is bound to be a GET service that expects an ARRAY response and the declared URL will be requested.

And since everything in the angle works as a dependency injection, as you pass the service to your controller, you can already access it directly if you need to use new new to assign aspects of your service to another object (prototyping).

    
11.09.2015 / 16:09
1

The problem is that your server needs CORS access to be able to run JSON output, put this in the header of your JSON output:

header('Access-Control-Allow-Origin: *');

And for your entire application, define useXDomain :

angular.module('empresa-view')
    .factory('empresaService', ['$resource','$httpProvider', function ($resource,$httpProvider) {
          $httpProvider.defaults.useXDomain = true;
          delete $httpProvider.defaults.headers.common['X-Requested-With'];

     var params = {'list':'list','param1':'valor_param1'} 
        return $resource($SERVICES_CONTEXT + 'empresa', params, {
            update: {
                method: "PUT"
            },
            lista: {
                method: 'GET',
                isArray: true,

            }

        });

    }]);

Here are some examples: link

    
11.09.2015 / 16:01