Angularjs is an best framework to develop the single page application. You have perform this operation (Insert, Update, Delete) in single page without refreshing. So every users are like to implement the AngularJS application. Now we are develop Insert, Update, Delete Using PHP & MySQL in AngularJS framework.

angular

HTML Form and Bootstrap Design

To create responsive layout for this tutorial I am using Twitter Bootstrap. For this first create post directory in your server root folder (htdocs/www). Now create index.html file and add the following html basic markup in it.

Demo
Demo

Now using Bootstrap Grid system I have split into two column. One for display HMTL form and other for to display saved details. Here is the HTML form markup.

Create AngularJS Module:

AngularJS is MVC structured JavaScript framework. It let us do client side work effortlessly, also it reduces server load.

When we go for any framework, it has following advantages.
1. We try to follow that framework design pattern and coding structure.
2. We will write manageable code.
3. It help us to finish task so quickly.

In AngularJS everything is in the module. The module is like container it will have all codes we write for this particular AngularJS application. Then if our module requires some more functionality then we will inject particular module in our AngularJS application using dependency Injection. This avoids unnecessary script loading and also improves performance of the application.

Here is the syntax to create AngularJS module. I am creating ‘postModule’ for this application.

Now apply that crated AngularJS application to HTML DOM using ng-app directive. You may apply this wherever you like to add in your HTML document. I am adding that module in the body tag like this.

When AngularJS compiler encounters this directive then it initialize AngularJS application.
Now Create AngularJS controller. Here is the syntax for creating controller.

It requires name of the controller (i.e. PostController ), followed by anonymous function. By default all the AngularJS Controller will inject $scope service. All the Controller will pass the data from model to view via this $scope service. Here the Controller is like a linker between Model and view.

Configuration of AngularJS modules and scripts

Here our whole AngularJS application script.

Create sample MySQL Database & Table

Use the following SQL queries to create sample table for this application.

PHP web service for AngularJS CRUD operation:

First create config.php file and define site wide constants in it.

Create AngularJS CRUD Code for Ajax

Now create ajax.php file that handles all the Ajax request from AngularJS for Insert, Read, Update and Delete operation. Here is the full PHP script that handles the CRUD operation.

Click to download
Click to download