Javascript 如何使用Laravel作为Angular SPA应用程序的后端？

我想创建一个网站与角度（前端）和Laravel（后端）。 连接这两者的最佳方式是什么？他们如何沟通？ 我在搜索时发现的是2年多以前的解决方案，所以我想知道现在是否有更好的方法

我现在做什么： 我用laravel创建了模型、控制器和迁移文件，并用语言Controller调用“：：all”方法从XAMPP获取所有数据：

public function index()
{

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

}

之后，我在api.php中为其创建路由：

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

现在，我可以调用www.laravelfirsttry.com/api/languages从languages表中获取所有数据

在Angular中，我做了以下操作： 创建一个语言服务，向Laravel发送请求：

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

constructor(private http: HttpClient) { }

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

然后在我的组件中调用此服务，并给出其函数对我的变量的响应，然后我只处理视图：

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);
  });
}

但问题是，当我尝试它时，api调用需要相对较长的时间才能完成。我加载了我的网站，所有的内容都被加载了，但是在调用完成之前，主要的组件是不可见的。我觉得这看起来不太好，我觉得我做错了什么

---

摘要：我在laravel中创建了一个API，然后在Angular中调用此API，速度非常慢。使用Laravel后端制作Angular应用程序的最佳方法是什么？

首先，您需要将HttpClientModule添加到AppModule的导入阵列中， 像这样的

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 { }

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

然后在组件中导入httpClient并将其添加到构造函数中

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

然后您可以用这样的代码调用API

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 { }

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

this.http.get（'http://www.laravelfirsttry.com/api/languages）。订阅（数据=>{
控制台日志（数据）；
//对数据执行任何操作。
})

作为先决条件，请确保您的后端Laravel API工作正常