Year End Sale: Get Upto 40% OFF on Live Training! Offer Ending in
D
H
M
S
Get Now
Building Angular Application with Asp.Net Core

Building Angular Application with Asp.Net Core

07 Aug 2024
Beginner
3K Views
5 min read
Learn with an interactive course and practical hands-on labs

Free ASP.NET Core Course

Angular Application with Asp.Net Core: An Overview

Angular is 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

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).

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.

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
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan, Founder and CEO of ScholarHat by DotNetTricks, is a renowned expert in System Design, Software Architecture, Azure Cloud, .NET, Angular, React, Node.js, Microservices, DevOps, and Cross-Platform Mobile App Development. His skill set extends into emerging fields like Data Science, Python, Azure AI/ML, and Generative AI, making him a well-rounded expert who bridges traditional development frameworks with cutting-edge advancements. Recognized as a Microsoft Most Valuable Professional (MVP) for an impressive 9 consecutive years (2016–2024), he has consistently demonstrated excellence in delivering impactful solutions and inspiring learners.

Shailendra’s unique, hands-on training programs and bestselling books have empowered thousands of professionals to excel in their careers and crack tough interviews. A visionary leader, he continues to revolutionize technology education with his innovative approach.
Accept cookies & close this