Introduction
In this tutorial, we’ll build a full-stack flight booking application using Angular for the frontend and .NET 9 for the backend. We’ll focus on clean async data flow, integrate a SQL database, and deploy the entire solution to Azure.
🧰 Prerequisites
- Node.js v18+
- Angular CLI
- .NET 9 SDK
- SQL Server (local or Azure)
- Azure account
- Visual Studio Code
🧱 Step 1: Angular Client Setup
Generate the Angular project and install Angular Material:
ng new flight-booking-client --routing --style=scss
cd flight-booking-client
ng add @angular/material
Generate components and services:
ng generate component components/side-menu
ng generate component components/flight-list
ng generate component components/flight-form
ng generate service services/flight
Use HttpClient with async/await via lastValueFrom:
// flight.service.ts
@Injectable({ providedIn: 'root' })
export class FlightService {
private apiUrl = 'https://your-api-url/api/flights';
constructor(private http: HttpClient) {}
async getFlights(): Promise<Flight[]> {
return await lastValueFrom(this.http.get<Flight[]>(this.apiUrl));
}
async bookFlight(flight: Flight): Promise<void> {
await lastValueFrom(this.http.post<void>(this.apiUrl, flight));
}
}
🧑💻 Step 2: .NET 9 Backend Setup
Create the Web API project:
dotnet new webapi -n FlightBookingApi
cd FlightBookingApi
Enable CORS in Program.cs:
builder.Services.AddCors(options =>
{
options.AddPolicy("AllowAll", policy =>
policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
});
🗃️ Step 3: Database Integration with EF Core
Install EF Core packages:
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
Create the Flight model:
public class Flight
{
public int Id { get; set; }
public string Destination { get; set; }
public DateTime DepartureTime { get; set; }
public string PassengerName { get; set; }
}
Create the FlightDbContext:
public class FlightDbContext : DbContext
{
public FlightDbContext(DbContextOptions<FlightDbContext> options) : base(options) { }
public DbSet<Flight> Flights { get; set; }
}
Register the context in Program.cs:
builder.Services.AddDbContext<FlightDbContext>(options =>
options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));
Add connection string in appsettings.json:
"ConnectionStrings": {
"DefaultConnection": "Server=localhost;Database=FlightDb;Trusted_Connection=True;"
}
Update the controller to use EF Core:
[ApiController]
[Route("api/[controller]")]
public class FlightsController : ControllerBase
{
private readonly FlightDbContext _context;
public FlightsController(FlightDbContext context)
{
_context = context;
}
[HttpGet]
public async Task<ActionResult<IEnumerable<Flight>>> GetFlights()
{
return await _context.Flights.ToListAsync();
}
[HttpPost]
public async Task<IActionResult> BookFlight([FromBody] Flight flight)
{
_context.Flights.Add(flight);
await _context.SaveChangesAsync();
return CreatedAtAction(nameof(GetFlights), new { id = flight.Id }, flight);
}
}
Run migrations:
dotnet ef migrations add InitialCreate
dotnet ef database update
☁️ Step 4: Deploy to Azure
4.1 Deploy .NET API to Azure App Service
- Create a new App Service in Azure Portal
- Set up a SQL Database and update connection string
- Publish using Visual Studio or CLI:
dotnet publish -c Release
az webapp up --name flight-api-johannes --resource-group YourResourceGroup --plan YourAppServicePlan
4.2 Deploy Angular App to Azure Static Web Apps
- Push Angular project to GitHub
- Go to Azure Portal → Create Static Web App
- Connect GitHub repo and configure build:
- App location:
/ - Output location:
dist/flight-booking-client
- App location:
Azure will auto-build and deploy your Angular app.
✅ Final Summary
We’ve built a full-stack flight booking app with:
- 🧭 Angular frontend using Material UI and async data flow
- 🧠 .NET 9 backend with EF Core and SQL Server
- ☁️ Cloud deployment to Azure App Service and Static Web Apps
Views: 12
✈️ Building a Full-Stack Flight Booking App with Angular and .NET 9
