CRUD (Create,Retrieve,Update and Delete) Operation in AngularJS


Introduction

In my previous article we have demonstrated different stuffs of AngularJS lik how to use expression, models, controllers filters and app. You must have get little bit idea how to work in AngularJS. Now We will do demonstration, to achieve CRUD operation in AngularJS in this article.

Getting Started

CRUD(Create,Retrieve, Update and Delete) operation in AngularJS is very easy as like other application like WPF, ASP.NET with MVC and classic ASP.NET. You do have nothing worry about the CRUD operation in AngularJS because it supports Data Binding fore more details about Data Binding, please refer to my this article.





As like WPF and MVC AngularJS also supports one way and two way data binding. Hence AngularJS simplified CRUD operation through Data Binding.

Example:-

This demonstrator list outs list of student in a table in page and does CRUD operation with student data. Here we can delete student record, update and can create new student with demonstrate. For more details go through the below code example.
 <HTML ng-app = "myapp">   
 <TITLE>AngularJS: CRUD Operation</TITLE>   
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>   
    <script>   
       var myapp=angular.module("myapp",[]);               
       myapp.controller("myappcont",function($scope){  
             $scope.studentindex=0;  
             $scope.Genders=[{Text:"Male",Value:"Male"},  
                                    {Text:"Female",Value:"Female"}  
                                ];  
           $scope.SNames=[{Text:"A",Value:"A"},  
                                    {Text:"B",Value:"B"},  
                                    {Text:"C",Value:"C"}  
                                ];  
             $scope.student={ID:0,Name:'',Gender:"Male",Class:"1Std",Section:"A"};  
       $scope.students=[   
       {ID:1,Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},   
       {ID:2,Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},   
       {ID:3,Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},   
       {ID:4,Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},   
       {ID:6,Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},   
       {ID:7,Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];   
             $scope.edit=function(st){  
                          $scope.studentindex=$scope.students.indexOf(st);  
                          $scope.student.ID=st.ID;  
                          $scope.student.Name=st.Name;  
                          $scope.student.Gender=st.Gender;  
                          $scope.student.Section=st.Section;  
                          $scope.student.Class=st.Class;  
             };  
             $scope.updatestudent=function(){  
                var st={  
                          ID:$scope.student.ID,  
                          Name:$scope.student.Name,  
                          Gender:$scope.student.Gender,  
                          Section:$scope.student.Section,  
                          Class:$scope.student.Class  
                          };  
                if($scope.student.ID>0){  
                          $scope.students.splice($scope.studentindex, 1);  
                          $scope.students.splice($scope.studentindex, 0, st);                      
                     }  
                     else  
                     {  
                     st.ID=$scope.students.length+1;  
                          $scope.students.push(st);}  
                           $scope.clear();  
             };  
             $scope.delete=function(st){  
                 var _index = $scope.students.indexOf(st);   
         $scope.students.splice(_index, 1);   
             };  
             $scope.clear=function(st){  
                $scope.student.ID=0;  
                     $scope.student.Name='';  
                     $scope.student.Gender='Male';  
                     $scope.student.Section='A';  
                     $scope.student.Class='';  
                      $scope.studentindex=0;  
             };  
       });        
    </script>   
    <BODY ng-controller="myappcont">   
       <P>  
       <TABLE>  
       <TR>  
       <TD>Name:</TD>  
       <TD><INPUT TYPE="txt" ng-model="student.Name"/></TD>  
       </TR>  
       <TR>  
       <TD>Gender:</TD>  
       <TD>  
       <SELECT ng-model="student.Gender">  
       <OPTION ng-repeat="g in Genders" value="{{g.Value}}"/>{{g.Text}}</OPTION>  
       </SELECT>  
       </TD>  
       </TR>  
       <TR>  
       <TD>Class:</TD>  
        <TD><INPUT TYPE="txt" ng-model="student.Class"/></TD>  
       </TR>  
       <TR>  
       <TD>Section:</TD>  
       <TD>  
       <SELECT ng-model="student.Section">  
       <OPTION ng-repeat="s in SNames" value="{{s.Value}}"/>{{s.Text}}</OPTION>  
       </SELECT>  
       </TD>  
       </TR>  
       <TR>  
       <TD>  
       </TD>  
       <TD>  
         <button ng-click="updatestudent()">Save</button>   
        <button ng-click="clear()">Clear</button>  
       </TD>  
       </TR>  
       </TABLE>  
       </P>  
       <HR/>  
       <table border="1">   
         <tr>   
            <th>Name</th>   
            <th>Gender</th>   
            <th>Class</th>   
            <th>Section</th>   
                           <th>Action</th>  
         </tr>   
         <tr ng-repeat="student in students | filter:searchText">   
            <td>{{student.Name}}</td>   
            <td>{{student.Gender}}</td>   
            <td>{{student.Class}}</td>   
            <td>{{student.Section}}</td>   
                           <TD>  
         <button ng-click="edit(student)">Edit</button>   
        <button ng-click="delete(student)">Delete</button>   
       </TD>  
         </tr>   
       </table>   
    </BODY>   
  </HTML>   




Summary

This article demonstrated how to achieve CRUD (Create,Retrieve,Update and Delete) operation in AngularJS, hope this article may helpful to you. Happy coding and enjoy.....

Thanks
Kailah Chandra Behera


No comments:

Post a Comment