connect AngularJS to mysql using my PHP service?

Question

I am using AngularJS 1.0, PHP, and mysql with localhost on my Mac.

I have a very simple mysql database: "cats". It has one table called "kittens". The table has two columns, "id" and "name". There are three kittens in the database with names Larry, Curly, and Moe.

Now, I have some simple PHP code which opens the dbase, gets the three records, and returns them in JSON like this: [{"id":"1","name":"Larry"},{"id":"2","name":"Curly"},{"id":"3","name":"Moe"}]

I used the latest angular-seed and set up a project in Eclipse. In app.js I wrote this: 'use strict'; angular.module('Cats', ['ngResource','Cats.filters', 'Cats.services', 'Cats.directives']) I put my PHP code in the services folder and named it "index.php". If I navigate to that services/index.php in my browser using localhost on the Mac, I get back the JSON above. So far everything is cool.

Now - ALL I WANT TO DO (!famous last words ;) is connect to the PHP service I have and display the contents of that Cats table on my main index page using my AngularJS project. Plain old text, no tables, just bind to the available resource and display it.

I have tried all manner of demos online (many are out of date). Can anyone show me one simple, current way to do this? For the life of me I have all kinds of AngularJS demos working but none of them does this simple task in a way I can understand.

Thank you in advance.

Answer 1

This should also work. It's significantly fewer lines of code, but note that any error handling has been removed:

function FetchCtrl($scope, $resource) {
  var services = $resource('../services/index.php');
  $scope.data = services.query();
}
FetchCtrl.$inject = ['$scope', '$resource'];

Normally I would have used the built in .get() method on the $resouce but your response is in the form of an Array, which .query() supports by default.

You can find the documentation on $resource here