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']);
  3. app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
  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;
  5. $scope.Close = function () {
  6. $location.path('/EmployeeList');
  7. }
  9. //Get all employee and bind with html table
  10. $http.get("api/employee/GetAllEmployee").success(function (data) {
  11. $scope.ListOfEmployee = data;
  13. })
  14. .error(function (data) {
  15. $scope.Status = "data not found";
  16. });
  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. }
  37. //Fill the employee records for update
  39. if ($routeParams.empId) {
  40. $scope.Id = $routeParams.empId;
  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. });
  51. }
  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) {
  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. }
  77. //Delete the selected employee from the list
  78. $scope.Delete = function () {
  79. if ($scope.Id > 0) {
  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. }
  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>
  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">
  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>
  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>
  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">
  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>
  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.