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.

OK I found the $resource code, which in 1.0.1rc3 requires that I include angular-resource.js. ngResource is in the module. The comments in the actual angular-resource.js code shows details, following those and will post if I find a solution. — noogrub
– noogrub, Commented Jun 30, 2012 at 22:17

knorthfield · Accepted Answer · 2013-02-06 19:46:53Z

4

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

edited Feb 6, 2013 at 19:46

knorthfield

7347 silver badges15 bronze badges

answered Jul 2, 2012 at 22:44

Noah Freitas

17.5k11 gold badges53 silver badges67 bronze badges

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

6 Comments

noogrub Over a year ago

Thank you, Noah, I appreciate your comments. I was starting to wonder if anyone out there is reading these. Cheers from Bloomington, Indiana.

noogrub Over a year ago

Actually, I plugged that in and it does not work. Mystified as to why.

Noah Freitas Over a year ago

Weird, I set it up locally and it worked fine. What kind of error messages are you getting? Not that I'm an expert on deciphering Angular's errors.

noogrub Over a year ago

I'm curious what IDE you are using. I have been using the Eclipse javascript plugin, but yesterday I was doing an SVN update and a whole section of files disappeared off my Mac. I had to do a complete time machine backup this morning. Arg! However, I was getting no errors that I could see. It silently just failed to work. I'll get things set up and going and report back. Thanks!

Noah Freitas Over a year ago

@noogrub I use Eclipse with Aptana and git for source control. Once you get everything set up again, let us know if any javascript errors are coming up in the webkit inspector or firebug.

|

noogrub · Accepted Answer · 2012-07-01 10:10:48Z

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.

Collectives™ on Stack Overflow

connect AngularJS to mysql using my PHP service?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related