Creating a WebAPI Project With Angular

Introduction

 
ASP.NET Web API is a framework for building the HTTP services that can be accessed by any client browsers and mobile devices. By using this framework we can build Restful Applications.
 
Create the WebAPI Project in Visual Studio 2019 by selecting ASP.NET Core 3.1:
 
Creating WebAPI Project With Angular
 
Select ASP.NET Core Web Application and click on Next. Before creating, give some name to your solution and create the Web Application
 
Creating WebAPI Project With Angular 
 
Select the Core Version in the dropdown and select API Project and Create:
 
Creating WebAPI Project With Angular 
 
Right Click on the project --> New Item
 
Creating WebAPI Project With Angular
 
Select the API Controller Class and give it a name.
 
Creating WebAPI Project With Angular
 
Right-click on the project and create the wwwroot folder, all the static files are stored under the wwwroot folder.
 
Right-click on the wwwroot folder, then add the Index.html and app.js files.
 
Creating WebAPI Project With Angular 
 
Creating WebAPI Project With Angular
 
In the app.js file, we need to inject the angular module by using the followed code syntax. 
 
syntax
 
var app = angular.module('app', []);
 
Design your HTML page with the following code:
 
Creating WebAPI Project With Angular 
 
Write code for calling the WebAPI Post Methods and get the Return Value in the app.js file:
 
Creating WebAPI Project With Angular
 
RightClick on the solution add a folder called Model and under the model folder, add the ModelClass.cs with the required properties.
 
Creating WebAPI Project With Angular
 
Write PostMethod code in the API Controller.
 
Creating WebAPI Project With Angular 
 
Before executing the project, we need to configure the startup.cs, In the configure method, we have to add the following code:
 
app.UseDefaultFiles();
app.UseStaticFiles();
 
Finally, configure your properties with lunchsetting.json set lunchurls.
 
Creating WebAPI Project With Angular 
 

Summary

 
In this blog, we learned how to create WebAPI core project and configure it in AngularJs.