🌐 Building a Modern Web Application Using .NET Core Web API and Angular with Standalone Components

 🚀 Introduction

Modern web development has evolved rapidly, and developers today look for frameworks that are scalable, modular, and high-performing.
A perfect combination that fulfills these needs is .NET Core Web API for the backend and Angular (15+) with Standalone Components for the frontend.

This article walks you through how to use both technologies together to build a clean, fast, and maintainable web application.

---

🧩 Architecture Overview

Layer	Technology	Description
Frontend (Client)	Angular 15+ (Standalone Components)	Manages UI, routing, and communication with the backend using HTTP services.
Backend (Server)	.NET 6/7/8 Web API	Provides REST APIs, authentication, and business logic.
Database	SQL Server / PostgreSQL / Azure SQL	Stores persistent application data.
Hosting	Azure App Service / Docker / IIS	Hosts both the backend and frontend applications.

---

🅰️ Angular with Standalone Components

What Are Standalone Components?

From Angular 15 onwards, you no longer need to wrap every component inside an NgModule.
Standalone Components simplify your app’s structure, reduce boilerplate code, and improve performance.

Create a new Angular app with standalone components:

ng new my-app --standalone

Example of a simple standalone component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  template: `<h1>Welcome to My Angular App!</h1>`
})
export class HomeComponent {}

You can import other modules or components directly:

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './user.component.html'
})
export class UserComponent {}

Routing with Standalone Components

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { UserComponent } from './user.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'user', component: UserComponent }
];

Bootstrap the app without modules:

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

---

⚙️ Backend Setup — .NET Core Web API

Create a new API project:

dotnet new webapi -n MyApp.Api

Example Controller:

using Microsoft.AspNetCore.Mvc;

[ApiController]
[Route("api/[controller]")]
public class UsersController : ControllerBase
{
    [HttpGet]
    public IActionResult GetUsers() =>
        Ok(new[] { new { Id = 1, Name = "Cherry" } });
}

Enable CORS for Angular

To allow the Angular frontend to call the API:

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular",
        policy => policy.WithOrigins("http://localhost:4200")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

var app = builder.Build();
app.UseCors("AllowAngular");
app.MapControllers();
app.Run();

---

🔗 Connecting Angular with .NET Core Web API

In Angular, use the HttpClient service to connect to your API.

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';

@Component({
  selector: 'app-users',
  standalone: true,
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UsersComponent {
  private http = inject(HttpClient);
  users: any[] = [];

  ngOnInit() {
    this.http.get<any[]>('https://localhost:7200/api/users')
      .subscribe(data => this.users = data);
  }
}

---

📦 Folder Structure Example

/MyApp
 ├── /MyApp.Api        (ASP.NET Core Web API)
 │    ├── Controllers/
 │    └── Models/
 ├── /MyApp.Client     (Angular App with Standalone Components)
 │    ├── src/app/
 │    └── environments/
 └── docker-compose.yml (optional for containers)

---

⚙️ Deployment & CI/CD

You can deploy both apps on Azure using:

• Azure App Service for backend API

• Azure Static Web Apps or App Service for frontend

• GitHub Actions / Azure DevOps for automated CI/CD pipelines

This setup ensures smooth builds, testing, and deployment.

---

💡 Advantages of This Stack

Feature	Benefit
No NgModules	Simpler and cleaner architecture
Tree-shakable Imports	Smaller and faster bundles
.NET Core Web API	Cross-platform, fast, and secure backend
Scalable	Easily expandable for microservices
Great DevOps Support	Works seamlessly with Azure and GitHub

---

🧠 Conclusion

Using .NET Core Web API with Angular Standalone Components provides a modern, high-performance, and scalable way to build full-stack web applications.
This architecture simplifies development, improves code maintainability, and offers better deployment flexibility — perfect for enterprise and startup projects alike.

Background Service in Micro Services - Complete Guide

 A background service that monitors a database for changes (like new orders) and then acts on them. I’ll explain the flow step by step, typical in a .NET Core + Web API + SQL Server environment.

1. What is a Background Service?

In .NET Core, a background service is a long-running process that executes independently of HTTP requests. It can continuously run in the background and perform tasks like:

• Polling a database

• Sending emails or notifications

• Processing queues or orders

In .NET Core, we usually implement it using IHostedService or BackgroundService.

---

2. High-Level Flow for Database Polling

Imagine your scenario: the service checks for new orders and processes them.

1. Database

   • Table: Orders

   • Columns: OrderId, CustomerId, Status, CreatedAt, etc.

   • New orders are inserted with Status = 'Pending'.

2. Background Service (C#)

   • Runs continuously in the background.

   • Periodically checks the Orders table for Status = 'Pending'.

   • Picks up pending orders and updates them to Processing or triggers other actions.

3. Processing Flow

   • Fetch orders:

     var pendingOrders = dbContext.Orders
                         .Where(o => o.Status == "Pending")
                         .ToList();
     

   • Process orders (e.g., send to shipping service, generate invoice, etc.)

   • Update status:

     order.Status = "Processed";
     dbContext.SaveChanges();
     

4. Notification (Optional)

   • Once processed, the service can send notifications via email, push notifications, or enqueue messages in a message broker like Azure Service Bus.

---

3. Sample Flow Diagram

Angular / Frontend
      |
      | [Customer places order]
      v
SQL Server (Orders Table)
      |
      | [Background Service polls DB periodically]
      v
.NET Core Background Service
      |
      |-- Fetch pending orders
      |-- Process orders
      |-- Update status
      |-- Send notifications (optional)
      v
External services / APIs / Notifications

---

4. Polling vs Event-Driven Approach

• Polling:
  The background service queries the database every N seconds/minutes. Simple but less efficient for large-scale systems.

• Event-driven:
  Instead of polling, use a message broker (Azure Service Bus, RabbitMQ, Kafka).

  • Orders insert triggers a message.

  • Background service subscribes and processes only when a new order arrives.

  • More scalable and real-time.

---

5. Example: Implementing BackgroundService in .NET Core

public class OrderProcessingService : BackgroundService
{
    private readonly IServiceScopeFactory _scopeFactory;

    public OrderProcessingService(IServiceScopeFactory scopeFactory)
    {
        _scopeFactory = scopeFactory;
    }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        while (!stoppingToken.IsCancellationRequested)
        {
            using var scope = _scopeFactory.CreateScope();
            var dbContext = scope.ServiceProvider.GetRequiredService<AppDbContext>();

            var pendingOrders = await dbContext.Orders
                                    .Where(o => o.Status == "Pending")
                                    .ToListAsync();

            foreach (var order in pendingOrders)
            {
                // Process order
                order.Status = "Processed";
            }

            await dbContext.SaveChangesAsync();

            // Wait for some time before next check
            await Task.Delay(TimeSpan.FromSeconds(10), stoppingToken);
        }
    }
}

---

✅ Summary of the Flow:

1. Frontend inserts an order into SQL Server.

2. Background service wakes up periodically.

3. It queries the database for pending orders.

4. Processes each order.

5. Updates the order status.

6. Optional: sends notifications or triggers other services.

7. Repeats indefinitely.