Building Angular Application with Asp.Net Core

Building Angular Application with Asp.Net Core

01 Jun 2024
Beginner
556 Views
5 min read

Angular Application with Asp.Net Core: An Overview

Angular is nothing but a platform and also a framework that builds single-page client applications while Asp.Net Core is a high-performance web development framework. Single-page application (SPA) frameworks like Angular can be configured with ASP.NET Core to facilitate the development and publishing process.

In this ASP.NET Core Tutorial, we will see how to create an Angular application with ASP.NET Core which includes the client-side npm package and the required backend middleware. Also, consider learning the ASP.NET Core Course for a better understanding of .net concepts.

Step 1:Create the Project

In Visual Studio 2022, create a new project, select ASP.NET Core with Angular as the project template, and continue with Next.

  • Select a project name, location, and solution name in the next dialog and confirm with Next.
  • In the last dialog, select .NET 6 (Long-term support) as the Framework and confirm with Create.

Step-2 Add NuGet Packages

In the Solution Explorer, select your created project and choose Manage NuGet Packages... from the Project main menu.

1. Select Text Control Offline Packages from the Package source drop-down.

2. Install the latest versions of the following packages:

  • TXTextControl.TextControl.ASP.SDK
  • TXTextControl.Web
  • TXTextControl.Web.DocumentViewer

Step-3 Add the Middleware

Open the Program.cs file located in the project's root folder. Replace the content with the following code:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();

builder.Services.AddCors(p => p.AddPolicy("corsapp", builder =>
{
   builder.WithOrigins("*").AllowAnyMethod().AllowAnyHeader();
}));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment()) {
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseCors("corsapp");

// enable Web Sockets
app.UseWebSockets();

// adding the TX Text Control WebSocket middleware
app.UseTXWebSocketMiddleware();

// adding the viewer endpoint routing
app.UseEndpoints(endpoints =>
{
   endpoints.MapControllerRoute(
       name: "default",
       pattern: "{controller=TextControl}/{action}");
});

app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html"); ;

app.Run();

Step-4:Add npm Packages

1. The Angular application has already been created by the Visual Studio project template.
2. It is available in the ClientApp folder in the Solution Explorer.
3. Find the ClientApp folder in the Solution Explorer.
4. Choose Open in Terminal from the right-click context menu.
5. Install the TX Text Control document editor package by typing in the following command:
6. Open the file src -> app -> home -> home.component.html, replace the complete file with the following code and save it:
<div style="width: 100%; height: 800px;">
  <tx-document-editor width="100%" height="100%"webSocketURL="wss://localhost:7282/api/TXWebSocket">
</tx-document-editor>
</div>    

7. Be sure to replace the port number (7282 in this example) with the port number of your hosting application. You can find this port number in the launchSettings.json file.

10. Compile and start the application.

Conclusion:
So in this article, we have learned about building Angular Applications with Asp.Net Core. I hope you enjoyed learning these concepts while programming with .Net. Feel free to ask any questions from your side. Your valuable feedback or comments about this article are always welcome. Consider our .NET Certification Training to learn .net from scratch.

FAQs

Q1. What is ASP.NET Core with Angular?

It provides a convenient starting point for ASP.NET Core apps using Angular and the Angular CLI to implement a rich, client-side user interface (UI).

Q2. Can I use Angular with ASP.NET Core MVC?

Yes, Integrating ASP.NET Core 2.0 MVC framework with Angular 5 saves the development effort considerably and avoids the need to host your application on separate servers.

Q3. Is Angular better than asp net?

Angular applications support better-automated testing for both the client and server.

Take our Aspnet skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE

Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
ASP.NET Core Certification Training Jun 17 MON, WED, FRI
Filling Fast
07:00AM to 08:30AM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification Training Jun 17 MON, WED, FRI
Filling Fast
07:00AM to 08:30AM (IST)
Get Details
ASP.NET Core (Project) Jun 23 SAT, SUN
Filling Fast
08:30PM to 10:30PM (IST)
Get Details
ASP.NET Core Certification Training Jun 30 SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification Training Jun 30 SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this