Angular HTTP GET in ASP.Net MVC Application

This post explains how we can make an HTTP GET in Angular application, to an API which is exposed as a web service. This is a continuation of the previous example Routing in Angular – Asp.Net MVC Application. You can download the source code from here. In the source code, please refer to 3_Angular_Http_GET project.

Create a new typescript file ’employee.ts’ in Angular\Employee folder, which holds Employee model class. Below is the content of the file.

Create a new file ‘mock-data.ts’ in common\mock-data.ts, which is used to create mock objects for testing components. Add below code into the file.

Edit list-employees.component.ts and add below code. In the component employees field is an array which holds list of employee objects.
In the template a simple bootstrap table is added. ‘*ngFor’ directive is used to iterate through the array and create table rows.

Navigate to Employee -> ListEmployees and browse the page. You should see below page.

The table data is populated from mock objects. Next let us create a web api controller in the project so that we can make an HTTP GET request from the ListEmployees component and get the employee data from an external database.

Create a new folder API in ‘Conrollers’ folder and add a new Controller class ‘EmployeeAPIController’ which is a WebAPI controller.

Open Global.asax and add ‘GlobalConfiguration.Configure(WebApiConfig.Register);’ line in Application_Start method. Below is the content of the file.

I am going to use an existing project from my repository which is built using Entiyframework6. Please refer to my earlier posts for understanding data access projects.

Entity Framework Repository Pattern Demo Application – Part 1
Entity Framework Repository Pattern Demo Application – Part 2

Download and add projects to the solution.

Run below command in nuget package manager console to install entity framework in 3_Angular_Http_Get project.

Add connection string in web.config as shown below.

Add a new class ‘EmployeeModel’ in Models folder. Below is the content of the EmployeeModel class.

Open EmployeeAPIController and add method to fetch all employees from the database. Below is the code.

Now run the project and navigate to ‘http://localhost:<port number>/AngularApp/EmployeeService/GetAllEmployeesEmployees’. You should see the list of employees in xml format.

Add a new typescript file employee.service.ts in Angular\Employee folder. Add below code in the file. This is our Employee service class. ‘getEmployees’ method calls the web api method and fetches employee list.

Next make necessary  changes in list-employees.component.ts file to use this service. Import OnInit along with Component from angular core.

Below is the code for list-employees.component.ts.

Edit Common\app.module.ts and import httpmodule. Below is the content of modified app.module.

Now run the application and navigate to Employee -> List Employees link.

One comment on “Angular HTTP GET in ASP.Net MVC Application

Leave a Reply

Your email address will not be published. Required fields are marked *