Single Page Application (SPA) Using AngularJS, Web API and MVC 5

For this you need Visual Studio 2013. You can download Visual Studio 2013 using the following link: Visual Studio Community 2013.

In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client. In subsequent interactions with the page, for example the user navigates to a link or submits a form with data, a new request is sent to the server and the flow starts again. The server processes the request and sends a new page to the browser in response to the new action requested by the client.

traditional web applications
Image 1.

In Single-Page Applications (SPAs) the entire page is loaded into the browser after the initial request, but subsequent interactions take place using Ajax requests. This means that the browser must update only the portion of the page that has changed; there is no need to reload the entire page. The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience.

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.

SAP Lifecycle
Image 2.

Now we will learn this by creating a sample application. In this SPA example I will do CRUD operations on the Student table using the Web API and MVC.

CRUD operation on Student table
Image 3.

The following is my Data Table in design mode:

Data Table in design mode
Image 4.

The script of my Student Table is:

  1. CREATE TABLE [dbo].[Student](  
  2.     [StudentID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Name] [varchar](50) NULL,  
  4.     [Email] [varchar](500) NULL,  
  5.     [Class] [varchar](50) NULL,  
  6.     [EnrollYear] [varchar](50) NULL,  
  7.     [City] [varchar](50) NULL,  
  8.     [Country] [varchar](50) NULL,  
  9.  CONSTRAINT [PK_Student] PRIMARY KEY CLUSTERED   
  10. (  
  11.     [StudentID] ASC  
  12. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ONON [PRIMARY]  
  13. ON [PRIMARY]  
  14.   
  15. GO  
  16.   
  17. SET ANSI_PADDING OFF  
  18. GO  
Open Visual Studio 2013 then click New Project.

New Project
Image 5.

Select Web -> ASP.NET Web Application then provide I a name. Then click OK.

Web Application
Image 6.

Select Single Page Application from the template option. Then click OK.

Now right-click on the Models Folder then select Add -> ADO.NET Entity Data Model.

Entity Data Model
Image 7.

manage student
Image 8.

Provide It a name.

designer from database
Image 9.

select data source
Image 10.

save connection string
Image 11.

select table
Image 12.

navigation properties
Image 13.

Now we will add AngularJS references using NuGet. Right-click on Solution Explorer.

AngularJS
 Image 14.

solution Explorer
Image 15.

installing
Image 16.

install package
Image 17.

Now we will add a Web API so right-click on the controller folder then select Add -> Controller.

add controller
Image 18.

web api
Image 19.

controller name
Image 20.

ManageStudentsInfoAPIController.cs is: 
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Data.Entity;  
  5. using System.Data.Entity.Infrastructure;  
  6. using System.Linq;  
  7. using System.Net;  
  8. using System.Net.Http;  
  9. using System.Web.Http;  
  10. using System.Web.Http.Description;  
  11. using SPA_MVC_StudentApp.Models;  
  12.   
  13. namespace SPA_MVC_StudentApp.Controllers  
  14. {  
  15.     public class ManageStudentsInfoAPIController : ApiController  
  16.     {  
  17.         private SchoolManagementEntities db = new SchoolManagementEntities();  
  18.   
  19.         // GET: api/ManageStudentsInfoAPI  
  20.         public IQueryable<Student> GetStudent()  
  21.         {  
  22.             return db.Student;  
  23.         }  
  24.   
  25.         // GET: api/ManageStudentsInfoAPI/5  
  26.         [ResponseType(typeof(Student))]  
  27.         public IHttpActionResult GetStudent(int id)  
  28.         {  
  29.             Student student = db.Student.Find(id);  
  30.             if (student == null)  
  31.             {  
  32.                 return NotFound();  
  33.             }  
  34.   
  35.             return Ok(student);  
  36.         }  
  37.   
  38.         // PUT: api/ManageStudentsInfoAPI/5  
  39.         [ResponseType(typeof(void))]  
  40.         public IHttpActionResult PutStudent(int id, Student student)  
  41.         {  
  42.             if (!ModelState.IsValid)  
  43.             {  
  44.                 return BadRequest(ModelState);  
  45.             }  
  46.   
  47.             if (id != student.StudentID)  
  48.             {  
  49.                 return BadRequest();  
  50.             }  
  51.   
  52.             db.Entry(student).State = EntityState.Modified;  
  53.   
  54.             try  
  55.             {  
  56.                 db.SaveChanges();  
  57.             }  
  58.             catch (DbUpdateConcurrencyException)  
  59.             {  
  60.                 if (!StudentExists(id))  
  61.                 {  
  62.                     return NotFound();  
  63.                 }  
  64.                 else  
  65.                 {  
  66.                     throw;  
  67.                 }  
  68.             }  
  69.   
  70.             return StatusCode(HttpStatusCode.NoContent);  
  71.         }  
  72.   
  73.         // POST: api/ManageStudentsInfoAPI  
  74.         [ResponseType(typeof(Student))]  
  75.         public IHttpActionResult PostStudent(Student student)  
  76.         {  
  77.             if (!ModelState.IsValid)  
  78.             {  
  79.                 return BadRequest(ModelState);  
  80.             }  
  81.   
  82.             db.Student.Add(student);  
  83.             db.SaveChanges();  
  84.   
  85.             return CreatedAtRoute("DefaultApi"new { id = student.StudentID }, student);  
  86.         }  
  87.   
  88.         // DELETE: api/ManageStudentsInfoAPI/5  
  89.         [ResponseType(typeof(Student))]  
  90.         public IHttpActionResult DeleteStudent(int id)  
  91.         {  
  92.             Student student = db.Student.Find(id);  
  93.             if (student == null)  
  94.             {  
  95.                 return NotFound();  
  96.             }  
  97.   
  98.             db.Student.Remove(student);  
  99.             db.SaveChanges();  
  100.   
  101.             return Ok(student);  
  102.         }  
  103.   
  104.         protected override void Dispose(bool disposing)  
  105.         {  
  106.             if (disposing)  
  107.             {  
  108.                 db.Dispose();  
  109.             }  
  110.             base.Dispose(disposing);  
  111.         }  
  112.   
  113.         private bool StudentExists(int id)  
  114.         {  
  115.             return db.Student.Count(e => e.StudentID == id) > 0;  
  116.         }  
  117.     }  
  118. }  
Now again right-click on the Controller folder then select Add -> Controller.

add another controller
Image 21.

mvc controller
Image 22.

type controller name
Image 23.

After adding ManageStudentInfo Controller we need to add a view.

add view
Image 24.

Index.cshtml
  1. @{  
  2.     ViewBag.Title = "SPA";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5.   
  6. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
  7. <body data-ng-app="ApplicationModule">  
  8.     <div>  
  9.         <div>  
  10.             <div>  
  11.                 <table cellpadding="5" cellspacing="6" width="100%" style="background-color:whitesmoke; border:solid 4px green;">  
  12.                     <tr>  
  13.                         <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="showstudents"> Show All Students </a></td>  
  14.                         <td style="border: solid 1px gray; width:170px; text-align:center;"><a href="addstudent"> Add New Student </a></td>  
  15.                         <td></td>  
  16.                     </tr>  
  17.                 </table>  
  18.             </div>  
  19.             <div>  
  20.                 <div data-ng-view></div>  
  21.             </div>  
  22.         </div>  
  23.     </div>  
  24.   
  25. </body>  
  26.   
  27. @section scripts{  
  28.     <script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>  
  29.     <script type="text/javascript" src="@Url.Content("~/Scripts/angular-route.min.js")"></script>  
  30.     <script type="text/javascript" src="@Url.Content("~/MyScripts/Module.js")"></script>  
  31.     <script src="~/MyScripts/Services.js"></script>  
  32.     <script type="text/javascript" src="@Url.Content("~/MyScripts/ShowStudentsController.js")"></script>  
  33.     <script type="text/javascript" src="@Url.Content("~/MyScripts/AddStudentController.js")"></script>  
  34.     <script type="text/javascript" src="@Url.Content("~/MyScripts/EditStudentController.js")"></script>  
  35.     <script type="text/javascript" src="@Url.Content("~/MyScripts/DeleteStudentController.js")"></script>  
  36. }  
Note: I will add all these scripts in the following.

Here in this example we will perform the following operations: 
  • ShowAllStudent
  • AddStudent
  • EditStudent
  • DeleteStudent

So we will add a partial view for all these. So right-click on Views then select the ManageStudentInfo folder. Like the following.

manage stdio info
Image 25.

ShowAllStudent.cshtml

  1. <table><tr><td height="10px"></td></tr></table>  
  2. <table cellpadding="4" cellspacing="4" width="90%" align="center"   
  3.        style="background-color: skyblue; border:solid 2px red; padding-top:20px;">  
  4.     <thead>  
  5.         <tr style="background-color:#F5F5F5;">  
  6.             <th>Student ID</th>  
  7.             <th>Name</th>  
  8.             <th>Email</th>  
  9.             <th>Class</th>  
  10.             <th>Enroll Year</th>  
  11.             <th>City</th>  
  12.             <th>Country</th>  
  13.             <th></th>  
  14.             <th></th>  
  15.         </tr>  
  16.     </thead>  
  17.     <tbody>  
  18.         <tr data-ng-repeat="Stud in Students">  
  19.             <td>{{Stud.studentID}}</td>  
  20.             <td>{{Stud.name}}</td>  
  21.             <td>{{Stud.email}}</td>  
  22.             <td>{{Stud.class}}</td>  
  23.             <td>{{Stud.enrollYear}}</td>  
  24.             <td>{{Stud.city}}</td>  
  25.             <td>{{Stud.country}}</td>  
  26.             <td><a ng-click="editStudent(Stud.studentID)">Edit</a></td>  
  27.             <td><a ng-click="deleteStudent(Stud.studentID)">Delete</a></td>  
  28.         </tr>  
  29.     </tbody>  
  30. </table>  
Add the same for AddStudent, EditStudent, DeleteStudent partial view. And use the following code.

AddStudent.cshtml
  1. @{  
  2.     ViewBag.Title = "Add New Student";  
  3. }  
  4. <table><tr><td height="10px"></td></tr></table>  
  5.   
  6. <table cellpadding="4" cellspacing="4" width="70%" align="center" style="background-color: skyblue;   
  7. border:solid 2px red; padding-top:20px;">  
  8.     <tr><td colspan="3" style="background-color:gray; font-size:18pt;   
  9. font-weight:bold; height:30px; text-align:center;">Add New Student</td></tr>  
  10.     <tr>  
  11.         <td style="text-align:right;">Student ID</td>  
  12.         <td><input type="text" ng-model="StudentID" />  </td>  
  13.     </tr>  
  14.     <tr>  
  15.         <td style="text-align:right;">Name</td>  
  16.         <td><input type="text" ng-model="Name" />  </td>  
  17.     </tr>  
  18.     <tr>  
  19.         <td style="text-align:right;">Email</td>  
  20.         <td><input type="text" ng-model="Email" />  </td>  
  21.     </tr>  
  22.     <tr>  
  23.         <td style="text-align:right;">Class</td>  
  24.         <td><input type="text" ng-model="Class" />  </td>  
  25.     </tr>  
  26.     <tr>  
  27.         <td style="text-align:right;">Enroll Year</td>  
  28.         <td><input type="text" ng-model="EnrollYear" />  </td>  
  29.     </tr>  
  30.     <tr>  
  31.         <td style="text-align:right;">City</td>  
  32.         <td><input type="text" ng-model="City" />  </td>  
  33.     </tr>  
  34.     <tr>  
  35.         <td style="text-align:right;">Country</td>  
  36.         <td><input type="text" ng-model="Country" />  </td>  
  37.     </tr>  
  38.     <tr>  
  39.         <td></td>  
  40.         <td>  
  41.             <input type="button" value="Save" data-ng-click="save()" />  
  42.         </td>  
  43.     </tr>  
  44.   
  45. </table>  
DeleteStudent.cshtml
  1. @{  
  2.     ViewBag.Title = "Delete Student";  
  3. }  
  4.   
  5. <table><tr><td height="10px"></td></tr></table>  
  6.   
  7. <table cellpadding="4" cellspacing="4" width="70%" align="center" style="background-color: skyblue; border:solid 2px red; padding-top:20px;">  
  8.     <tr><td colspan="3" style="background-color:gray; font-size:18pt; font-weight:bold; height:30px; text-align:center;">Delete Student Information</td></tr>  
  9.     <tr>  
  10.   
  11.         <td style="text-align:right;">Student ID</td>  
  12.         <td>{{Student.studentID}}  </td>  
  13.     </tr>  
  14.     <tr>  
  15.   
  16.         <td style="text-align:right;">Name # </td>  
  17.         <td> {{Student.name}}  </td>  
  18.     </tr>  
  19.     <tr>  
  20.         <td style="text-align:right;">Email # </td>  
  21.         <td>{{Student.email}}  </td>  
  22.     </tr>  
  23.     <tr>  
  24.         <td style="text-align:right;">Class # </td>  
  25.         <td>{{Student.class}}  </td>  
  26.     </tr>  
  27.     <tr>  
  28.         <td style="text-align:right;">Enroll Year # </td>  
  29.         <td>{{Student.enrollYear}}  </td>  
  30.     </tr>  
  31.     <tr>  
  32.         <td style="text-align:right;">City # </td>  
  33.         <td>{{Student.city}}  </td>  
  34.     </tr>  
  35.     <tr>  
  36.         <td style="text-align:right;">Country # </td>  
  37.         <td>{{Student.country}}  </td>  
  38.     </tr>  
  39.     <tr>  
  40.         <td></td>  
  41.         <td>  
  42.             <input type="button" value="Delete" ng-click="delete()" />  
  43.         </td>  
  44.     </tr>  
  45.   
  46. </table>  
EditStudent.cshtml
  1. @{  
  2.     ViewBag.Title = "Edit Student";  
  3. }  
  4. <table><tr><td height="10px"></td></tr></table>  
  5.   
  6. <table cellpadding="4" cellspacing="4" width="70%" align="center" style="background-color: skyblue; border:solid 2px red; padding-top:20px;">  
  7.     <tr><td colspan="3" style="background-color:gray; font-size:18pt; font-weight:bold; height:30px; text-align:center;">Edit Student Information</td></tr>  
  8.     <tr>  
  9.   
  10.         <td style="text-align:right;">Student ID</td>  
  11.         <td><input type="text" ng-model="Student.studentID" />  </td>  
  12.     </tr>  
  13.     <tr>  
  14.   
  15.         <td style="text-align:right;">Name</td>  
  16.         <td><input type="text" ng-model="Student.name" />  </td>  
  17.     </tr>  
  18.     <tr>  
  19.         <td style="text-align:right;">Email</td>  
  20.         <td><input type="text" ng-model="Student.email" />  </td>  
  21.     </tr>  
  22.     <tr>  
  23.         <td style="text-align:right;">Class</td>  
  24.         <td><input type="text" ng-model="Student.class" />  </td>  
  25.     </tr>  
  26.     <tr>  
  27.         <td style="text-align:right;">Enroll Year</td>  
  28.         <td><input type="text" ng-model="Student.enrollYear" />  </td>  
  29.     </tr>  
  30.     <tr>  
  31.         <td style="text-align:right;">City</td>  
  32.         <td><input type="text" ng-model="Student.city" />  </td>  
  33.     </tr>  
  34.     <tr>  
  35.         <td style="text-align:right;">Country</td>  
  36.         <td><input type="text" ng-model="Student.country" />  </td>  
  37.     </tr>  
  38.     <tr>  
  39.         <td></td>  
  40.         <td>  
  41.             <input type="button" value="Save" ng-click="save()" />  
  42.             <br />  
  43.             <div>{{error}}</div>  
  44.         </td>  
  45.     </tr>  
  46.   
  47. </table>  
Now, open ManageStudentInfoController.cs and provide the following code:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace SPA_MVC_StudentApp.Controllers  
  8. {  
  9.     public class ManageStudentInfoController : Controller  
  10.     {  
  11.         // GET: ManageStudentInfo  
  12.         public ActionResult Index()  
  13.         {  
  14.             return View();  
  15.         }  
  16.         public ActionResult AddNewStudent()  
  17.         {  
  18.             return PartialView("AddStudent");  
  19.         }  
  20.   
  21.         public ActionResult ShowStudents()  
  22.         {  
  23.             return PartialView("ShowAllStudent");  
  24.         }  
  25.   
  26.         public ActionResult EditStudent()  
  27.         {  
  28.             return PartialView("EditStudent");  
  29.         }  
  30.   
  31.         public ActionResult DeleteStudent()  
  32.         {  
  33.             return PartialView("DeleteStudent");  
  34.         }  
  35.     }  
  36. }  
Now add a new folder, MyScripts, to your solution.

And add the following JavaScript files. 
  • Module.js
  • Services.js
  • ShowStudentsController.js
  • AddStudentController.js
  • EditStudentController.js
  • DeleteStudentController.js

Now provide the following code in every JavaScript file.

Module.js

  1. var app = angular.module("ApplicationModule", ["ngRoute"]);  
  2.   
  3. app.factory("ShareData"function () {  
  4.     return { value: 0 }  
  5. });  
  6.   
  7. //Showing Routing  
  8. app.config(['$routeProvider''$locationProvider'function ($routeProvider, $locationProvider) {  
  9.     debugger;  
  10.     $routeProvider.when('/showstudents',  
  11.                         {  
  12.                             templateUrl: 'ManageStudentInfo/ShowStudents',  
  13.                             controller: 'ShowStudentsController'  
  14.                         });  
  15.     $routeProvider.when('/addstudent',  
  16.                         {  
  17.                             templateUrl: 'ManageStudentInfo/AddNewStudent',  
  18.                             controller: 'AddStudentController'  
  19.                         });  
  20.     $routeProvider.when("/editStudent",  
  21.                         {  
  22.                             templateUrl: 'ManageStudentInfo/EditStudent',  
  23.                             controller: 'EditStudentController'  
  24.                         });  
  25.     $routeProvider.when('/deleteStudent',  
  26.                         {  
  27.                             templateUrl: 'ManageStudentInfo/DeleteStudent',  
  28.                             controller: 'DeleteStudentController'  
  29.                         });  
  30.     $routeProvider.otherwise(  
  31.                         {  
  32.                             redirectTo: '/'  
  33.                         });  
  34.       
  35.     $locationProvider.html5Mode(true).hashPrefix('!')  
  36. }]);  
Services.js
  1. app.service("SPACRUDService"function ($http) {  
  2.   
  3.     //Read all Students  
  4.     this.getStudents = function () {  
  5.         
  6.         return $http.get("/api/ManageStudentInfoAPI");  
  7.     };  
  8.   
  9.     //Fundction to Read Student by Student ID  
  10.     this.getStudent = function (id) {  
  11.         return $http.get("/api/ManageStudentInfoAPI/" + id);  
  12.     };  
  13.   
  14.     //Function to create new Student  
  15.     this.post = function (Student) {  
  16.         var request = $http({  
  17.             method: "post",  
  18.             url: "/api/ManageStudentInfoAPI",  
  19.             data: Student  
  20.         });  
  21.         return request;  
  22.     };  
  23.   
  24.     //Edit Student By ID   
  25.     this.put = function (id, Student) {  
  26.         var request = $http({  
  27.             method: "put",  
  28.             url: "/api/ManageStudentInfoAPI/" + id,  
  29.             data: Student  
  30.         });  
  31.         return request;  
  32.     };  
  33.   
  34.     //Delete Student By Student ID  
  35.     this.delete = function (id) {  
  36.         var request = $http({  
  37.             method: "delete",  
  38.             url: "/api/ManageStudentInfoAPI/" + id  
  39.         });  
  40.         return request;  
  41.     };  
  42. });  
ShowStudentsController.js
  1. app.controller('ShowStudentsController'function ($scope, $location, SPACRUDService, ShareData) {  
  2.     loadAllStudentsRecords();  
  3.   
  4.     function loadAllStudentsRecords()  
  5.     {  
  6.         var promiseGetStudent = SPACRUDService.getStudents();  
  7.           
  8.         promiseGetStudent.then(function (pl) { $scope.Students = pl.data },  
  9.               function (errorPl) {  
  10.                   $scope.error =  errorPl;  
  11.               });  
  12.     }  
  13.   
  14.     //To Edit Student Information  
  15.     $scope.editStudent = function (StudentID) {  
  16.         ShareData.value = StudentID;  
  17.         $location.path("/editStudent");  
  18.     }  
  19.   
  20.     //To Delete a Student  
  21.     $scope.deleteStudent = function (StudentID) {  
  22.         ShareData.value = StudentID;  
  23.         $location.path("/deleteStudent");  
  24.     }  
  25. });  
AddStudentController.js
  1. app.controller('AddStudentController'function ($scope, SPACRUDService) {  
  2.     $scope.StudentID = 0;  
  3.        
  4.     $scope.save = function () {  
  5.         var Student = {  
  6.             StudentID: $scope.StudentID,  
  7.             Name: $scope.Name,  
  8.             Email: $scope.Email,  
  9.             Class: $scope.Class,  
  10.             EnrollYear: $scope.EnrollYear,  
  11.             City: $scope.City,  
  12.             Country: $scope.Country  
  13.         };  
  14.   
  15.         var promisePost = SPACRUDService.post(Student);  
  16.   
  17.         promisePost.then(function (pl) {  
  18.             alert("Student Saved Successfully.");  
  19.         },  
  20.               function (errorPl) {  
  21.                   $scope.error = 'failure loading Student', errorPl;  
  22.               });  
  23.   
  24.     };  
  25.   
  26. });  
EditStudentController.js
  1. app.controller("EditStudentController"function ($scope, $location, ShareData, SPACRUDService) {  
  2.     getStudent();  
  3.   
  4.     function getStudent() {          
  5.         var promiseGetStudent = SPACRUDService.getStudent(ShareData.value);  
  6.   
  7.         promiseGetStudent.then(function (pl)  
  8.         {  
  9.             $scope.Student = pl.data;  
  10.         },  
  11.               function (errorPl) {  
  12.                   $scope.error = 'failure loading Student', errorPl;  
  13.               });  
  14.     }  
  15.   
  16.     $scope.save = function () {  
  17.         var Student = {  
  18.             StudentID: $scope.Student.studentID,  
  19.             Name: $scope.Student.name,  
  20.             Email: $scope.Student.email,  
  21.             Class: $scope.Student.class,  
  22.             EnrollYear: $scope.Student.enrollYear,  
  23.             City: $scope.Student.city,  
  24.             Country: $scope.Student.country  
  25.         };   
  26.   
  27.         var promisePutStudent = SPACRUDService.put($scope.Student.studentID, Student);  
  28.         promisePutStudent.then(function (pl)  
  29.         {  
  30.             $location.path("/showstudents");  
  31.         },  
  32.               function (errorPl) {  
  33.                   $scope.error = 'failure loading Student', errorPl;  
  34.               });  
  35.     };  
  36.   
  37. });  
DeleteStudentController.js
  1. app.controller("DeleteStudentController"function ($scope, $location, ShareData, SPACRUDService) {  
  2.   
  3.     getStudent();  
  4.     function getStudent() {  
  5.   
  6.         var promiseGetStudent = SPACRUDService.getStudent(ShareData.value);  
  7.   
  8.   
  9.         promiseGetStudent.then(function (pl) {  
  10.             $scope.Student = pl.data;  
  11.         },  
  12.               function (errorPl) {  
  13.                   $scope.error = 'failure loading Student', errorPl;  
  14.               });  
  15.     }  
  16.   
  17.     $scope.delete = function () {  
  18.         var promiseDeleteStudent = SPACRUDService.delete(ShareData.value);  
  19.   
  20.         promiseDeleteStudent.then(function (pl) {  
  21.             $location.path("/showstudents");  
  22.         },  
  23.               function (errorPl) {  
  24.                   $scope.error = 'failure loading Student', errorPl;  
  25.               });  
  26.     };  
  27.   
  28. });  
Now run the application:

Run the application
Image 26.

Now click on Show All Students.

single page application
Image 27.

Now click on Add New Student.

Add New Student
Image 28.

manage student information
Image 29.

Now click on Edit.

edit student info
Image 30.

delete student information
Image 31.