CRUD Application with AngularJS
11:35:00 AM
This tutorial will teach you how to create a CRUD Application using AngularJS,PHP,MySQL and Slim framework.
You can find the source code of this article here
AngularJS is a Java Script framework for dynamic web apps.It lets you extend HTML tags.
Slim is a PHP micro framework which we are going to use for create REST service in php.
Below you can find file structure of the Application.
- js - This folder include all the JavaScript files we use here.
- api - This folder will contain Slim framework.
- pages - This folder contains all the front end pages.
well let's get started with Installing Slim framework inside api folder . Follow the link, If you have any doubts over how to installing it. It's fairly easy process and I am not going write it in detail here.
After installing Slim you'll get a folder call Slim inside api folder.we'll leave it there for the current been.
Next create the index.html file and put below code segment inside it.
Well lets go through this code. We load AngularJS to our app and remember we have to load the angular-route.js too.I will tell you why later in this tutorial. Optionally I load bootstrap style sheet to have to have some sort of user friendly front end
<body ng-app="Application">
You can say this as a starting point of a Angular Application. ng-app directive responsible for auto-bootstrap angular application.
<div ng-view></div>This directive is simply responsible for View of the Application.
Now inside JS folder create app.js file.
Here we have our 'Application' module.
In First line we declare our module.In this case it's Application. Second argument is a array. It consist of dependencies for the module.Here we need 'ng-Route' since it is the module that responsible for provide routing and deeplinking services and directives for angular apps.
Rest of the code is for set routs for the App.$routeProvider use for configuring routes.I recommend you to go through above link to get a better understand about $routeProvider. Actually this is where we need above discussed 'ng-Route' module to be installed as a dependency for $routeProvider.
Lets we move on to create our first Controller.
This is the controller for get the list of customer details.
AngularJs application are controlled by Controllers. 'CustomerListControler' is a JavaScript function and $scope is the application object. Which means it owns the application variable and objects.
$http use to communicate with web servers.
$http.get is the function use to read the server data and those data will store in property call customers.
What we have here is Controller for add a new customer.
One of new thing we come across here is $location. $location service parses the URL in the browser address bar and makes the URL available to your application.Changes to the URL in the address bar are reflected into $location service & changes to $location are reflected into the browser address bar.
Then we move onto create 'CustomerEditController', The Controller that will responsible for handle Edit and Delete.
Hm..looks like we don't have anything new to discuss here. So we'll move on to create database handling section.
Go to index.php file inside Slim folder.
In first two lines we call & create instance of Slim. Then comes the interesting part of Slim's route handling.As you can see it's really easy to understand .That is the one of main reason we use Slim framework here.If you want to know more about Slim routing follow this Then we'll create actual database connection & database handling.
Now we almost end.All you have to do is create frond end pages for add,update and detailed list of customers.
Go to pages folder and create list.html,new.html and edit.html files
Well..It's done guys.Now we have your own little AngularJS application whichcapable of doing CRUD operation.I hope you enjoy the tutorial.
Happy coding.
You can find the source code of this article here
.png)
29 comments
Hi Anjana,
ReplyDeleteGreat Tutorial, Really saved my time.
Update is not working in mozilla, but its working fine in chrome. ny solution?
hey, Sorry for the late reply. Really ? Actually i didn't test this out one firefox. but i am sure the core idea is same, It should be some designing issue. But I'll take a look at this.
DeleteUpdate is not working in mozilla, but its working fine in chrome. ny solution?
ReplyDeletehey, Sorry for the late reply. Really ? Actually i didn't test this out one firefox. but i am sure the core idea is same, It should be some designing issue. But I'll take a look at this.
DeleteGreat tutorial
ReplyDeleteBut download link for sourcecode doesn't work. Could you fix it ?
Thanks Anjana.
Sorry for the late reply it seems working fine for me
DeleteGreat tutorial.. thank you for sharing, Anjana..
ReplyDeleteGood job, but I couldn't download the source code. Pls can you send the source code to my email: olasam4liv@gmail.com. Thanks
ReplyDeleteSorry for the late reply it seems working fine for me
DeleteI have a quick question. When I try to use the api to add a new Customer (/api/New_Customer), I get the follow error. Any ideas as to why or how I can fix it?
ReplyDelete{"error":{"text":SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'Username' cannot be null}}
It seems like you did not pass the username to the databse. what is your database structure ? is username is a not null column in it ? anyway your error is popping out because of a SQL query issue. not a Angular one. :)
DeleteGood job, but I couldn't download the source code. Pls can you send the source code to my email: sundarsl1991@gmail.com. Thanks
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteCodeIgniter CRUD App with AJAX Bootstrap.
ReplyDeletehttp://www.phpcodify.com/codeigniter-crud-using-ajax-bootstrap-models-and-mysql/
Hi,
ReplyDeleteI am working with same tutorial but could not understand how to upload image using angularjs with slim php rest api. Can anyone help me here on this topic?
there's no demo?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi there,
ReplyDeleteCheck out this blog, full angularjs CRUD with pagination sorting and filter using codeigniter as backend framework
You can even download and run on your local system. here is the link
https://angularjscrudpagination.blogspot.com/
This is an one of the excellent blog.I liked your way of presentation.I gained some Information.
ReplyDeleteAngular JS Online training
Angular JS training in Hyderabad
It was a great information and Its really worth reading it.
ReplyDeleteMean Stack Online Training
Mean Stack Training in Hyderabad
python training
ReplyDeleteangular js training
selenium trainings
sql server dba training
<a href="https://www.kitsonlinetrainings.com/course/Application packging online training > application packging training</a>
fume hood design
ReplyDeleteaz 104 exam questions
ReplyDeletescrum master exam questions
dp 900 exam questions
Smm panel
ReplyDeleteSMM PANEL
İSİLANLARİBLOG.COM
instagram takipçi satın al
hirdavatciburada.com
Https://www.beyazesyateknikservisi.com.tr/
Servis
jeton hile indir
ümraniye vestel klima servisi
ReplyDeletekartal bosch klima servisi
ümraniye bosch klima servisi
tuzla daikin klima servisi
çekmeköy toshiba klima servisi
ataşehir toshiba klima servisi
çekmeköy beko klima servisi
ataşehir beko klima servisi
beykoz daikin klima servisi
شركة تنظيف سجاد
ReplyDeleteشركة مكافحة حشرات
Explore top-notch Docker consulting services to optimize containerization strategies. Unlock efficiency and seamless deployment for your business success.
ReplyDeletemt5 download apk
ReplyDeleteforex trading kya hai
ReplyDelete