How to use Laravel as the backend for an Angular SPA app?

Question

I would like to create a website with Angular (frontend) and Laravel (backend). What is the best way to connect these two? How do they communicate? What I found while searching was more than 2 years old solutions, so I am wondering if there is a preferred way to do that now.

What I do right now: I created Model, Controller and Migration files in laravel, and in LanguagesController I call the "::all" method to get all the data from XAMPP:

public function index()
{

    return response()->json(Languages::all(), 200, ['Content-Type' => 'application/json;charset=UTF-8', 'Charset' => 'utf-8'],
    JSON_UNESCAPED_UNICODE);

}

After that I create route for it in api.php :

Route::get('/languages', "LanguagesController@index");

So now, I can call www.laravelfirsttry.com/api/languages to get all the data from Languages table.

In Angular, I did the following: Create a language-service which send a request to Laravel:

private baseUrl = 'http://www.laravelfirsttry.com/api/languages';

constructor(private http: HttpClient) { }

getLanguages() {
  return this.http.get(this.baseUrl);
}

Then in my component I call this service, and give its function's response to my variable then I just handle the view after that:

constructor(private languageService: LanguageService) { 
this.getLanguages();
}
getLanguages(): void{
this.languageService.getLanguages()
  .subscribe((res: any) => {
    this.language_tabs = res;
    console.log(res);
  }, error => {
    console.error(error);
  });
}

But the problem is that when I try it, the api call takes relatively long time to finish . I load my website, all the content is loaded, but the main component is not visible until the call is finished. I think this does not look good, and I think I did something wrong.

Summary : I created one API in laravel , then I call this API in Angular , and its quite slow. What is the best way to make an Angular application with Laravel backend?

Answer 1

First, you need HttpClientModule to the imports array of your AppModule, something like this.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Then import httpClient in your component and add it to the constructor

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

Then you can call API with code like this.

this.http.get<any>('http://www.laravelfirsttry.com/api/languages').subscribe(data => {
            console.log(data);
            // do any operations with your data.
        })

As a pre-requisite Please make sure that your backend Laravel API is working fine.