CRUD application with Angularjs, REST api, Slim framework and Semantic UI

I have already posted 2-3 demos targeting database record manipulation which is Create,Read,Update and Delete (CRUD). This is almost same, only thing is that its made with AngularJs. I am sharing the links to my similar previous posts here again, in case you missed it
– Editable
– Add,edit,delete record in a table dynamically v2
– Add,edit,delete record in a table dynamically v1

CRUD application with Angularjs

So whats special in this post ? All the previous codes/scripts were made using jquery, now we have brand new and strong player in market, Angularjs Super heroic JavaScript MVW Framework.Complete stack used is as below

AngularJs
idiorm – Object Relation Mapper (ORM)
Semantic UI – For building UI
Slim Framework – For API
Respect Validation – For validating forms

Note : Respect validation requires PHP version 5.6+

I have used Slim Framework and idiorm in many of my applications for API development, and i just love this framework, Respect Validation was new thing for me, so read its docs and found its pretty good so thought to use in this script and share with you.

Lets have a look at the app.js which handles our apps routing.

https://gulickhhc.com/drugs/erectile-dysfunction/ nizagara fake inhouse pharmacy coupon code cipla suhagra

app.js

angular.module('crud', [
 'ngRoute',	
 'crud.list',
 'crud.add',
 'crud.edit',
 'crud.factory'
])

.config(function($routeProvider) {
	
	$routeProvider.when("/add",{
		templateUrl : "templates/add.html",
		controller  : "ctrlAdd"
	});	

	$routeProvider.when("/edit/:id",{
		templateUrl : "templates/edit.html",
		controller  : "ctrlEdit"
	});	
	
	$routeProvider.otherwise({
		templateUrl : "templates/home.html",
		controller  : "ctrlList"
	});

})

angular.module('crud', [

'ngRoute',

'crud.list',

'crud.add',

'crud.edit',

'crud.factory'

])

.config(function($routeProvider) {

$routeProvider.when("/add",{

templateUrl : "templates/add.html",

controller : "ctrlAdd"

});

$routeProvider.when("/edit/:id",{

templateUrl : "templates/edit.html",

controller : "ctrlEdit"

});

$routeProvider.otherwise({

templateUrl : "templates/home.html",

controller : "ctrlList"

});

})

We are storing only user details in mysql database, all the other data like countries, gender and skills are coming from a angular factory.

factory.js

angular.module('crud.factory', [])

.factory('genders',function(){
  var genders = {"1":"Male", "2":"Female"};
  return {
    all : function (){
      return genders;
    }
  };
})

.factory('countries',function(){
  var countries = ["India","Shrilanka","US","UK","Singapore","Malaysia","Australia","Russia"];
  return {
    all : function (){
      return countries;
    }
  };
})

.factory('skills',function(){
  var skills = ["PHP","Node.js","Mongodb","Ruby on Rails","Python","Perl"];
  return {
    all : function (){
      return skills;
    }
  }
})

angular.module('crud.factory', [])

.factory('genders',function(){

var genders = {"1":"Male", "2":"Female"};

return {

all : function (){

return genders;

}

};

})

.factory('countries',function(){

var countries = ["India","Shrilanka","US","UK","Singapore","Malaysia","Australia","Russia"];

return {

all : function (){

return countries;

}

};

})

.factory('skills',function(){

var skills = ["PHP","Node.js","Mongodb","Ruby on Rails","Python","Perl"];

return {

all : function (){

return skills;

}

})

Create users table in your database. Before using this script make sure to you edit config.php file and enter your database connection details.

Users table structure

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL,
  `fullname` varchar(250) NOT NULL,
  `email` varchar(55) NOT NULL,
  `country` varchar(100) NOT NULL,
  `gender` int(1) NOT NULL,
  `skills` varchar(250) NOT NULL,
  `address` varchar(250) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;