Angular

AngularJS CRUD Operations With Web API - Part Two

Create Angular JS App

Now it is time to create angular js [Single Page Application] in shore SPA. Here we will be using API service to perform CRUD operations using angular js. Create a folder named with "App" and inside this folder create two JS files like "app.js" and "EmployeeController.js".

You need to create Views folder inside the App folder and create 4 html template files for CRUD operations as following image.

folder

App.Js

As we know, an Angular JS application runs inside the ng-app directive. So, the first step is to create routing for angular js app.
  1. var app = angular.module('myApp', ['ngRoute']);  
  2.   
  3. app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {  
  4.           
  5.     $routeProvider.when('/EmployeeList', { //Routing for show list of employee  
  6.         templateUrl: '/App/Views/EmployeeList.html',  
  7.         controller: 'EmployeeController'  
  8.     }).when('/AddEmployee', { //Routing for add employee  
  9.         templateUrl: '/App/Views/AddEmployee.html',  
  10.         controller: 'EmployeeController'  
  11.     })  
  12.     .when('/EditEmployee/:empId', { //Routing for geting single employee details  
  13.         templateUrl: '/App/Views/EditEmployee.html',  
  14.         controller: 'EmployeeController'  
  15.     })  
  16.     .when('/DeleteEmployee/:empId', { //Routing for delete employee  
  17.         templateUrl: '/App/Views/DeleteEmployee.html',  
  18.         controller: 'EmployeeController'  
  19.     })  
  20.     .otherwise({ //Default Routing  
  21.         controller: 'EmployeeController'  
  22.     })  
  23. }]);  
EmployeeController.js

Now to perform CRUD operations on client side, we need to add EmployeeController.js file which will hanlde all the CRUD opertions with http services.
  1. app.controller("EmployeeController", ['$scope', '$http', '$location', '$routeParams', function ($scope, $http, $location, $routeParams) {  
  2.     $scope.ListOfEmployee;  
  3.     $scope.Status;  
  4.   
  5.     $scope.Close = function () {  
  6.         $location.path('/EmployeeList');  
  7.     }      
  8.   
  9.     //Get all employee and bind with html table  
  10.     $http.get("api/employee/GetAllEmployee").success(function (data) {  
  11.         $scope.ListOfEmployee = data;  
  12.   
  13.     })  
  14.     .error(function (data) {  
  15.         $scope.Status = "data not found";  
  16.     });  
  17.   
  18.     //Add new employee  
  19.     $scope.Add = function () {  
  20.         var employeeData = {  
  21.             FirstName: $scope.FirstName,  
  22.             LastName: $scope.LastName,  
  23.             Address: $scope.Address,  
  24.             Salary: $scope.Salary,  
  25.             DOB: $scope.DOB,  
  26.            // DepartmentID: $scope.DepartmentID  
  27.         };  
  28.         debugger;  
  29.         $http.post("api/employee/AddEmployee", employeeData).success(function (data) {  
  30.             $location.path('/EmployeeList');  
  31.         }).error(function (data) {  
  32.             console.log(data);  
  33.             $scope.error = "Something wrong when adding new employee " + data.ExceptionMessage;  
  34.         });  
  35.     }  
  36.   
  37.     //Fill the employee records for update  
  38.   
  39.     if ($routeParams.empId) {  
  40.         $scope.Id = $routeParams.empId;  
  41.   
  42.         $http.get('api/employee/GetEmployee/' + $scope.Id).success(function (data) {  
  43.             $scope.FirstName = data.FirstName;  
  44.             $scope.LastName = data.LastName;  
  45.             $scope.Address = data.Address;  
  46.             $scope.Salary = data.Salary;  
  47.             $scope.DOB = data.DOB  
  48.             //$scope.DepartmentID = data.DepartmentID  
  49.         });  
  50.   
  51.     }  
  52.   
  53.     //Update the employee records  
  54.     $scope.Update = function () {  
  55.         debugger;  
  56.         var employeeData = {  
  57.             EmployeeID: $scope.Id,  
  58.             FirstName: $scope.FirstName,  
  59.             LastName: $scope.LastName,  
  60.             Address: $scope.Address,  
  61.             Salary: $scope.Salary,  
  62.             DOB: $scope.DOB  
  63.             //DepartmentID: $scope.DepartmentID  
  64.         };  
  65.         if ($scope.Id > 0) {  
  66.               
  67.             $http.put("api/employee/UpdateEmployee", employeeData).success(function (data) {  
  68.                 $location.path('/EmployeeList');  
  69.             }).error(function (data) {  
  70.                 console.log(data);  
  71.                 $scope.error = "Something wrong when adding updating employee " + data.ExceptionMessage;  
  72.             });  
  73.         }  
  74.     }  
  75.   
  76.   
  77.     //Delete the selected employee from the list  
  78.     $scope.Delete = function () {  
  79.         if ($scope.Id > 0) {  
  80.               
  81.             $http.delete("api/employee/DeleteEmployee/" + $scope.Id).success(function (data) {  
  82.                 $location.path('/EmployeeList');  
  83.             }).error(function (data) {  
  84.                 console.log(data);  
  85.                 $scope.error = "Something wrong when adding Deleting employee " + data.ExceptionMessage;  
  86.             });  
  87.         }  
  88.   
  89.     }  
  90. }]);  
