AngularJS and Rest Service

Question

I've recently started experimenting with AngularJS. I am building a simple html5 application that updates a MySQL database.

[index.html]

<!DOCTYPE html>
<html ng-app="MyProject">
<head>
    <title>My Project</title>
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script src="lib/angular-1.0.1.js"></script>
    <script src="lib/angular-resource-1.0.1.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
</head>
<body>
    <div id="main-content" ng-view>
</body>
</html>

I used the Slim framework to create a Rest Interface. My database has currently one table named location_types with two columns id and title. I have tested the Rest service in the browser so under api/locationtypes I get the following JSON:

[{"id":"1","title":"Airport"},{"id":"2","title":"Bus Station"}]

I create the service in AngularJS using the following code:

[services.js]

angular.module('myDB', ['ngResource']).
factory('LocationTypes', function($resource) {
    var LocationTypes = $resource('http://localhost/project/api/locationtypes', {}, { query: {method: 'GET', isArray: true}});
    return LocationTypes; 
});

I also use the following code to create the app module:

[controllers.js]

angular.module('MyProject', ['myDB']).
config(function($routeProvider) {
    $routeProvider.
        when('/locationtypes', {controller: LocationTypesCtrl, templateUrl:'forms/locationtypes.html'}).
        otherwise({redirectTo:'/locationtypes'});
});


function LocationTypesCtrl($scope, LocationTypes)
{
    $scope.locationTypes = LocationTypes.query();
}

The problem is that I get no results after querying the service. The locationTypes array is of zero length when I debug. I am using the latest AngularJS release [1.0.1]. What do I miss?

Dan Doyon · Accepted Answer · 2012-06-28 21:48:59Z

1

Is your URL really 'http://localhost/project/api/locationtypes' or is it an external server? If its external, then you have a CORS (cross origin) issue. Unless I'm missing something it looks correct to me.

answered Jun 28, 2012 at 21:48

Dan Doyon

6,7302 gold badges33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vdclouis · Accepted Answer · 2013-08-13 07:46:41Z

1

Probably a CORS issue like Dan said. You can bypass this by adding the following to your module config.

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

Deleting the headers set by Angular should resolve the CORS issue. You should also add a .htaccess file in your api folder. And add this:

Header set Access-Control-Allow-Origin "*"

answered Aug 13, 2013 at 7:46

vdclouis

1,1949 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS and Rest Service

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related