时间戳

首页 > 解决方案 > 如何使用 Laravel 作为 Angular SPA 应用程序的后端？

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

问题描述

我想用 Angular（前端）和 Laravel（后端）创建一个网站。连接这两者的最佳方式是什么？他们如何沟通？我在搜索时发现的是超过 2 年的解决方案，所以我想知道现在是否有首选的方法来做到这一点。

我现在做什么： 我在 laravel 中创建了模型、控制器和迁移文件，在LanguagesController中我调用“::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 应用程序的最佳方法是什么？

标签： javascriptphpangularlaravelapi

解决方案

首先，您需要 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 { }

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

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

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

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

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

推荐阅读