Search code examples
javascriptangularjsrestangular

Creating a Demoapp using restangular at the local server


I am prefrebly very new in the angular js and upto to the point I was using the $resource for the get and put but now my requirement is to use the Restangular

I have created a demoapp here

/* my json file with the name user.json */
{"user":[
{"id":1,
"subject":"#aashima"
},
{"id":2,
"subject":"#aansh"
},
{"id":3,
"subject":"#artle"
},
{"id":4,
"subject":"#harish"
}
]
}
<!doctype html >
<html ng-app="app">
<head>
    <meta charset="UTF-8">
	
    <title>Restangular</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
    <div ng-controller="IndexCtrl as omega" ng-cloak>
        <ul>
            <li ng-repeat="result in omega.people">
                <span ng-bind="result.subject"></span>
            </li>
        </ul>
    </div>
 
    <script>
        var app = angular.module('app', ['restangular'])
            .config(function(RestangularProvider) {
                RestangularProvider.setBaseUrl("/js/user.json");
            });
 
        app.controller('IndexCtrl', function( Restangular) {
            var self=this;
            /*
            self.people = Restangular.all('user').getList();
            */
            Restangular.all('user').getList().then(function(result) {
            self.people = result;
            });
        });
         
    </script>
</body>
</html>
Here It shows the path showing how I have arranged the file enter image description here

In the console it Clearly shows that get request is being made but no data came

I cant been able to remove the bug causing the problem here any help is appreciated


Solution

  • var app = angular.module('app', ['restangular'])
                .config(function(RestangularProvider) {
     RestangularProvider.setBaseUrl("js");
                });
     
            app.controller('IndexCtrl', function( Restangular) {
                var self=this;
               /*
                * We can use this one 
                self.people = Restangular.all('emp.json').getList().$object;
               */
               
               /* or we can use this one */
                Restangular.all('emp.json').getList().then(function(result) {
                self.people = result;
                });
                
               
                
            });
    
    
    
    /* this is should be the json response which is get  */
    
    [
    {"id":1,
    "subject":"#aashima"
    },
    {"id":2,
    "subject":"#aansh"
    },
    {"id":3,
    "subject":"#artle"
    },
    {"id":4,
    "subject":"#harish"
    }
    ]

    So this here will represent a simple app which can implemented on the local server