So, we have done mostly everything besides creating template file. So, first I will create the template file for showing the list of employees.

Employee List

To see the employee list, we need to create EmployeeList.html page.
  1. <a href="#/AddEmployee" class="btn btn-primary btn-xs" >Add New Employee</a>  
  2. <br /><br />  
  3. <div class="table-responsive">  
  4.     <table id="mytable" class="table table-bordred table-striped">  
  5.         <thead>  
  6.         <th>ID</th>  
  7.         <th>First Name</th>  
  8.         <th>Last Name</th>  
  9.         <th>Address</th>  
  10.         <th>Salary</th>  
  11.         <th>DOB</th>  
  12.         <!--<th>Department</th>-->  
  13.         <th>Edit</th>  
  14.         <th>Delete</th>  
  15.         </thead>  
  16.         <tbody>  
  17.             <tr ng-repeat="item in ListOfEmployee">  
  18.                 <td>{{item.EmployeeID}}</td>  
  19.                 <td>{{item.FirstName}}</td>  
  20.                 <td>{{item.LastName}}</td>  
  21.                 <td>{{item.Address}}</td>  
  22.                 <td>{{item.Salary}}</td>  
  23.                 <td>{{item.DOB}}</td>  
  24.                 <!--<td>{{item.DepartmentName}}</td>-->  
  25.                 <td><a class="btn btn-primary btn-xs" href="#/EditEmployee/{{item.EmployeeID}}">  
  26. <span class="glyphicon glyphicon-pencil"></span></a></td>  
  27.                 <td><a class="btn btn-danger btn-xs" href="#/DeleteEmployee/{{item.EmployeeID}}">  
  28. <span class="glyphicon glyphicon-trash"></span></a></td>  
  29.             </tr>  
  30.         </tbody>  
  31.     </table>  
  32.       
  33. </div>  
Now it is time to run the project and see how data will be displayed with angular js app. To run the application, just press F5 and change the url as "http://localhost:56983/#/EmployeeList". When application will run, output will be like the below image.

application

Add Employee

To add new employe with Angular JS application, we just need to create one more template page with name"AddEmployee.html" as following.
  1. <div  id="add" tabindex="-1" role="dialog" aria-labelledby="add-modal-label">  
  2.      
  3.     <div class="modal-dialog" role="document">  
  4.         <div class="modal-content">  
  5.             <form class="form-horizontal" id="add-form">  
  6.                 <div class="modal-header">  
  7.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>  
  8.                     <h4 class="modal-title" id="add-modal-label">Add new Employee</h4>  
  9.                 </div>  
  10.                 <div class="modal-body">  
  11.                     <div class="form-group">  
  12.                         <label for="add-firstname" class="col-sm-2 control-label">Firstname</label>  
  13.                         <div class="col-sm-10">  
  14.                             <input type="text" class="form-control" id="add-firstname" name="firstname" placeholder="Firstname" ng-model="FirstName" required>  
  15.                         </div>  
  16.                     </div>  
  17.                     <div class="form-group">  
  18.                         <label for="add-lastname" class="col-sm-2 control-label">LastName</label>  
  19.                         <div class="col-sm-10">  
  20.                             <input type="text" class="form-control" id="add-lastname" name="lastName" placeholder="LastName" ng-model="LastName" required>  
  21.                         </div>  
  22.                     </div>  
  23.                     <div class="form-group">  
  24.                         <label for="add-address" class="col-sm-2 control-label">Address</label>  
  25.                         <div class="col-sm-10">  
  26.                             <input type="text" class="form-control" id="add-address" name="address" placeholder="Address" ng-model="Address">  
  27.                         </div>  
  28.                     </div>  
  29.                     <div class="form-group">  
  30.                         <label for="add-salary" class="col-sm-2 control-label">Salary</label>  
  31.                         <div class="col-sm-10">  
  32.                             <input type="text" class="form-control" id="add-salary" name="mobile" placeholder="Salary" ng-model="Salary" required>  
  33.                         </div>  
  34.                     </div>  
  35.                     <div class="form-group">  
  36.                         <label for="add-dob" class="col-sm-2 control-label">DOB</label>  
  37.                         <div class="col-sm-10">  
  38.                             <input type="text" class="form-control" id="add-dob" name="mobile" placeholder="DOB" ng-model="DOB" required> [ex: 1990-01-21]  
  39.                         </div>  
  40.                     </div>  
  41.                       
  42.                 </div>  
  43.                 <div class="modal-footer">  
  44.                     <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="Close()">Close</button>  
  45.                     <button type="submit" class="btn btn-primary" ng-click="Add()">Save changes</button>  
  46.                 </div>  
  47.             </form>  
  48.         </div>  
  49.     </div>  
  50. </div>  
