In this article, we will learn how to build an ASP.NET Core application with Angular from scratch. This is the first part of this topic and there is a second, the link is at the end of this blog. The blog will start with setting up the environment for ASP.NET Core app development with Angular.
We have mentioned steps in simple and easier ways to create a basic application. You will learn to build an app with cool features and efficient functionality. Once you will get an idea of how to create pieces and assemble them for application, you will be able to add more functionalities and features.
So, without further ado let’s start with the tutorial on building ASP.NET Core with an Angular app. The bellow is the ASP.NET Core angular sample project which will help you understand the process to create an app.
Step 1: .NET Core 5 installation
Install .NET Core 5 version in your system. Click here and install.
Click here and install Node JS.
Install Visual Art Code in your system.
Step 2: Create a new project
Now that you have installed various environments in your system, let’s start creating our first new app with Dot NET. Further will use C# language to create an ASP.NET web application.
Open the command in your system and go to the location where you want to create your first project.
Type the following command
mkdir DatingApp
Cd DatingApp
Use dotnet line of command to check whether your system has dotnet sdk.
dotnet --version
Step 3: Create a new solution file
dotnet new sln
Step 4: Create a API and provide it with an output directory of the API.
dotnet new webapi -o API
Step 5: Add an API project into our solution
dotnet sln add API/
Step 6: Open an API project in VSCode
Start your VSCode and open the folder you just created.
Set up the Virtual Studio Code with the below-given extensions.
C# for visual studio code
C# Extentions by JosKreativ
Material Icon Themes
Step 6: Run your app
Go to Android Studio Code> View> Terminal
Cd API
Enable the browser in order to trust the certificate provided by dotnet sdk. Then the following command.
dotnet dev-certs https -- trust
Run the server by typing the following command
dotnet watch run
You could see that the route controller is defined by the name WeatherForecast. Navigate to https://localhost:5001/WeatherForecast and this will give the output of some records.
Here you will get a request which will return an array of weather forecasts. To gather more information, let's first go to appsettings.json and alter the amount of logging.
Step 7: Configure Service
In case you want to provide a service or class available for another part of application, we have to configure service which often refers to dependency interjection container. Net Core will help you delete and create these services.
Next, is using Configure method. This method configures the HTTP request pipeline. First, you need to check whether you are in the return dev exception page or dev mode. The others employ https redirection, and it will use the routing mechanism to determine where to direct users, among other things.
Another file that you need to look at is Launchsetting.json which tells you where to route and provide the URL.
Now that we have ended our blog about the ASP.NET app with Angular. Navigate to the second part and continue building your application.
No comments:
Post a Comment