Tuesday, 29 March 2016

Simple Crud Operation Using AngularJS.

A step by step and simple demonstration of doing the crud operation in AngularJS.
Create a simple form like  below.

1.       Defined the Ng-App and Ng-Controller at top.


Placed that ng-app on html tag.
<html ng-app="crudApp">

Put the ng-controller on the top level div.
<body><div class="container" ng-controller="CrudController">

2.       Take the reference of Bootstrap and angular library.

<link rel="stylesheet" href="lib/css/bootstrap.css">
       <script src="lib/js/angular.js"></script>

3.       Insert New Records : Use Below code to create a simple form. It contains the two section one to insert the records and another to Show that inserted record.
Use below code to insert the new records into form. It uses ng-click to add new records.
<form class="form-inline">
                <div class="form-group">
                  <label class="sr-only" for="fname">fname</label>
                  <input type="text" class="form-control" ng-model="fname" placeholder="First name">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="lname">lname</label>
                  <input type="text" class="form-control" ng-model="lname" placeholder="Last name">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="email">email</label>
                  <input type="text" class="form-control" ng-model="email" placeholder="Email">
                </div>
                <button type="submit" ng-click="addEmployee()" class="btn btn-primary">Add Employee</button>
              </form>

4.       Update Existing Records: Use below line of code for creating Update form. Using ng-show and ng-click of angular to handle it.

<form class="form-inline" ng-show="selectedEmpIndex > -1">
                <div class="form-group">
                  <label class="sr-only" for="fname">fname</label>
                  <input type="text" class="form-control" ng-model="efname" placeholder="First name">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="lname">lname</label>
                  <input type="text" class="form-control" ng-model="elname" placeholder="Last name">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="email">email</label>
                  <input type="text" class="form-control" ng-model="eemail" placeholder="Email">
                </div>
                <button type="submit" ng-click="updateEmployee()" class="btn btn-primary">Update Employee</button>
              </form>

5.       Display Records: Display records in table format and perform operation of deletion and edit of existing records.
Use below code for same.
<table class="table table-bordered">
                     <thead>
                           <th>First name</th>
                           <th>Last name</th>
                           <th>Email</th>
                           <th style="text-align:center;">Edit | Delete</th>
                     </thead>
                     <tbody>
                           <tr ng-repeat="eachEmp in employees">
                                  <td>{{eachEmp.fname}}</td>
                                  <td>{{eachEmp.lname}}</td>
                                  <td>{{eachEmp.email}}</td>
                                  <td style="text-align:center;">
                                         <i ng-click="editEmployee(eachEmp, $index)" class="glyphicon glyphicon-pencil"></i> |
                                         <i ng-click="deleteEmployee($index)" class="glyphicon glyphicon-remove"></i>
                                  </td>
                           </tr>
                     </tbody>
      
       </table>

6.       AngularJs Code : Use below AngularJs code to perform the Crud operations.
As per below code adding into collection and removing it from collections.
Having the modules as CrudApp and

angular.module('crudApp', [])
       .controller('CrudController', function($scope){
              $scope.employees = [
                     {fname: "Satya", lname:"Prakash", email:"raj@gmail.com"},
                     {fname: "Santosh", lname:"Singh", email:"santosh@gmail.com"},
                     {fname: "Rajesh", lname:"Gupta", email:"rajesh@gmail.com"},
                     {fname: "Manish", lname:"Yadav", email:"manish@gmail.com"}
              ];

              $scope.addEmployee = function(){

                     var firstName = $scope.fname,
                           lastName = $scope.lname,
                           email   = $scope.email;

                     $scope.employees.push({
                           fname: firstName,
                           lname:lastName,
                           email:email
                     });   

                     $scope.fname = '';
                     $scope.lname = '';
                     $scope.email = '';
              };

              $scope.deleteEmployee = function(index){
                     $scope.employees.splice(index, 1);
              }

              $scope.editEmployee = function( eachEmp, index ){
                     $scope.efname = eachEmp.fname;
                     $scope.elname = eachEmp.lname;
                     $scope.eemail = eachEmp.email;
                     $scope.selectedEmpIndex = index;
              }

              $scope.updateEmployee = function(){
                     var idx = $scope.selectedEmpIndex;
                     $scope.employees[idx].fname = $scope.efname;
                     $scope.employees[idx].lname = $scope.elname;
                     $scope.employees[idx].email = $scope.eemail;
                     $scope.selectedEmpIndex = -1;
              }
       });



3 comments:

  1. The blog you presented was very nice and interesting which helped me to get update on the recent technologies.
    Angularjs training in chennai | Angularjs course in Chennai

    ReplyDelete
  2. Thanks for posting this useful content, Good to know about new things here, Let me share this,
    AngularJS Training in Chennai | AngularJS Training | AngularJS Training Institute in Chennai

    ReplyDelete

Others

You will like to read it