AngularJS Organization of Simple Ajax Program?

Question

There are three major parts of this program. One is an input form, one is a php file, and the last is a table. The when the user enters a query into the input form, the php file should perform a custom query based on what was entered in the input form, and then return the result in JSON format. A table should then be made, based on the results. And, if the user enters a new query into the input form, the old table should be replaced by a new one.

I am wondering what the best AngularJS structure for such a program is? I was thinking the following: I make a controller, and add some results dictionary list to the $scope of the controller, which stores the JSON output of the sql query. I also bind the input form to some variable $scope.input. Then, I add a function $scope.performQuery() to the query, which makes a customized AJAX call to the PHP file based on $scope.input, which of course means that I should make my controller have a dependency on $http.

Would, this be the best structural approach to this? I am new to AngularJS, so I wasn't sure if there is a more elegant way.

write the simplest working code you can, then make refactoring, you can follow this style guides https://github.com/johnpapa/angular-styleguide — fantarama, Jun 23 '15 at 14:05

score 2 · Accepted Answer · edited May 23 '17 at 11:59

Treat the PHP as a service and split the angular client by its concerns.

For example

Service

PHP - Returns array of JSON objects

Client

Angular controller that will call PHP and bind results to a $scope variable
HTML page template that will bind $scope variable to HTML table. (There are plenty of examples on how to do this but here's an answer that shows it Bind json to HTML table with AngularJS on page load)

score 1 · Answer 2 · edited May 23 '17 at 12:31

To keep this simple... To me you have data/backend layer, ajax layer, and table layer.

First off, you are going to need to wire up your input to the scope... this is simple. and you have three actions as to how you can fire the function (which will fire the ajax call)

First you can have a button

<input ng-model="queryData" type="text"> <button ng-click="sendCall()"></button>

Second you can have it fire an ajax call, everytime the user changes the contents of the input

<input ng-model="queryData" type="text" ng-change="sendCall()">

Third (but probably the least popular), you can fire the call everytime that the user clicks outside of the input.

<input ng-model="queryData" type="text" ng-blur="sendCall()">

Now you are going to need to fire the AJAX Call from within your controller:

$scope.sendCall() = function(){
    var data = {
         query: queryData
  }

 $http.post('linkToEndpoint.php',data).success(function(result){
   //If your ajax call worked you will store the contents into your results
   //variable

   $scope.results = result;
 }).error(function(error){
     //If it fails... console the error to see what went wrong
     console.error(error);
 })
}

for PHP on the backend, you'll need to create an endpoint that will make the query, to save myself some typing, I'll refer you to an answer that I gave someone similar here.

Once you have the data successfully sent back to you... you just need to run NG-REPEAT to display the data:

 <table>
 <tr ng-repeat="result in results"> 
  <td>{{result.data}}</td>
 </tr>
 </table>

AngularJS Organization of Simple Ajax Program?

2 Answers2