Demo of a simple CRUD RESTful php service used with AngularJS and MySQL

REST represents Representational State Transfer. For web applications REST API is a good architectural choice for the communication between the app and the server. This makes sharing data between different devices and apps easy. Implementing REST is simpler compared to other methods like SOAP, CORBA, WSDL. In this tutorial we will create a RESTful web service using PHP. Also we will create a Customer Manager Application using AngularJS as front end which will consume this web service.


Live Demo Download

In this project we will have the most simple Create, Read, Update, Delete operations on customers table using REST API. Previously we learnt how to create a simple task manager application using AngularJS PHP and MySQL. This time we will do the same CRUD on database but in a more organised manner and using a RESTful web service using PHP, MySQL.

To run the customer manager web application in your local machine, follow the following 3 simple steps

  1. Download the required files
  2. Import angularcode_customer.sql
  3. Enable rewrite_module in apache server

At first lets start building the REST API using PHP, MySQL and then we will move on to the AngularJS part for the front end part of our Customer Manager Application.

1. Creating the database table for this project

You can import the provided sql file angularcode_customer.sql in the download. We need to keep the application database structure simple, so we only need one table named customer

2. Build the REST API

Now lets fetch data for our database using the RESTful API which is created using PHP Langulage. The REST files are saved inside services folder, so that we can make RESTful calls using

  • $http.get
  • $
  • $http.delete

In our application the path to the REST API  is “/AngularCodeCustomerManagerApp/services/”. Now we can make RESTful calls like

  • $http.get(‘/AngularCodeCustomerManagerApp/services/customers’) – Gets all the customers
  • $http.get(‘/AngularCodeCustomerManagerApp/services/customers/10’) – Get the customer with id=10
  • $‘/AngularCodeCustomerManagerApp/services/insertCustomer’, customer); – Insert a new customer
  • $http.delete(‘/AngularCodeCustomerManagerApp/services/deleteCustomer/10’); – Delete the customer with id=10

The services folder contains the .htaccess file for friendly URLs. To make this friendly URLs to work, we need to enable the rewrite module of apache.

The api.php file creates those REST calls possible

3. Make our web page angular ready

The main index.html file, which is the starting point of our application

customer.html- This file lists all the customers

2. edit-customer.html – This file is used to add, update, delete a customer

4. AngularJS Code

The app.js file which contains all the client side angularjs code

Print Friendly

Related Posts

