在现代 web 开发中，Node.js 和 Angular 是两个非常流行的技术栈。Node.js 作为后端环境，提供了强大的服务器端支持，而 Angular 则是一个功能强大的前端框架。本文将指导您如何搭建 Node 与 Angular 的开发环境。
1. 安装 Node.js
首先，您需要在您的计算机上安装 Node.js。请访问 Node.js 官网 下载适合您操作系统的安装包，并按照提示完成安装。
安装完成后，您可以通过以下命令验证 Node.js 和 npm（Node 包管理器）是否安装成功：
node -v
npm -v
2. 安装 Angular CLI
Angular CLI 是 Angular 的命令行工具，可以帮助您快速创建和管理 Angular 项目。在终端中运行以下命令安装 Angular CLI：
npm install -g @angular/cli
安装完成后，您可以通过以下命令验证 Angular CLI 是否安装成功：
ng version
3. 创建 Angular 项目
使用 Angular CLI 创建一个新的 Angular 项目。在终端中运行以下命令：
ng new my-angular-app
根据提示选择配置选项，CLI 将自动为您创建一个新的 Angular 项目。
4. 启动 Angular 开发服务器
进入项目目录并启动开发服务器：
cd my-angular-app
ng serve
打开浏览器并访问 http://localhost:4200，您将看到 Angular 应用的欢迎页面。
5. 创建 Node.js 服务器
在项目根目录下创建一个新的文件夹，用于存放 Node.js 服务器代码：
mkdir server
cd server
在 server 文件夹中创建一个 server.js 文件，并添加以下代码：
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello from Node.js server!');
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
6. 安装 Express.js
在 server 文件夹中，使用 npm 安装 Express.js：
npm init -y
npm install express
7. 启动 Node.js 服务器
在终端中运行以下命令启动 Node.js 服务器：
node server.js
打开浏览器并访问 http://localhost:3000，您将看到来自 Node.js 服务器的消息。
8. 连接 Angular 与 Node.js
您可以通过 Angular 的 HTTP 客户端与 Node.js 服务器进行交互。在 Angular 项目中，您可以创建一个服务来处理 HTTP 请求。
首先，安装 Angular 的 HTTP 客户端模块：
ng generate service api
在生成的 api.service.ts 文件中，添加以下代码：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private apiUrl = 'http://localhost:3000';
constructor(private http: HttpClient) { }
getMessage(): Observable<string> {
return this.http.get<string>(`${this.apiUrl}/`);
}
}
9. 使用服务
在 Angular 组件中，您可以使用 ApiService 来获取 Node.js 服务器的数据。确保在组件中导入并注入 ApiService。
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-root',
template: `<h1>{{ message }}</h1>`,
})
export class AppComponent implements OnInit {
message: string;
constructor(private apiService: ApiService) {}
ngOnInit() {
this.apiService.getMessage().subscribe(data => {
this.message = data;
});
}
}
结论
通过以上步骤，您已经成功搭建了 Node 与 Angular 的开发环境。您可以在此基础上进行更复杂的应用开发，充分利用这两个强大的技术栈。希望这篇指南对您有所帮助！