angularjs

CRUD using AngularJS with Slim framework

In the previousĀ article about AngularJS with Slim framework, we did example of how to use AngularJS as frontend framework while Slim framework for backend, but the example was limited to insert into and retrieve data from database. Lets complete CRUD in this article but adding Delete and Edit functionality on the page which is showing the records of database. It will all be done on show_users.html page without any reload. Follow the previous article (AngularJS with Slim framework) to understand the previous code as we are going to modify those files.

Replace the previous code of show_users.html with the following one

Output

show_users2

Delete User

Delete user button have ng-click=”deleteUser(r.id, $index)”, where r.id is the is of user which we want to delete and $index is the row number of table. We are passing $index to this function so that after delete operation we want to hide this row of table displaying the deleted record. Now we have to create deleteUser function in showUserCtrl.

Upon successful process, we set true the hideRow[index] so that the row on page disappears. We need to make a procedure on index.php file which will be responsible to delete record from database table.

Edit User Form

The Edit button has ng-click=”getUser(r.id)” because we want retrieve the data of this specific user from database to be edited. Below the table on show_users.html file is the form which is hidden initially, but after hitting the edit button it becomes visible with populated fields. getUser function in the showUserCtrl is

showEditForm is set to true so that edit form on the show_user.html page becomes visible and data is populated into it.

getuserĀ procedure in index.php is as follows

When the form is submitted, controller comes to editUser function of showUserCtrl

The procedure edituser is responsible for updating data of that specific user.

After update process the form is hidden again and success message is displayed. This article now wraps up CRUD using AngularJS with Slim framework as a single page application.

Full Source Code

Full source code CRUD using AngularJS with Slim framework is available at GitHub as well.

CRUD using AngularJS with Slim framework at GitHub

 

 

 

 

 

  • http://www.topnotchdev.com Top Notch Developer

    slim + angular (best couple ever) …. šŸ˜‰