Now just click on the "Add New Employee" button or change the url as like"http://localhost:56983/#/AddEmployee". It will show the page with some control where you can enter the required details for employee. When you click on Save changes then it will add the new employee.

add the new employee

Update Employee

From the employee list page, there is button to edit/update the employee list. To click on any, you can update the respected details for that employee. Create the EditEmployee.html page as following.
  1. <div  id="edit" aria-labelledby="edit" aria-hidden="true">     
  2.     <div class="modal-dialog">  
  3.         <div class="modal-content">  
  4.             <form class="form-horizontal" id="edit-form">  
  5.                 <div class="modal-header">  
  6.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>  
  7.                     <h4 class="modal-title" id="edit-modal-label">Update Employee</h4>  
  8.                 </div>  
  9.                 <div class="modal-body">  
  10.                     <div class="form-group">  
  11.                         <label for="edit-firstname" class="col-sm-2 control-label">Firstname</label>  
  12.                         <div class="col-sm-10">  
  13.                             <input type="text" class="form-control" id="edit-firstname" name="firstname" placeholder="Firstname" ng-model="FirstName" required>  
  14.                         </div>  
  15.                     </div>  
  16.                     <div class="form-group">  
  17.                         <label for="edit-lastname" class="col-sm-2 control-label">LastName</label>  
  18.                         <div class="col-sm-10">  
  19.                             <input type="text" class="form-control" id="edit-lastname" name="lastName" placeholder="LastName" ng-model="LastName">  
  20.                         </div>  
  21.                     </div>  
  22.                     <div class="form-group">  
  23.                         <label for="edit-address" class="col-sm-2 control-label">Address</label>  
  24.                         <div class="col-sm-10">  
  25.                             <input type="text" class="form-control" id="edit-address" name="address" placeholder="Address" ng-model="Address">  
  26.                         </div>  
  27.                     </div>  
  28.                     <div class="form-group">  
  29.                         <label for="edit-salary" class="col-sm-2 control-label">Salary</label>  
  30.                         <div class="col-sm-10">  
  31.                             <input type="text" class="form-control" id="edit-salary" name="mobile" placeholder="Salary" ng-model="Salary">  
  32.                         </div>  
  33.                     </div>  
  34.                     <div class="form-group">  
  35.                         <label for="edit-dob" class="col-sm-2 control-label">DOB</label>  
  36.                         <div class="col-sm-10">  
  37.                             <input type="text" class="form-control" id="edit-dob" name="mobile" placeholder="DOB" ng-model="DOB">  
  38.                         </div>  
  39.                     </div>  
  40.                      
  41.                 </div>  
  42.                 <div class="modal-footer">  
  43.                     <button type="button" class="btn btn-default"  ng-click="Close()">Close</button>  
  44.                     <button type="submit" class="btn btn-primary" ng-click="Update()">Update</button>  
  45.                 </div>  
  46.             </form>  
  47.         </div>  
  48.         <!-- /.modal-content -->  
  49.     </div>  
  50.     <!-- /.modal-dialog -->  
  51. </div>  
and result will be displayed as like following,

Update Employee

Delete Employee

To delete the employee, just click on delete button to delete respective employee. I have createdDeleteEmployee.html page.
  1. <div id="delete" ng-controller="EmployeeController">  
  2.     <div class="modal-dialog">  
  3.         <div class="modal-content">  
  4.             <div class="modal-header">  
  5.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>  
  6.                 <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>  
  7.             </div>  
  8.             <div class="modal-body">  
  9.   
  10.                 <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete Record for <b>{{FirstName + " "+LastName}}</b>?</div>  
  11.   
  12.             </div>  
  13.             <div class="modal-footer ">  
  14.                 <button type="submit" class="btn btn-success" ng-click="Delete()"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>  
  15.                 <button type="button" class="btn btn-default" ng-click="Close()"><span class="glyphicon glyphicon-remove"></span> No</button>  
  16.             </div>  
  17.         </div>  
  18.         <!-- /.modal-content -->  
  19.     </div>  
  20.     <!-- /.modal-dialog -->  
  21. </div>  
When you will click on delete button, it will open a page where it will ask for confirmation for delete.

Delete Employee

Conclusion

So, today we have learned how to create a Web API and how to create an Angular JS and perform CRUD operations.

I hope this post will help you. Please put your feedback using comments which helps me to improve myself for the next post. If you have any doubts please ask your doubts or query in the comment section and If you like this post, please share it with your friends.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs