如何使我的前端和后端在Angular中彼此通信？

Question

我是Web开发的新手，我想知道如何使前端角度项目与后端角度项目进行通信。我有两个单独的Angular文件，我的前端只有html代码和一些javascript。我的后端提供服务，并负责SQL。我想知道如何使它们彼此通信，我想将用户输入发送到后端。我还希望后端将信息发送到前端进行显示。

Answer 1

如果我正确理解了您的问题，那么您想在angular应用中通过后端发送和接收数据。

获取角度数据：

1. 创建服务。

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

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

1. 创建函数以获取服务中的数据

getConfig() {
  return this.http.get(this.configUrl);
}

1. 在组件内部调用函数

showConfig() {
  this.configService.getConfig()
    .subscribe((data: Config) => this.config = {
        heroesUrl: data['heroesUrl'],
        textfile:  data['textfile']
    });
}

将数据发送到服务器

1. 添加标题

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

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

1. 发出POST请求

addHero (hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

1. 在表单提交或在组件内部单击时调用服务发布方法

this.heroesService
  .addHero(newHero)
  .subscribe(hero => this.heroes.push(hero));

有关更多详细信息，请阅读有角度的HttpClient指南。