-1

I have recently started learning AngularJS and trying to invoke REST service from AngularJS using $resource.My REST service is up and running and it gives me a json output when I hit the REST url in the browser but when I try to invoke it from AngularJS nothing happens. I am sure I am missing something.I have already googled this issue and also looked at similar questions on stackoverflow but I couldn't get it resolved and hence I am asking it here.

service.js

var services = angular.module('myApp.services', ['ngResource']);

   services.factory('AngularIssues',
        function($resource){
        return $resource('http://localhost:8181/RestCXF5/services/UserInfo/:id', {} ,{
            get:{method:'GET' , params: {id: '@id'} }
         } );
    });

    services.value('version', '0.1');

controller.js

myApp.controller('fetchUserDetailsController', ['$scope', 'AngularIssues', function($scope, AngularIssues) {

    AngularIssues.get({id:1} , function(UserDetails) {
        $scope.UserDetails = UserDetails;
    });
}]);

In my index.html , I have added

<script src="lib/angular/angular-resource.js"></script>

This is how I am calling my controller

<div class="col-lg-10" ng-controller="fetchUserDetailsController">
            <table ng-table="tableParams" class="table">
                <tr>
                    <td data-title=" 'Name' ">
                        {{UserDetails.firstName}}
                    </td>
                    <td>{{UserDetails.designation}}
                    </td>
                    <td>{{UserDetails.employeeId}}</td>
                </tr>
            </table>
        </div>

My problem is that my REST service is not getting called at all and I get blank table in my html. Can anyone please point out what I am missing here?Thanks!!

I even tried using $http service and I get status as 400. Here is the code.

myApp.controller('fetchUserDetailsController' ,
    ['$scope' , '$http' , function($scope , $http){
        $http.get('http://localhost:8181/RestCXF5/services/UserInfo/1').
            success(function(data) {

                $scope.UserDetails = data;

            }).
            error(function (data, status, headers, config) {
                alert("error" + status);
            });
    }]);
user911
  • 1,509
  • 6
  • 26
  • 52
  • downvoter please provide your reason for downvote. And if you did your angularjs + REST integration correct first time , help others. – user911 Jan 23 '14 at 18:13
  • I was using \\ before port and as per below answer,I removed it but that had nothing to do with the issue.I am currently reading Mastering Web Application development with AngularJS and there is this statement on page 96."If your back-end uses a port number as part of the URL,the port number needs to be escaped while supplying the URL pattern to the $resource call(For example,example.com\\:3000/api).This is required since a colon has a special meaning in the $resource's URL pattern." As a novice in angularJS,I am more confuse as whether to believe the author of the book or answers posted here. – user911 Jan 24 '14 at 18:54

1 Answers1

2

I think this is wrong;

'http://localhost\\:8181/RestCXF5/services/UserInfo/:id'

You cannot to use the back slash \ instead try

http://localhost:8181/RestCXF5/services/UserInfo/:id
Dalorzo
  • 19,834
  • 7
  • 55
  • 102
  • 1
    Without knowing more I'd agree .. the \\ will escape a \ into the URL. Maybe run a fiddle to see what it is returning? – Jeremy Likness Jan 22 '14 at 21:43
  • Don't you think I have tried that? why downgrade the question? I have tried http://localhost:8181/RestCXF5/services/UserInfo/:id and since it was not working and I saw someone using \\ so I tried that. Btw I saw \\ in one of the stackoverflow question only . Here http://stackoverflow.com/questions/17376890/angular-js-full-example-of-get-post-delete-put-client-for-a-rest-crud-backend – user911 Jan 22 '14 at 22:00
  • 2 things I did not downgrade your questions maybe it was someone else secondly are you sure about what is the right URL maybe this http://localhost:8181/RestCXF5/services/UserInfo?:id is what the server is expecting. Try using fiddler as advice by JeremyLikness – Dalorzo Jan 22 '14 at 22:07
  • I am sorry. I can't see who has downgraded but I got really upset since I have known angularJS since just last 1 week and I was looking forward for some help from experts here. It could be silly for an expert but I am beginner. Let me try JS fiddle as suggested by you and Jeremy Likness. Thanks!! – user911 Jan 22 '14 at 22:11
  • My service is returning 400 status code. I even tried using $http but that is also not working. – user911 Jan 22 '14 at 22:41
  • 400 Bad Request. It the means the problem is in your URL – Dalorzo Jan 22 '14 at 22:42
  • what's wrong? I can get the json output when I hit the same url in browser. Then why it's giving bad request when invoked using angular js? I get this output in browser. {"UserDetails":{"designation":"developer","employeeId":12345,"firstName":"John","lastName":"dddd","userId":0}} – user911 Jan 22 '14 at 22:43
  • I am reading Pactpub - Mastering Web Application development with AngularJS and there is this statement on page 96. "If your back-end uses a port number as part of the URL, the port number needs to be escaped while supplying the URL pattern to the $resource call (For example, http://example.com\\:3000/api). This is required since a colon has a special meaning in the $resource's URL pattern." In that case , I think using \\ before port number was never an issue. – user911 Jan 24 '14 at 18:42
  • @user911 I am quoting angular documenation: "if you are using a URL with a port number (e.g. http://example.com:8080/api), it will be respected." http://docs.angularjs.org/api/ngResource.$resource – Dalorzo Jan 24 '14 at 21:44
  • @user911 I have nothing against these AngularJS books but this is a second I came across where things may have moved on with AngularJS now that we are at around v 1.2 at the time of writing this comment. Books have been printed in time. My suggestion is to grab the concepts and philosophy from the AngularJS books And always refer to the API documentation at docs.angularjs.org. You may select specific version of the AngularJS that you are using and you will get the documentation pertaining to it. Above all you will love Angular. Happy Angularizing. – bhantol Aug 08 '14 at 05:15