Best practices for connecting Angular 19 frontend with Laravel API

Integrating Angular 19 with a Laravel API is a powerful way to build a scalable and modern web application. Angular serves as a dynamic frontend framework, while Laravel provides a robust backend with an elegant API structure. In this guide, we’ll go through the best practices for securely and efficiently connecting Angular with a Laravel backend, ensuring smooth communication between both frameworks.

Step 1: Setting Up Laravel API

Create a Laravel project (if not already set up)

composer create-project --prefer-dist laravel/laravel backend

2. Set up Laravel CORS for Angular
Install the CORS package:

composer require fruitcake/laravel-cors

Then, enable CORS in app/Http/Middleware/VerifyCsrfToken.php:

protected $except = [
    '*'
];

Create API routes in Laravel
Add this to routes/api.php:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/message', function () {
    return response()->json(['message' => 'Hello from Laravel API']);
});

Run the Laravel server

php artisan serve --host=127.0.0.1 --port=8000

Step 2: Setting Up Angular 19 Frontend

Create an Angular project

ng new frontend
cd frontend

2. Install HttpClientModule (if not installed)

npm install @angular/common

3. Import HttpClientModule in app.module.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule]
})
export class AppModule { }

Step 3: Connecting Angular to Laravel API

Generate an Angular service

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ message }}</h1>`
})
export class AppComponent implements OnInit {
  message: string = '';

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.getMessage().subscribe((data: any) => {
      this.message = data.message;
    });
  }
}

Modify api.service.ts to fetch data from Laravel API

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'http://127.0.0.1:8000/api';

  constructor(private http: HttpClient) { }

  getMessage(): Observable<any> {
    return this.http.get(`${this.apiUrl}/message`);
  }
}

Use the service in a component (app.component.ts)

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ message }}</h1>`
})
export class AppComponent implements OnInit {
  message: string = '';

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.getMessage().subscribe((data: any) => {
      this.message = data.message;
    });
  }
}

Step 4: Handling CORS and Authentication

Enable CORS in Laravel (config/cors.php)

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_headers' => ['*'],
];

Use Laravel Sanctum for secure authentication
Install Laravel Sanctum:

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

Then, update the middleware in app/Http/Kernel.php:

protected $middlewareGroups = [
    'api' => [
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
    ],
];

Step 5: Running and Testing the Application

Start the Laravel backend

php artisan serve

Start the Angular frontend

ng serve --open

Verify data is fetched from Laravel API
- Visit http://localhost:4200, and you should see "Hello from Laravel API" displayed in the browser.

Conclusion

By following these best practices, you can seamlessly integrate Angular 19 with a Laravel API for full-stack development. Using CORS handling, Laravel Sanctum for authentication, and structured service-based API calls, your application will be more secure, efficient, and scalable. Now, you can extend this by adding database connections, JWT authentication, and real-time features to enhance your project. 🚀