angular crud ui interface

CRUD functionality with angular js

Today I discuss some functionality about Angularjs. This is the most popular javascript framework. In this article. I give some code snippet with Angularjs. This code helps to you write to UI Data Add, Edit, Delete with real-time updates.

First, we need Angularjs link

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
Code language: HTML, XML (xml)

After then we will be writing some HTML codes.

<table ng-controller="ctrl" style="width:100%"> <tr> <th>Name</th> <th>Address</th> <th>Actions</th> </tr> <tr ng-repeat="user in users"> <td>{{ user.name }}</td> <td>{{ user.addr }}</td> <td><button ng-click="edit(user)">Edit</button> | <button ng-click="delete('{{user.name}}')">Delete</button></td> </tr> </table> <input type="text" ng-model="name" placeholder="Input Name" /> <input type="text" ng-model="addr" placeholder="Input Address" /> <button ng-click="add()">Add</button> <button ng-click="save()">Save</button>
Code language: HTML, XML (xml)

After this code, we will be writing js codes to implements CRUD functionality.

var app = angular.module('app',[]); app.controller('ctrl',function($scope,$rootScope, $log){ $scope.users = [ {name:'Dipyan',addr:'Birati'}, {name:'Shibaji',addr:'Bishorpara'} ]; $rootScope.add = function(){ if(angular.isDefined($rootScope.name) && angular.isDefined($rootScope.addr) && $rootScope.name!='' && $rootScope.addr !='') $scope.users.push({name: $rootScope.name, addr: $rootScope.addr}); $rootScope.name =''; $rootScope.addr =''; $log.log('Add Function Works'); } $scope.delete = function(val){ $scope.users.splice(val,1); } $scope.edit = function(val){ $rootScope.id = val.name; $rootScope.name = val.name; $rootScope.addr = val.addr; } $rootScope.save = function(){ for(var i in $scope.users){ if($scope.users[i].name == $rootScope.id){ $scope.users[i].name = $rootScope.name; $scope.users[i].addr = $rootScope.addr; } } $rootScope.name =''; $rootScope.addr =''; } });
Code language: PHP (php)

After this written, we will get output like this.

angular crud ui interface
CRUD functionality with angular js

Now, we are the discussion about codes. Which codes usages here and why I am written that codes?

First, when we are writing Angularjs codes that time we need to initiate the “APP” directives.

in HTML

<div ng-app="APP"> .... </div>
Code language: HTML, XML (xml)

This is the main root directive. after then we need to bind this directive with JS code.

var app = angular.module('APP',[]);
Code language: JavaScript (javascript)

After this, we need to be setup  “Ctrl” directive for visualising the area scope. So codes will be

in Html

<div ng-app='APP'> <div ng-controller='Ctrl'> .... </div> </div>
Code language: HTML, XML (xml)

in JavaScript

var app = angular.module('APP', []); app.controller('Ctrl', function(){ ... });
Code language: JavaScript (javascript)

Now we will create a table to represent the data. So we will be written this codes.

<table ng-controller="ctrl" style="width:100%"> <tr> <th>Name</th> <th>Address</th> <th>Actions</th> </tr> <tr ng-repeat="user in users"> <td>{{ user.name }}</td> <td>{{ user.addr }}</td> <td><button ng-click="edit(user)">Edit</button> | <button ng-click="delete('{{user.name}}')">Delete</button></td> </tr> </table>
Code language: HTML, XML (xml)

Here I am using ng-controller to visualise the data from the model. this is coming from the server database or REST API. Basically, we get data access from the server through js model which is controlling by the angular module. But here I am given only static procedures. Because server site will be different technology for generating the REST API. If you want to access the REST API for it.  You can follow my previous article AJAX Calling by AngularJS Here I made a real-time currency exchange api integrate with the apps.

ng-repeat=”user in users” this directive can be accessing the data with “users” array objects from there.

I hope, it will help who are wanted to some interest on AngularJS.

Leave a Reply

Your email address will not be published. Required fields are marked *