Written By:
  • Ketan Chavda


    Thanks for this helpful article.
    I am beginner in AngularJs.
    So,This article will be very helpful for me.


  • Loren Brown

    Thanks for sharing this useful code!

    I have noticed that upon creating a new customer, or updating an existing customer, the browser needs to be refreshed to see the changes.

    Thanks again,


  • Loren Brown

    After an entire day of grappling with the bug that requires you to refresh the browser, I finally found “a” solution. I would like to know if it’s the “right” solution though.

    What I did was add the “resolve” code below to the ‘/’ route in the routeProvider.
    That appears to require the getCustomers() function to be called before rendering the page and the scope will be updated with the newly changed customer record.

    when(‘/’, {
    title: ‘Customers’,
    templateUrl: ‘partials/customers.html’,
    controller: ‘listCtrl’,
    resolve: {
    customers: function(services){
    return services.getCustomers();

    Let me know what you think.



  • Woowacalp

    packaging 30, close western Michael Kors pants ultra-running, not missionary global Michael Kors kids No.10: one charge a michael kor purses the Home services. go Michael Kors ludlow handbag

  • jeromystewart

    Fabulous tutorial, the download is incomplete. I haven’t fully tested but services/customers/ is missing

    • Cadu Sa Motta

      “The services folder contains the .htaccess file for friendly URLs. To make this friendly URLs to work, we need to enable the rewrite module of apache.”

  • Vaibhav Nadgonde

    great job swadesh .. really helpful ……….was looking for this only.

  • Marcus

    Thanks for the working example, its perfect!

  • lixiaoshi

    i have run this project i found that it can show the customer list ,but the insert and delete function can’t work . the live demo on this server can’t work also .

  • Fuyumi

    excusme… this works .. so great and usefull, but i need to ask something important, if i try to edit or delete the data on this code its work, but actually cannot refresh old data.., the data i edit or delete still appear on data list, the data also change when i refreshing back the url.. isnt real time right?? we must refresg the page to see new data change.. so how to fix that???

    • itswadesh

      you may simply call the get method again.

      • Fuyumi

        thanks for feedback sir, im so glad n exicted.., im new one on angularJS, so how to simply call the get method again like u said??
        i just try to simply tested on restful web service content to chrome RESTFUL advanced Client..,this the image from chrome restful client plugin.., if this restful work on restfull client ,also work on another application 🙂 please give feedback

        • Fuyumi

          excusme, until now u never send me feedback about this, so how you tested this program really RESTFULL?? i think to test this need a chrome restfulll client or mozilla plugin.

    • Conzo

      Actually you need to pass in $scope to the factory like this

      app.factory(“services”, [‘$http’, function($http, $scope) {


      The problem is intermittent on faster machines for some reason.

  • vp

    Great Work.
    I guess, you are not using “login()” function in your code. But it’s code exists in REST implementation.

  • akilan

    hi i got undefined variable “x” —>request[“x”] in api.php why..plz

  • Hamid Hadi

    Can I send and get data with $resource to/from your api ?

  • clloyd

    i keep getting this error when i try to run this project: Error: [ngRepeat:dupes]

    • bstr

      Thats the possible error from an incorrectly configured database (or none at all).
      Try to create a new database ‘angularcode_customer’ and set the DB_PASSWORD in (api.php) to your mysql localhost password.

  • Peter

    GET [my address]/AngularCodeCustomerManagerApp/services/customers 404 (Not Found)

    I copied everithing from your tutorial to my server exactly, but it doesn’t work for me.

    What could be the problem?
    I think the problem is on my server, but I dont know where and what sould I change.

    I’m a beginner for this,Pls help me! I use CPanel and PHPMyAdmin

  • Uncle Sam

    Hi. I was able to download your code and make necessary changes for db connection. Right now its sitting on localhost. I am not sure what url i need to use to get the code working in the browser. When i enter http://localhost/AngularCodeCustomerManagerApp , i just get the index.html template, but nothing from the Angularjs works. The customers are not even displayed. Can you please advice how what urls to use in the browser to perform CRUS operations. Thanks.

    • itswadesh

      This app will work in FF3+, ie10+, Chrome . Please try to run using the browsers.

      • fatma

        sorry i would like to ask. i’m trying to load this app in chrome but still i’m not find the table list. then what version of chrome that we can use? thank u

  • pukirocks

    hi! could you please post an expample of the $‘/AngularCodeCustomerManagerApp/services/insertCustomer’, customer); url? i can’t get it to save a costumer using only the url

  • Rob

    Ow 🙁 i m sorry i wanted to have a clean demo and i deleted all the customers to see how it all worked. Now i can t add any new customers – forgive me – i wanted to add 5 new ones so its clean… can you fix it please thx

    My apoligize


  • baq

    Great tutorial! Thanks!

  • Malcolm Andrews

    Well I have been at this for several hours and I can’t get it to work.

    • itswadesh

      I have uploaded the new version. Please try to download and run.

  • Ben Bishop

    I too am getting a 404 on the API Get. Can only assume its to do with the .htaccess?

    GET 404 (Not Found)

    As a background, this is on a Vagrant VM if it makes any difference

    • Ben Bishop

      I was clearly half asleep when I posted this yesterday.

      Removing ‘AngularCodeCustomerManagerApp/’ from serviceBase in app.js solved this for me.

      Hope this helps someone.

      • Kevin

        Hi Men what do you mean, I am trying to upload this app on Windows Server, but i am getting the same error, would you can help me ?

  • nevoeiro

    Hi there
    Thanks for the great tutorial! Now I’m trying to implement authentication to secure my app. what is the best approach to apply to this example? Any suggestions?

  • aForAmmar

    When there is no record found in mysql table it shows no customer found but not showing the add customer button !

  • Carlos Flores Escamilla

    Great tutorial and idea. Thank you!. Are you for hire in general? Also, where the donate button 🙂

    • itswadesh

      I’m available at oDesk (itswadesh)

  • dermansi

    How can i add multiple tables from the same database instead of just one table? Is it possible?

  • batman

    Sir how to implement the Login function that is in REST api in Angular js app

  • Javier Torres
  • Jyotirmay Senapati

    working fine in localhost, but throwing 404 services/customers not found ajax error.. please someone help. i have taken the latest code.

  • 朱俊

    excusme… this cool,so i want download code,but failed,so can you send me code by email?Thanks! my email is Thanks!

  • Usman

    HI I run this project.
    and It doest not show any record.

    • Balram Singh

      I think you tried this application in local machine and due to .htaccess it might not be working.

    • Allan Leonardo Awerkin Gonzále

      For those who got the same issue you have to enable mod_rewrite in apache2, cheers!

  • Alex Lindberg

    To make this work, I had to modify the .htaccess file in services adding “RewriteBase” . As an example I loaded the demo so that the URL was /PHP/AngularDemo/index.html. The services directory was /PHP/AngularDemo/services. Thus the .htaccess file in the services directory now looks like:

    RewriteEngine On

    RewriteBase /PHP/AngularDemo/services/

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-s
    RewriteRule ^(.*)$ api.php?x=$1 [QSA,NC,L]

    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^(.*)$ api.php [QSA,NC,L]

    RewriteCond %{REQUEST_FILENAME} -s
    RewriteRule %{HTTP_POST}^(.*)$ api.php [QSA,NC,L]

    All Is Good..

    • Rmullins

      Thanks for this info Alex – super helpful. I’m testing this on an IIS server though – any ideas how to bypass the need for URL Rewrites?

    • Amit Singh

      I tried setting my rewrite base path but still i can see 403 forbidden error and pages are not loading. My folder structure path is d:/wamp/www/x/services/
      I have enabled the mod_rewrite in httpd.conf. Below, added my updated htaccess as mentioned in your comment but still not working.
      I tried RewriteBase /x/services/ & RewriteBase /www/x/services/ & RewriteBase /wamp/www/x/services/

      RewriteEngine On

      RewriteBase /x/services/

      RewriteCond %{REQUEST_FILENAME} !-d

      RewriteCond %{REQUEST_FILENAME} !-s

      RewriteRule ^(.*)$ api.php?x=$1 [QSA,NC,L]

      RewriteCond %{REQUEST_FILENAME} -d

      RewriteRule ^(.*)$ api.php [QSA,NC,L]

      RewriteCond %{REQUEST_FILENAME} -s

      RewriteRule ^(.*)$ api.php [QSA,NC,L]

  • Alex Lindberg

    I don’t think so. As I understand it, the purpose of the rewrite is to separate the URL request seen by user and the server side of the process.

  • NK

    How can I create multiple API’s
    for example LoginAPi.php, OrderApi.php

  • NK

    How can I create multiple api.

    Instead of having all calls in single api.php file, I want to create LoginApi.php for login related calls CustomerApi.php for customer related calls.

    Thanks in advance.

  • Noam Shvacher

    Thank you for this great web services tutorial, how can I test the php RESTful?

    • Noam Shvacher

      as addition to my question, can it work with IIS 7?

  • Manojkumar

    i run the project i too doesnot get any records

  • learningAngJS

    This is a note for those who are having problems with this tutorial showing data. I had a similar issue and followed the steps described by many of the posters but this is what finally helped me.

    First – check to make sure your .htaccess file is even getting read. Throw garbage in there like this:

    RewriteEngine On

    This is garbage


    Then save it and test – do you get a 500 internal server error. If not – the file is not getting read and you can troubleshoot based on your web server. For me – Apache – I found out that I needed to modify the Virtual Host for my domain and main sure:

    AllowOverride All

    is set for your directory.

    I had:

    AllowOverride None

    I changed that and used the original .htaccess file downloaded from this tutorial and viola – it worked.
    If the .htaccess file is getting read than follow suggestions posted by others and manage your path.
    Hope that helps.

  • Rohan Jain

    the index.html page is not displaying any records from table.


    Please i had include all these files in Wamp server. Please help me to Know how to run the Project.

  • Ravi Dzine

    Create .htaccess file in services folder .

    .htaccess file content

    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-d

    RewriteCond %{REQUEST_FILENAME} !-s

    RewriteRule ^(.*)$ api.php?x=$1 [QSA,NC,L]

    RewriteCond %{REQUEST_FILENAME} -d

    RewriteRule ^(.*)$ api.php [QSA,NC,L]

    RewriteCond %{REQUEST_FILENAME} -s

    RewriteRule ^(.*)$ api.php [QSA,NC,L]

  • UnderCover

    It does not work for GET http://localhost/services/customer/1 (This is actual REST calls)
    But it works with http://localhost/services/customer?id=1

  • hassan

    hi usman! you need to create database to show the records.

  • Kashif

    Can we use core php instead of PhpSlim Library??????

  • Cadu Sa Motta

    Great! Thank you.

  • Rich Marlatt

    How do I do the mod_rewrite in Nginx?

    I tried this but it doesn’t work.

    location /app/services {
    if (!-e $request_filename){
    rewrite ^(/.*)$ /api.php?x=$1 break;
    if (-e $request_filename){
    rewrite ^(/.*)$ /api.php break;
    if (-e $request_filename){
    rewrite ^(/.*)$ /api.php break;

  • freddy

    Dear admin you should make it each per function such as insert, edit, delete, and select cause really i need more time learn it cause it will more helpfully for newbie, Thanks

  • Majid Lotfi


    Thanks for this tutorial, I just downloaded the code run it, it does not work, I checked the console it said :

    Failed to load resource: the server responded with a status of 404 (Not Found)

    thanks, your help is appreciated.

  • ying

    can I use Oracle database with this crud?

  • yang

    How to use this with oracle database?

  • Iammabbella

    Ok, this works for me on localhost, flawless.
    I install this application on a remote server, and it works perfectly, but I want try to “consume” it from ie. my Localhost with the existent html interface.
    Is it possible?

  • ansari jelek

    how to use private function login(){

  • Victor Simeonoff

    Okay. It works but i have some issues with the Rest. I have to change the serviceBase to ‘services/api.php?x=’ and the ‘?’ in the urls with ‘&’. So it’s works 🙂 Thanks

  • Kenny

    Anyone been able to deploy this via Heroku?

  • Karl Halasz

    Thanks, really great because simple and good to understand for a “beginner” like me 🙂

  • Richacians

    Thanks so much!! very very useful!! by the way, you don’t need the json function inside api.php, since you have it already inside

  • Pingback: To-Do Checklist HTML Stay On-Screen [closed] - DexPage()

  • Sridhar T A

    Gentlement! I appreciate for your post. Fantastic and I am able to integrate and run it.. Thanks once again. Write more such articles.. Gud 1. Keep up the good work

  • sathish

    It is not worked …Fistly i deployed to xampp server ,create database as name in the sql file,after that i am trying to run it ,it not showing any customer ,it gives below errors:

    Warning: mysqli::mysqli(): (HY000/1049): Unknown database ‘angularcode_customers’ in C:xampphtdocsangularCustomerservicesapi.php on line 24

    Warning: mysqli::query(): Couldn’t fetch mysqli in C:xampphtdocsangularCustomerservicesapi.php on line 67

    Warning: API::customers(): Couldn’t fetch mysqli in C:xampphtdocsangularCustomerservicesapi.php on line 67

    • Betro Hakala

      Edit the services/api.php and give your mysql server credentials.

  • Pranav Sharma

    I’d like to clarify to all the people with all sorts of doubts about this project: – The download file is complete and has no bugs in it. If you are encountering issues, its basically because of some local system configuration problem.
    The most common problem is that of .htaccess. It took me a while to realize that my htaccess wasnt being read by throwing in some garbage data: –

    adsfasdfdsafasf #garbage data
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-


    I checked this link to find out how to make the .htaccess work: –

    executed this on the terminal –
    sudo nano /etc/apache2/sites-available/default

    this opened a file for me on the terminal.

    paste this into the file –

    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all

    and restart the apache server –
    sudo service apache2 restart

    Now open the project on localhost like you were before. Hopefully it should work like it did on mine.
    Happy Coding! 🙂

  • Nitesh Dhakal

    Is there anyway to connect angularjs with sqlserver

  • Loas

    Swadesh, great tutorial. Congrats.
    A question: I work with Oracle and I would like to change the table name and the name of fields(customerName to Name, address to endereço ans so on…), but I didn´t find the class.
    Where I found that class?
    Tks in advance.

  • Avinash

    Can you tell me how to incorporate login module?

  • Avinash

    The Php code is there for login module but in app.js there is no service..

  • nickberens360

    I was wondering how to get the customer list to refresh after a delete, edit or create?

  • GIta Samu

    hello thank for the tutorial.

    i have read tutorial angular crud restful but using ngResource what is diffrent about it using ngResource and

  • Pingback: RESTful web services , PHP , HTML | KoH()

  • Matthew J Spada

    If you are having issues with the update, and delete not updating/refreshing the data after the calls you’ll need to jump into the APP.js file and add the line return results; (without the back ticks) to the obj.updateCustomer and obj.deleteCustomer functions – after the return; but before the closing braces });thanks for the tut got it tweaked to what I wanted fairly quickly after messing around with $resource for a little on my own. On a side note if you are running this on xampp etc you need working .htaccess capabilities.

    • Quy Tran

      So there is 2 return in obj.updateCustomer & obj.deleteCustomer?

    • Conzo

      No you wouldn’t do that at all. what you would do is pass in $scope to the factory like this

      app.factory(“services”, [‘$http’, function($http, $scope) {


  • zavigne

    I there a related tutorial ,I have searched for ages i want to insert using php mysql

  • Richard Stanton-Reid

    I have tried to adapt the code to work with my database. Basically have replaced the sql statements with equivalent sql that reflects my table (eg $query = “SELECT distinct p.projects_id, p.projectname, p.projectdescr, p.lkcountries_id, p.lkmineralgroups_id, p.persons_id, p.dateCreated, p.dateAmended FROM projects p order by p.projectname”, and it works to display my data. But on add new ie insert, and on edit, I am getting the problems:

    – it works to insert a new project, but I am trying to work out how to get data into fields in the underlying data where the data does not come from the data form..for example if one has a datecreated field in the relevant table and you want to enter the datetime of the new record creation….i tried adding the field name to the $columns variable (eg $columns = $columns.’, dateCreated, and the value for the additional field to the $values variable (eg $values = $value.”‘”.$dateCreated.”‘” (where $dateCreated has been set by prior code) but this did not work.

    – and a new record is not added, or an existing record updated..if any field is left blank even fields which are not ‘required’ either in the form input field or by the underlying database field? THIS DOES NOT occur with the original Customer data. I stress no material changes to the edit html file or to the update function and that the relevant table fields (the data for which is left blank) are not required by the table field.

    Anyone have any ideas?

  • Pingback: Angular | Pearltrees()

  • Florence

    How to use the login function in the file app.js?

  • Pingback: Demo of a simple CRUD RESTful PHP service used ...()

  • Joehn

    Hey!!! upload the files to mega or dropbox, now the links are down!!

    • itswadesh

      Thanks for informing. I will do it now

  • swap@y

    good tutorial. but it must be work in such a way , http://localhost/AngularCodeCustomerManagerApp/services/customers/1 but it is work in this way http://localhost/AngularCodeCustomerManagerApp/services/customers?id=1.
    Can pls help me for work in such a way?

  • andrews

    By default Login page is not coming, i dnt knw how to make first check login page in angular js?

  • Pingback: CRUD RESTful php service used with AngularJS and MySQL | PipisCrew Official Homepage()

  • Pingback: Cpanel Authentication Api Function Calls – Extends Cloud()

  • Frank Mendez

    Greate Demo for beginners like me 😉

  • Mashumba

    Really excelent tut. No issues at all. An improvemement suggestion is record editing for each row.

  • K Denny

    Has anyone tried this with PostgreSQL?

  • Pingback: Quora()

  • Rahmath Unissa

    Hi Admin, the app is working code when installed using xampp. But when the app is installed in IIS 7 server it is giving 404 error as file not found.Please, guide me on how to use the app in iis.

  • Pingback: Ejemplos Proyectos Angular Descargar | Tusolutionweb()

  • Betro Hakala

    Nginx rewrites would be highly appreciated aswell.

  • flik

    Just add a record manually by phpmyadmin into table then It will show results.

  • fossy

    You just saved my life, Thank you!!

  • Zaki Umar Rihardy

    how get data from another server

  • Zaki Rihardy

    how to encode data in client?

  • Marek Migaš

    Hello. When I try to run this i get this error :

    [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (, line 0)

    [Error] Failed to load resource: the server responded with a status of 404 (Not Found) (, line 0)

    [Error] Error: [ngRepeat:dupes]

    Do you have any idea what it might mean?
    Thanks 🙂


    My children were looking for Arizona state drivers license blank
    template form a few days ago and encountered an online service that
    hosts a huge forms library . If others are requiring Arizona state
    drivers license blank template form too , here’s

  • webteam
  • flibbert

    The RESTful API in the description is

    $http.get(‘/AngularCodeCustomerManagerApp/services/customers/10’) – Get the customer with id=10

    But is that really implemented? It seems to me the only format that works/is used is:

    Am I correct, or missing something?

  • Harry

    How can I modify api.php to be able to work with paths like “/collection1/{id}/collection2/{id}” ?

  • Don

    You might encounter an error where nothing is loading. The database name in the angular_customer.sql file does not match the one in api.php. so rename “angularcode_customer” to “angularcode_customers” in api.php. Error won’t show in the console (I’m using google chrome), but it will show in the error log.

  • David Craft

    Hello,This is great work, thanks for that.but i have one issue when i am testing in postman REST Client
    insert customer is not work. Please help me coz i m just started to learn angularJS. Thanks in advanced.