Simple CRUD Operation Using AngularJS - Part 1

Language
In this tutorial, we will create a Simple CRUD(create, read) Operations Using AngularJS. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. This time we will try to see how angularjs can create a simple CRUD operation. By the way this tutorial is consist of two parts. The one we will be doing now is on how to create and read a data. So let get started. Creating A Form This is where the data manipulation will happened. To do that open any kind of text editor(notepad++, etc), then copy/paste the code below and name it "index.html"
  1. <!DOCTYPE html>
  2. <html lang = "en">
  3.         <head>
  4.                 <meta charset  = "UTF-8"  name = "viewport" content = "width=device-width, initial-scale=1"/>
  5.                 <title>Sourcecodester</title>
  6.                 <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
  7.                 <script src = "js/angular.js"></script>
  8.                 <script src = "js/app.js"></script>
  9.         </head>
  10. <body ng-app = "myModule" ng-controller = "myController">
  11.         <nav class = "navbar navbar-default">
  12.                 <div class = "containet-fluid">
  13.                         <a class = "navbar-brand" href = "https://www.sourcecodester.com" >Sourcecodester</a>
  14.                 </div>
  15.         </nav>
  16.         <div class = "row">
  17.                 <div class = "col-md-2"></div>
  18.                 <div class = "col-md-8 well">
  19.                         <h3 class = "text-primary">Simple CRUD Operation Using AngularJS - Part 1</h3>
  20.                         <hr style = "border-top:1px dotted #000;"/>
  21.                         <div class = "alert alert-info">Members Personal Information <button class = "btn btn-sm btn-primary pull-right" data-toggle="modal" data-target="#add_member"><span class = "glyphicon glyphicon-plus"></span></button></div>
  22.                         <div class = "container-fluid">
  23.                                 <br />
  24.                                 <br />
  25.                                 <table class = "table table-bordered alert-warning">
  26.                                         <thead>
  27.                                                 <tr>
  28.                                                         <th>Member ID</th>
  29.                                                         <th>Full Name</th>
  30.                                                         <th>Email</th>
  31.                                                         <th>Gender</th>
  32.                                                         <th>Action</th>
  33.                                                 </tr>
  34.                                         </thead>
  35.                                         <tbody>
  36.                                                 <tr ng-repeat = "member in members">
  37.                                                         <td>{{$index+1}}</td>
  38.                                                         <td>{{member.name}}</td>
  39.                                                         <td>{{member.email}}</td>
  40.                                                         <td>{{member.gender}}</td>
  41.                                                         <td><button type = "button" class = "btn btn-sm btn-warning"><span class = "glyphicon glyphicon-edit"></span> Update</button> | <button type = "button" class = "btn btn-sm btn-danger"><span class = "glyphicon glyphicon-trash"></span> Delete</button></td>
  42.                                                 </tr>
  43.                                         </tbody>
  44.                                 </table>
  45.                         </div>
  46.                 </div>
  47.         </div> 
  48.         <div class="modal fade" id="add_member" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  49.         <div class="modal-dialog" role="document">
  50.                 <div class="modal-content">
  51.                         <form>
  52.                         <div class="modal-header">
  53.                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  54.                                 <h4 class="modal-title text-info" id="myModalLabel">Member Registration</h4>
  55.                         </div>
  56.                         <div class="modal-body">       
  57.                                         <div class = "form-group">
  58.                                                 <label>Full Name</label>
  59.                                                 <input type  = "text" class = "form-control" ng-model = "newMember.name"/>
  60.                                         </div>
  61.                                         <div class = "form-group">
  62.                                                 <label>Email</label>
  63.                                                 <input type = "email" class = "form-control" ng-model = "newMember.email"/>
  64.                                         </div>
  65.                                         <div class = "form-group">
  66.                                                 <label>Gender</label>
  67.                                                 <select class = "form-control" ng-model = "newMember.gender" >
  68.                                                         <option value = "">Choose an option</option>
  69.                                                         <option value = "Male">Male</option>
  70.                                                         <option value = "Female">Female</option>
  71.                                                 </select>
  72.                                         </div>
  73.                         </div>
  74.                         <div class="modal-footer">
  75.                                 <button  class="btn btn-primary" ng-click = "saveMember()" data-dismiss = "modal"><span class = "glyphicon glyphicon-save"></span> Save</button>
  76.                         </div>
  77.                         </form>
  78.                 </div>
  79.         </div>
  80.         </div>
  81. </body>
  82. <script src  = "js/jquery-3.1.1.js"></script>  
  83. <script src  = "js/bootstrap.js"></script>     
  84. </html>
The code above will display the value that been input in the textbox. The ng-click will trigger the function when clicked and processed the statement that have been assigned to generate the result. The ng-repeat will loop and display all the data that been stored. Setting Up The AngularJS Directive Script This script will take responsibility for implementing the directives into the HTML forms. To create this script, just kindly copy/paste the code below and name it "app.js"
  1. var app = angular.module("myModule", [])
  2.                                                            .controller("myController", function($scope){
  3.                        
  4.                                                                 $scope.newMember = {};
  5.                                                                
  6.                                                                 $scope.members = [];
  7.                                                                
  8.                                                                 $scope.saveMember = function(){
  9.                                                                         $scope.members.push($scope.newMember);
  10.                                                                         $scope.newMember = {};
  11.                                                                 };                                                             
  12.                                                 });
The code above above will generate the request when the $scope.saveMember been clicked by the user and stored it into the $scope.members = []; array to be display in the HTML form. There you have it, we created a simple CRUD create and read operation. I hope that this tutorial help you to your developing projects. For the next tutorial we will tackle about CRUD update and delete operation, so just stay tuned and kindly visit this site. Enjoy Coding!!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags

Add new comment