Search code examples
javascriptjsonangularjsrestangular

Restangular is not calling the server


I would like to ask some help because I don't know what the problem is in this case.

I have a simple MVC5 application where I want to use angular and restangular. When I load the page the angular controller will be executed but the server is not called. It is just a test method nothing else. The rest service (Webapi2) returns a simple json object.

If I call the webservice by using the browser or Fiddler2 then I get the result what I expect. According to Fiddler the result is json.

When I reload the page I got back nothing, only the promise object, I assume. According to Fiddler there is no server call that time. If I dump out the testResult object (see the TestService.js file below) it contains nothing and I see the there is a property fromServer and the value is false. I assume it indicates whether server communication happened or not.

I went through the restangular documentation but I haven't found anything in it which helps me to get over this case. It doesn't mean that the documentation is wrong. :) I don't know what is the problem.

The expected json:

{"Id":1,"Name":"Egyeske"}

The single html file (_layout.cshtml)

<!DOCTYPE html>
<html lang="en" ng-app="dilibApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
    <body>
        <div ng-controller="TestController">
            Test value: {{testValue}}
        </div>
        <div>
            @RenderBody()
        </div>
        <div>
            <script type="text/javascript" src="~/Scripts/angular.js"></script>
            <script type="text/javascript" src="~/Scripts/angular-route.js"></script>
            <script type="text/javascript" src="~/Scripts/angular-resource.js"></script>
            <script type="text/javascript" src="~/Scripts/restangular.js"></script>
            <script type="text/javascript" src="~/Scripts/lodash.js"></script>
            @* dilibApp module *@
            <script type="text/javascript" src="~/Scripts/AngularModules/dilibApp/dilibApp.js"></script>
            <script type="text/javascript" src="~/Scripts/AngularModules/dilibApp/Controllers/TestController.js"></script>
            <script type="text/javascript" src="~/Scripts/AngularModules/dilibApp/Services/TestService.js"></script>
        </div>
    </body>
</html>

The dilibApp.js file:

'use strict';

var dilibApp = angular.module('dilibApp', ['restangular', 'ngRoute', 'ngResource']).
config(function (RestangularProvider)
{
    RestangularProvider.setBaseUrl('http://dev.dilib.local/service/webapi/');
});

The TestController.js file:

'use strict';

dilibApp.controller('TestController', function ($scope, testService)
{
    $scope.testValue = testService.get();
});

The TestService.js file:

'use strict';

dilibApp.factory('testService', function(Restangular) {

    var testResult = Restangular.all('http://dev.dilib.local/service/webapi/test');

    //console.log(Restangular);
    //console.log(testResult);
    return {
        get: function() {
            //console.log(testResult.one());
            return testResult.one();
        }
    }
});

Solution

  • Document

    Restangular.all('link').getList(); Restangular.one('link').get();

    So you should put the method .get() after method .one() to get single result or .getList() to get a list of results