我想和API君变得好朋友…

我简单总结了Express和Angular的开发环境搭建流程。我们要在父文件夹下创建一个命名为server的文件夹和一个名为angular的web-app文件夹。

服务器

mkdir server
cd server
npm init
npm install express
npm install -D @types/express

为了能够在保存时快速确认，我们将引入ts-node-dev。保存更改后，只需重新加载即可反映出来。

npm install typescript
npm install -D ts-node-dev

在package.json的scripts中添加dev。

  "scripts": {
    "dev": "ts-node-dev --respawn src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

我会创建tsconfig.json。

tsc --init

如果出现“tsc: command not found”的错误提示，请使用命令“npm i -g typescript”执行一次，然后再创建index.ts。

mkdir src
touch src/index.ts

源目录/索引.ts

import Express from "express";

const app = Express();
const port = 3000;

app.get('/',(req,res)=>{
    res.send('こんにちは');
});

app.listen(port,()=>{
    console.log(`Express app listening at http://localhost:${port}/`)
});

执行

npm run dev

我們將與Angular項目進行整合，
在父文件夾的根目錄下。

 ng new web-app
 cd web-app
 touch proxy.conf.json

proxy设置.json

{
    "/api":{
        "target":"http://localhost:3000"
    }
}

angular.json 可以进行重构。

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "web-app:build",
            "proxyConfig": "proxy.conf.json" //追加
          },

服务器/源码/索引.ts

我将在服务器端开发API。

app.get('/api',(req,res)=>{
    res.header('Content-Type', 'application/json; charset=utf-8');
    res.json({message:"こんにちは"});
});

app.module.ts的中文本地化翻译: 应用模块.ts

在app.module.ts中加载HttpClientModule。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我会创建一个API服务。

ng g service service/api

服务/ api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http:HttpClient) { }

  get hello$(){
    return this.http.get<Hello>('api/');
  }
}

export interface Hello{
  message:string;
}

应用组件.ts

我向服务器发送一个GET请求。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'web-app';
  hello:Observable<Hello>;


  constructor(private api:ApiService){}

  ngOnInit(){
    this.hello = this.api.hello$;
  }
}

app组件的HTML文件。

<p *ngIf="hello|async as h">{{h.message}}</p>

执行 (shí

ng serve --open

当访问localhost:4200时，我们可以在Angular的Web应用程序上看到服务器发送的消息。
请注意，在运行npm run dev时，还需要同时运行服务器端。