connect AngularJS to mysql using my PHP service?

Question

connect AngularJS to mysql using my PHP service?

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.

php
mysql
angularjs

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

Answer 2

OK. Solved it. First, copied and added a controller I found in one of the examples:

    function FetchCtrl($scope, $http, $templateCache) {
        $scope.method = 'GET';
        $scope.url='../services/index.php';  
        $scope.fetch = function() {
            $scope.code = null;
            $scope.response = null;

            $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
            }).
            error(function(data, status) {
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
        };

        $scope.updateModel = function(method, url) {
            $scope.method = method;
            $scope.url = url;
        };
    }

Then, I added a route controller to my module:

var module = angular.module('Cats', ['ngResource','Cats.filters', 'Cats.services', 'Cats.directives'])
    .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/main', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});

Finally, on that partial1.htm page, I added this:

<div ng-init="fetch()">
    {{data}}
</div>

Now when I go to that page in the browser, I can see the entire database dumped out in JSON. Ahhhh. Clearly there are many more sophisticated things to try, etc etc but I needed this simple result so I could be certain that I did in fact have a model arriving when summoned. Angular dies silently in many cases, so a visible result was quite helpful.

One gotcha: be careful that the php file is executable by more than yourself as user. I don't know the name of the user that AngularJS implements but I had to chmod 644 index.php so the app could use it.

I hope that helps someone.