如何从 Angular 发送 2 个数字，使用 Node 添加它们.js并在 Angular 中显示结果?(只有那些2.

Question

我是Angular和Node.js的新手。我知道这一定非常简单，但是我很难通过一些示例代码找到答案，只需在google中搜索它(使用Angular与Node.js(，并发现此解决方案仅使用Angular或仅使用Node.js完成。我试图理解Angular和Node.js是如何协同工作的。在YouTube中，我找到了制作MEAN应用程序的教程(最终使用MongoDB进行了CRUD(，但就我而言，我不想使用带有Node.js的普通Angular数据库。

为了简单起见，我想要 2 个文本框，在 Angular 中带有一个按钮，将 2 个数字发送到 Node.js并将它们添加到 Node.js 中。然后我希望答案从 Node.js 发送回 Angular，并显示在 Angular 的另一个文本框中。

我将如何实现这一目标？可以给我一些代码来理解吗？(我正在尝试做一些与我所要求的完全不同的事情，但它将帮助我理解和理解 Angular 如何与 Node.js

( 一起工作(

Answer 1

首先，我们使用node编写一个简单的http服务器：

const http  = require('http');
const httpServer = http.createServer(requestHandler);
httpServer.listen(3000, () => {
console.log('Node.JS server is listening on port 3000')
});
function requestHandler(request, response){
console.log(`Request came: ${request.url}`);
if(request.url.startsWith('/add/')){
try{
let parts = request.url.substring(5).split('/')
let result = Number(parts[0]) + Number(parts[1])
response.writeHead(200, {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'});
response.write(result.toString());
response.end();
console.log(`Response: 200 ${request.url}`);
return;
}catch(e){
console.log(e);
}
}
response.writeHead(400);
response.write(`bad request '${request.url}' is not valid. example url: /add/5/7`);
response.end();
console.log("Response: 404 ${request.url}");
}

将上面的代码保存为server.js并使用node server.js运行它

然后使用ng new node-ng-test创建一个角度项目

像这样编辑app.component.html：

<input type="number" #firstNumber>
<input type="number" #secondNumber>
<button (click)="callAddApi(firstNumber.value, secondNumber.value)">Add</button>
<p *ngIf="result"> {{firstNumber.value}} + {{secondNumber.value}} = {{result}}</p>

同时更改app.component.ts如下：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
result = undefined;
constructor(private http: HttpClient) { }
callAddApi(firstNumber, secondsNumber) {
this.http.get<any>(`http://localhost:3000/add/${firstNumber}/${secondsNumber}`)
.subscribe(r => this.result = r, e => console.log(e));
}
}

不要忘记导入HttpClientModuleapp.module.ts

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

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

最后，使用ng serve --open运行角度应用程序并尝试一下！