title: AngularJS and Rest Service
body: <p>I've recently started experimenting with <strong>AngularJS</strong>. I am building a simple html5 application that updates a <strong>MySQL</strong> database. </p>
  
  <p><em>[index.html]</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="MyProject"&gt;
  &lt;head&gt;
      &lt;title&gt;My Project&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/main.css" type="text/css"&gt;
      &lt;script src="lib/angular-1.0.1.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular-resource-1.0.1.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="main-content" ng-view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>[{"id":"1","title":"Airport"},{"id":"2","title":"Bus Station"}]
  </code></pre>
  
  <p>I create the service in AngularJS using the following code:</p>
  
  <p><em>[services.js]</em></p>
  
  <pre><code>angular.module('myDB', ['ngResource']).
  factory('LocationTypes', function($resource) {
      var LocationTypes = $resource('http://localhost/project/api/locationtypes', {}, { query: {method: 'GET', isArray: true}});
      return LocationTypes; 
  });
  </code></pre>
  
  <p>I also use the following code to create the app module:</p>
  
  <p><em>[controllers.js]</em></p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>The problem is that I get no results after querying the service. The <code>locationTypes</code> array is of zero length when I debug. I am using the latest AngularJS release [1.0.1]. What do I miss?</p>