AngularJS RESTful JSON requests with ngResource and Restangular

i have some problems with angularJS and REST requests / responses. Since three weeks i playing with AngularJS and now i would like do some cool stuff. First i created a simple jersey REST service, that returns a simple list.

@Path("/hello")
public class Hello {


  @GET
  @Produces(MediaType.APPLICATION_JSON)
  public List<Medication> sayJsonHello() {
      List<Object1> objs = new ArrayList<Object1>();

      objs.add(new Object1("1", "HUHU"));
      objs.add(new Object1("2", "HUHU 2"));

      return objs;
  }
}

as you can see, there is no big magic. Here my web.xml file, to configure Jersey:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
     xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
     id="WebApp_ID" version="2.5">
<display-name>Jersey REST Example</display-name>
<servlet>
    <servlet-name>Jersey REST Service</servlet-name>
    <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
    <init-param>
        <param-name>com.sun.jersey.config.property.packages</param-name>
        <param-value>examples</param-value>
    </init-param>

    <init-param>
        <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
        <param-value>true</param-value>
    </init-param>

    <init-param>
        <param-name>com.sun.jersey.config.feature.DisableWADL</param-name>
        <param-value>true</param-value>
    </init-param>

    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Jersey REST Service</servlet-name>
    <url-pattern>/rest/*</url-pattern>
</servlet-mapping>

After some tests, the service will return a simple JSON list:

[
{
  "id": "1",
  "name": "HUHU"
},
{
  "id": "2",
  "name": "HUHU 2"
}
]

I deploying the webservice into a Tomcat7 instance. Now i would like to get this data into my webapplication. After reading some tutorials and example i starting to create few implementations.

After starting create my first service, i and this code-snipped into my app.js:

app.config(['$httpProvider', function ($httpProvider) {
    delete $httpProvider.defaults.headers.common["X-Requested-With"];
}]); 

this will remove X-Request-With request-header from the header defauls.

1. Request via Service and ngResource

angular.module('helloService', ['ngResource']).
    factory('hService', function ($resource) {

        return $resource('http://localhost\\:8180/rest/hello',
            {callback: 'JSON_CALLBACK'}, {
                get: {method: 'GET', headers: [
                    {'Content-Type': 'application/json'},
                    {'Accept': 'application/json'}
                ]}
            });
    });

MyController:

function MyController($scope, hService) {
    hService.get(function(result){
        alert(" Result of helloService");
    }, function error(response){
        alert(" Error during helloService "+response.status);
    }); 
}

if i try to load data, the get functin will always return an error and the status is always 0.

2. Trying with Restangular

After get how to use Restangular i starting to configured Restangular:

app.config(function (RestangularProvider) {
    RestangularProvider.setBaseUrl('http://localhost\\:8180/rest');
});

and also add the RestangularProvider to my angular.module:

var app = angular.module("html5App", ['helloService', 'restangular', 'ngResource']);

MyController:

function MyRestangularCtr($scope, Restangular){

    var all = Restangular.all('hello');
    $scope.allObjects = all.getList();

    all.getList().then(function (hellos) {
        console.log("Result "+ hellos);
    }, function errorCallback(response) {
        alert("Oops error from server :( status" + response.status);
        console.log("status: "+response);
    });
}

Here the same: No Data, Status 0. I have no idea, why i dont get any data from my service. Additional i getting sometimes this error: "Error: $digest already in progress". Im not sure, where the problem is. If the jersey service i wrong or bad or my beginner JavaScript is wrong.

First Solution

Client Side

The Angular request should look like this:

$scope.myData = $resource('http://localhost\\:8180/rest/:action',
    {action: 'hello', callback:'JSON_CALLBACK'},
    {get: {method: 'JSONP'}});
$scope.datas = $scope.myData.get();

The method need to JSONP (GET will still not working ( no repsonse data because CORPS?)

Service Side

Important here is, that the server also response with a JSONP fomat and can handle callback requests.

@GET
@Produces("application/x-javascript")
public JSONWithPadding sayJsonHello(@QueryParam("callback") String callback) {
    MyObjectList obList= new MyObjectList ();

    obList.getObjs().add(new MyObject(1, "HUHU"));
    obList.getObjs().add(new MyObject(2, "HUHU 2"));

    return new JSONWithPadding(obList, callback);
}

Still unclear

Is there any way to return normal json object from server to client?