insert a record to mysql database using angularjs

i wish to insert a record in mysql table using angularjs. Table: Product product_id, name, description.

i wish to have two text fields and a save button and on the click of save button record should be inserted in mysql table. i referred to the following link :

but all in vain...

index.html

    <html ng-app>
    <head>
        <script src="../angular-1.0.1.min.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body>
    <ul ng:controller="ProductListCtrl">
        <li ng:repeat="product in products">
            {{product.name}}
        </li>
    </ul>
    <form method = 'post'>
        Name : <input type = 'text' name = 'txtName'/>
        Description : <input type = 'text' name = 'txtDescription'/>
        <button ng:click="saveProduct()">New Product</button>
        <div id="content">
            <ng:view></ng:view>
        </div>
    </form>
    </body>
</html>

where do i write saveProduct() method and what should i write in it?

what should i do to add a record in mysql from angularjs?

AngularJS is a client side MV* framework. Most Client side frameworks expect that the decision with regard to the DOM manipulation be left to them and they be just fed the data from the server side.

This data will ofcourse in your case be stored in MySQL which you will have to retrieve through PHP and write a simple RESTful interface to your DB. In your angular code, say your PHP restful endpoint would be something like

http://mywebsite.com/api/product

If you do a simple POST call through ng-resource it is equivalent to making a save on your DB. For details on how to set this up, you could have a look at some of the ng-resource examples floating around.

Your save product method should contain a $http.post method as follows

$http.post('/api/products', $scope.form).

define the form in html as follows

<input ng-model="form.txtName" type="text" name="txtName" /> <input ng-model="form.txtDescription" type="text" name="txtDescription" />

You need to define the REST API for /api/products using your PHP code the $http.post method would send a json to the server

It is difficult to give the complete code for what ganaraj explains as it involves server and client side code.

On client side you should write a saveProduct() function/method in your controller...from there you can either send an HTTP request (using $http object for example, which is built in to angularJS) directly or write an Angular Service which will send the request also using $http or $resource (I personally find $http a bit easier to understand). The service then has to be injected in the controller so your controller can call its (the services) saveProduct() method.

What you definitely need is a REST interface / Web Service API on your server side. A web service "takes" the incoming HTTP request and in turn executes some sort of server side functionality which sends off the actual SQL statement to your database in order to save a product.

There will normally be no SQL code sent directly from the client to the server. In fact I am not even sure this is possible...you would need some "in between" piece of software like JDBC when using Java in order to have your programming language talk to the database. As far as I know nothing of that kind exists for AngularJS as the commonly used archtecture/design pattern is to use REST services / a Web service API.

The following link might help you if you use PHP on server side (it explains how to set up a simple REST API):

creating simple REST API using PHP

I found this link useful on how to implement the Controller and Service to send the HTTP request to the server:

Posting Form Data With $http In AngularJS