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

📝 What are RESTful APIs? A Complete Guide

Introduction

In the world of software development, APIs (Application Programming Interfaces) are the backbone of communication between different applications. One of the most popular types of APIs is the RESTful API. REST APIs are widely used in web and mobile applications because they are simple, scalable, and efficient.

---

🌐 What is an API?

Before diving into RESTful APIs, let’s quickly understand an API.

• An API is a set of rules that allows one software application to communicate with another.

• Example: When you book a cab through an app, the app communicates with the cab service’s server via an API to fetch details like driver info, fare, and route.

---

🔑 What is REST?

REST (Representational State Transfer) is an architectural style for designing APIs. It was introduced by Roy Fielding in 2000. A REST API is called RESTful API when it follows REST principles.

REST APIs use HTTP protocol (the same protocol used by web browsers) to communicate between a client (like a mobile app, web app) and a server (where data is stored).

---

🏗️ Key Principles of RESTful APIs

To be considered RESTful, an API must follow these rules:

1. Client-Server Architecture

   • The client (front-end) and server (back-end) are separate.

   • The client requests resources, and the server provides them.

2. Statelessness

   • Each request from the client contains all the information needed.

   • The server does not store session details between requests.

3. Uniform Interface

   • REST APIs use standard HTTP methods (GET, POST, PUT, DELETE).

   • Resources are identified using URLs (called endpoints).

4. Resource-Based

   • Everything is treated as a “resource” (like users, products, orders).

   • Each resource is represented by a unique URL.

5. Representation of Resources

   • Resources can be returned in different formats, usually JSON or XML.

6. Cacheable

   • Responses can be cached for better performance.

7. Layered System

   • REST APIs can use multiple layers (security, load balancers, proxies) without affecting the client.

---

⚙️ Common HTTP Methods in RESTful APIs

• GET → Retrieve data from the server (e.g., get user details).

• POST → Send data to the server (e.g., create a new user).

• PUT → Update existing data (e.g., update user details).

• DELETE → Remove data (e.g., delete a user).

---

📌 Example of a RESTful API

Let’s say you have an online bookstore. The RESTful API might look like this:

• GET /books → Get all books.

• GET /books/1 → Get details of book with ID=1.

• POST /books → Add a new book.

• PUT /books/1 → Update book with ID=1.

• DELETE /books/1 → Delete book with ID=1.

Response example in JSON format:

{
  "id": 1,
  "title": "Learning REST APIs",
  "author": "John Smith",
  "price": 15.99
}

---

✅ Advantages of RESTful APIs

• Scalability → Handles large numbers of requests easily.

• Flexibility → Works with multiple formats like JSON, XML, or HTML.

• Simplicity → Easy to understand and implement.

• Performance → Supports caching for faster responses.

• Wide Adoption → Most modern web services use REST.

---

❌ Limitations of RESTful APIs

• Statelessness means the client must send data with every request (sometimes repetitive).

• Over-fetching or under-fetching data can occur since endpoints return fixed data.

• Not real-time by default (though you can combine with WebSockets).

---

Conclusion

RESTful APIs are the foundation of modern web applications, enabling smooth communication between clients and servers. With their lightweight design, scalability, and flexibility, REST APIs have become the industry standard for building reliable and efficient web services.

If you are learning web development, mobile app development, or cloud computing, mastering RESTful APIs is an essential skill.