Node.js安装与Angular开发环境准备

一、Node.js 简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它让 JavaScript 能够在服务器端运行，打破了 JavaScript 只能在浏览器端运行的限制。Node.js 使用事件驱动、非阻塞 I/O 模型，这使得它非常适合构建高性能、可扩展的网络应用程序。

Node.js 的核心特点在于：

1. 异步 I/O：传统的 I/O 操作是阻塞的，即一个操作在执行时会暂停后续代码的执行，直到该操作完成。而 Node.js 的异步 I/O 允许在进行 I/O 操作（如读取文件、网络请求等）时，不阻塞主线程，继续执行后续代码。当 I/O 操作完成后，通过回调函数来处理结果。这大大提高了应用程序的性能和响应速度，特别适用于处理大量并发请求的场景。例如，在读取文件时：

const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
    if (err) {
        console.error(err);
        return;
    }
    console.log(data);
});
console.log('This is printed before the file read is completed');

在上述代码中，fs.readFile 是一个异步操作，在文件读取的过程中，主线程不会被阻塞，console.log('This is printed before the file read is completed') 会立即执行。当文件读取完成后，会执行回调函数中的代码。

2. 事件驱动：Node.js 基于事件驱动架构，它通过事件发射器（EventEmitter）来管理事件。应用程序可以监听各种事件，并在事件发生时执行相应的回调函数。例如，HTTP 服务器在接收到请求时会触发 request 事件，开发者可以监听这个事件来处理请求：

const http = require('http');
const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello, World!');
});
server.listen(3000, () => {
    console.log('Server running on port 3000');
});

这里 http.createServer 创建的服务器对象监听 request 事件，当有请求到达时，执行回调函数来处理请求。

3. 单线程：Node.js 采用单线程模型，这意味着在同一时间内，Node.js 应用程序只能执行一个任务。然而，由于异步 I/O 和事件驱动的特性，它能够高效地处理大量并发请求。单线程模型避免了多线程编程中的锁机制等复杂问题，使得代码编写更加简单和直观。但同时也需要注意，长时间运行的同步任务会阻塞主线程，影响应用程序的性能。

二、Node.js 的安装

（一）在 Windows 系统上安装 Node.js

1. 下载安装包
   • 打开浏览器，访问 Node.js 官方网站（https://nodejs.org/）。在官网首页，你会看到两个主要的下载版本：长期支持（LTS）版本和最新版本。LTS 版本更稳定，适合生产环境使用；最新版本则包含了最新的特性和改进，但可能存在一些不稳定因素。一般建议选择 LTS 版本。
   • 点击对应的 Windows 安装包下载链接，下载 .msi 格式的安装文件。
2. 运行安装向导
   • 双击下载好的 .msi 文件，启动安装向导。在安装向导的欢迎界面，点击“Next”按钮。
   • 阅读并接受许可协议，然后点击“Next”。
   • 选择安装路径。默认情况下，Node.js 会安装到 C:\Program Files\nodejs 目录。如果你想更改安装路径，可以点击“Change”按钮进行选择，然后点击“Next”。
   • 接下来的界面可以选择是否将 Node.js 添加到系统路径中。强烈建议勾选此选项，这样在命令行中就可以直接使用 node 和 npm 命令。点击“Next”继续。
   • 最后，点击“Install”按钮开始安装。安装完成后，点击“Finish”按钮退出安装向导。
3. 验证安装
   • 打开命令提示符（CMD）。可以通过按下 Windows 键 + R，输入“cmd”并回车来打开。
   • 在命令提示符中输入 node -v，如果安装成功，会显示 Node.js 的版本号，例如 v14.17.0。
   • 同样，输入 npm -v 可以查看 npm（Node.js 包管理器）的版本号，例如 6.14.13。这表明 Node.js 和 npm 都已成功安装并配置好环境变量。

（二）在 macOS 系统上安装 Node.js

1. 使用 Homebrew 安装
   • Homebrew 是 macOS 上常用的包管理器。如果你的系统还没有安装 Homebrew，可以在终端中运行以下命令进行安装：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装过程中可能需要输入你的系统密码。 - 安装好 Homebrew 后，在终端中运行以下命令安装 Node.js：

brew install node

Homebrew 会自动下载并安装最新的 Node.js 版本（如果有可用的更新）。安装完成后，Homebrew 会提示 Node.js 和 npm 的安装路径等相关信息。 2. 验证安装 - 打开终端。可以通过在“聚焦搜索”中输入“终端”来打开。 - 在终端中输入 node -v，如果安装成功，会显示 Node.js 的版本号。 - 输入 npm -v 查看 npm 的版本号。这表明 Node.js 和 npm 已成功安装。

（三）在 Linux 系统上安装 Node.js

1. 基于 Debian 或 Ubuntu 的系统
   • 更新系统软件包列表，在终端中运行：

sudo apt update

- 添加 Node.js 官方软件源。可以使用以下命令来添加：

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

此命令会根据你系统的架构和版本信息，自动配置适合的 Node.js 软件源。 - 安装 Node.js 和 npm：

sudo apt install -y nodejs

2. 基于 Red Hat 或 CentOS 的系统
   • 首先，安装 EPEL 仓库，它提供了许多额外的软件包。对于 CentOS 7 及以上版本，可以运行：

sudo yum install -y epel-release

- 添加 Node.js 官方软件源。运行以下命令：

curl -sL https://rpm.nodesource.com/setup_lts.x | sudo -E bash -

- 安装 Node.js 和 npm：

sudo yum install -y nodejs

3. 验证安装
   • 在 Linux 系统的终端中，输入 node -v 和 npm -v 分别验证 Node.js 和 npm 的安装情况，成功安装后会显示相应的版本号。

三、npm 基础

npm（Node Package Manager）是 Node.js 的默认包管理器，它允许开发者轻松地安装、管理和分享 JavaScript 包。npm 有以下几个主要功能：

1. 安装包：可以从 npm 注册表中下载并安装各种开源的 JavaScript 包。例如，要安装一个名为 lodash 的常用工具库，可以在命令行中运行：

npm install lodash

这会在当前项目目录下创建一个 node_modules 文件夹，并将 lodash 及其依赖项安装到该文件夹中。如果要在全局范围内安装包（即可以在任何项目中使用），可以使用 -g 选项：

npm install -g express

全局安装的包通常用于命令行工具等场景。 2. 管理依赖：在项目根目录下，npm 会生成一个 package.json 文件，用于记录项目的依赖关系。当你安装一个包时，npm 会自动更新 package.json 文件，记录包的名称和版本号。例如，安装 lodash 后，package.json 文件中会添加如下内容：

{
    "dependencies": {
        "lodash": "^4.17.21"
    }
}

^ 符号表示允许安装该包的兼容版本更新。例如，^4.17.21 表示允许安装 4.x.x 版本系列中高于 4.17.21 的版本，但不允许安装 5.x.x 版本。 3. 发布包：开发者可以将自己开发的 JavaScript 包发布到 npm 注册表，供其他开发者使用。首先需要在 npm 官网注册一个账号，然后在项目目录下运行 npm login 命令登录。登录成功后，运行 npm publish 命令即可将包发布到 npm 注册表。发布前需要确保 package.json 文件中的信息准确无误，包括包名、版本号、描述等。

四、Angular 简介

Angular 是一款由 Google 开发和维护的前端 JavaScript 框架，用于构建大型、复杂的单页应用程序（SPA）。与其他前端框架（如 React 和 Vue.js）相比，Angular 具有以下特点：

1. 全面的框架：Angular 提供了一套完整的解决方案，涵盖了组件化开发、模板引擎、依赖注入、路由、状态管理等多个方面。开发者无需整合多个不同的库来完成复杂的前端应用开发，在一个框架内即可实现各种功能。例如，在组件化开发方面，Angular 使用装饰器（@Component）来定义组件，组件之间通过输入输出属性进行通信：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.css']
})
export class ChildComponent {
    @Input() dataFromParent: string;
    @Output() sendDataToParent = new EventEmitter<string>();

    sendData() {
        this.sendDataToParent.emit('Data from child');
    }
}

在上述代码中，@Input() 装饰器定义了一个输入属性 dataFromParent，用于接收父组件传递的数据；@Output() 装饰器定义了一个输出属性 sendDataToParent，是一个 EventEmitter 对象，用于向父组件发送事件和数据。 2. 基于 TypeScript：Angular 从一开始就深度集成了 TypeScript。TypeScript 是 JavaScript 的超集，它为 JavaScript 添加了静态类型检查和其他面向对象编程的特性。这使得代码更易于维护和理解，尤其是在大型项目中。例如，在定义组件类的属性和方法时，可以明确指定类型：

import { Component } from '@angular/core';

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css']
})
export class ExampleComponent {
    name: string = 'John';
    age: number = 30;

    greet() {
        return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;
    }
}

通过指定类型，在开发过程中可以及时发现类型错误，提高代码质量。 3. 双向数据绑定：Angular 支持双向数据绑定，即模型（数据）和视图之间的自动同步。当模型数据发生变化时，视图会自动更新；反之，当用户在视图中进行操作（如输入文本、点击按钮等）导致视图数据变化时，模型也会相应更新。例如，在模板中可以这样实现双向数据绑定：

<input [(ngModel)]="name">
<p>You entered: {{name}}</p>

这里 [(ngModel)] 指令实现了双向数据绑定，输入框的值与组件类中的 name 属性相互同步。

五、Angular 开发环境准备

（一）安装 Angular CLI

Angular CLI（命令行界面）是 Angular 官方提供的一个命令行工具，用于初始化项目、生成组件、服务等各种 Angular 项目结构，以及进行项目的开发、测试和部署等操作。要安装 Angular CLI，首先确保 Node.js 和 npm 已正确安装。然后在命令行中运行以下命令：

npm install -g @angular/cli

这会在全局范围内安装最新版本的 Angular CLI。安装过程可能需要一些时间，因为它会下载和安装相关的依赖包。安装完成后，可以通过运行 ng --version 命令来验证安装情况。如果安装成功，会显示 Angular CLI 的版本号，以及相关的 Angular 核心包版本信息。

（二）创建 Angular 项目

1. 使用 Angular CLI 初始化项目
   • 打开命令行，导航到你希望创建项目的目录。例如，如果你想在 my-projects 文件夹下创建项目，可以运行：

cd my-projects

- 运行以下命令初始化一个新的 Angular 项目：

ng new my - first - app

这里 my - first - app 是项目名称，你可以根据自己的需求进行修改。运行该命令后，Angular CLI 会提示你一些配置选项，例如是否使用路由、选择 CSS 预处理器等。 - 路由配置：如果选择使用路由（一般对于单页应用是很有用的），Angular CLI 会在项目中生成路由模块，用于管理页面之间的导航。 - CSS 预处理器：可以选择 CSS、SCSS、Sass、Less 等作为 CSS 预处理器。SCSS 和 Sass 是常用的选择，它们为 CSS 提供了变量、混合（Mixin）、嵌套等功能，使样式编写更加高效和可维护。例如，选择 SCSS 后，项目中的样式文件将以 .scss 为扩展名。 2. 项目结构 - 当项目初始化完成后，会生成一个如下的项目结构：

my - first - app
├── e2e
│   ├── src
│   │   ├── app.e2e - spec.ts
│   │   ├── app.po.ts
│   │   └── protractor.conf.js
├── node_modules
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   ├── test.ts
│   └── tsconfig.app.json
├──.angular - cli.json
├──.editorconfig
├──.gitignore
├── karma.conf.js
├── package.json
├── README.md
├── tsconfig.json
└── tslint.json

- **`src/app` 目录**：包含应用的主要组件和模块。`app.component.ts` 是应用的根组件，所有其他组件通常作为它的子组件。`app.module.ts` 是应用的根模块，用于导入和声明组件、服务等。
- **`src/assets` 目录**：用于存放静态资源，如图像、字体、JSON 文件等。
- **`src/environments` 目录**：包含不同环境下的配置文件，如 `environment.ts` 用于开发环境配置，`environment.prod.ts` 用于生产环境配置。这使得在不同环境下可以方便地切换 API 地址等配置。
- **`node_modules` 目录**：存放项目的所有依赖包，这些包是通过 npm 安装的。
- **`package.json` 文件**：记录项目的依赖关系、脚本命令等信息。例如，可以在 `scripts` 字段中定义自定义的脚本命令，如 `npm run build` 用于构建项目，`npm run start` 用于启动开发服务器等。

（三）运行 Angular 项目

1. 启动开发服务器
   • 在项目根目录下，运行以下命令启动 Angular 开发服务器：

ng serve

- 开发服务器启动后，会监听 `http://localhost:4200` 地址（默认端口为 4200，也可以通过 `--port` 选项指定其他端口）。打开浏览器，访问 `http://localhost:4200`，就可以看到初始的 Angular 应用界面。
- 当你对项目中的代码（如组件的 TypeScript 文件、模板文件、样式文件等）进行修改并保存后，开发服务器会自动检测到变化，并实时重新加载页面，方便你进行开发和调试。

2. 构建项目 - 当项目开发完成，需要部署到生产环境时，需要对项目进行构建。在项目根目录下运行：

ng build --prod

- `--prod` 标志表示进行生产环境构建，这会对代码进行压缩、优化等操作，以减小文件体积，提高应用的加载速度。构建后的文件会生成在 `dist/my - first - app` 目录下（`my - first - app` 为项目名称）。这些文件可以直接部署到 Web 服务器上，如 Apache、Nginx 等。

六、常见问题及解决方法

（一）Node.js 安装问题

1. 安装后无法在命令行使用 node 和 npm 命令
   • 原因：可能是没有正确配置环境变量。在 Windows 系统上，如果安装时没有勾选将 Node.js 添加到系统路径的选项，就会出现此问题。在 macOS 和 Linux 系统上，如果使用非官方包管理器安装，也可能存在环境变量配置不正确的情况。
   • 解决方法：
     • Windows：打开“系统属性” -> “高级” -> “环境变量”。在“系统变量”中找到“Path”变量，点击“编辑”。在弹出的窗口中，点击“新建”，添加 Node.js 的安装目录（如 C:\Program Files\nodejs）和 npm 的全局模块安装目录（默认为 C:\Users\你的用户名\AppData\Roaming\npm）。然后保存设置，关闭所有命令提示符窗口，重新打开，再次尝试运行 node -v 和 npm -v 命令。
     • macOS 和 Linux：对于 macOS 上使用 Homebrew 安装的情况，确保 brew 的安装目录（通常是 /usr/local/bin）在系统路径中。如果是手动安装的 Node.js，需要将 Node.js 的安装目录（如 /usr/local/nodejs/bin）添加到 PATH 环境变量中。可以编辑 ~/.bashrc（对于 bash shell）或 ~/.zshrc（对于 zsh shell）文件，添加如下行：

export PATH=/usr/local/nodejs/bin:$PATH

保存文件后，运行 source ~/.bashrc 或 source ~/.zshrc 使配置生效。然后在终端中验证 node 和 npm 命令是否可用。

（二）Angular CLI 安装和使用问题

1. 安装 Angular CLI 时出错
   • 原因：可能是网络问题导致无法从 npm 注册表下载依赖包，也可能是 npm 版本过低不兼容。
   • 解决方法：
     • 网络问题：检查网络连接是否正常，可以尝试使用 ping 命令测试网络。如果是网络不稳定或受限，可以尝试更换网络环境，或者使用代理服务器。例如，在命令行中设置 npm 的代理：

npm config set proxy http://your - proxy - server:port
npm config set https - proxy http://your - proxy - server:port

    - **npm 版本过低**：运行 `npm install -g npm` 命令更新 npm 到最新版本，然后再次尝试安装 Angular CLI。

2. ng 命令找不到 - 原因：可能是 Angular CLI 没有正确安装，或者安装后没有配置好环境变量。 - 解决方法： - 首先，检查是否已成功安装 Angular CLI，可以运行 npm list -g --depth=0 命令查看全局安装的包列表，确认 @angular/cli 是否在列表中。如果未安装，重新安装 Angular CLI。 - 如果已安装，在 Windows 系统上，确保 C:\Users\你的用户名\AppData\Roaming\npm（Angular CLI 的全局安装目录）在系统路径中。在 macOS 和 Linux 系统上，确保 npm 的全局安装目录（通常是 /usr/local/bin）在 PATH 环境变量中。

（三）Angular 项目创建和运行问题

1. 创建项目时提示“ENOENT: no such file or directory”
   • 原因：这通常是由于 npm 在创建项目过程中下载依赖包时出现问题，可能是网络不稳定或某些依赖包无法正常下载。
   • 解决方法：
     • 首先，确保网络连接稳定。可以尝试重新运行 ng new 命令创建项目。如果问题仍然存在，可以手动删除项目目录（如果已部分创建），然后运行 npm cache clean --force 命令清除 npm 缓存，再重新创建项目。
2. 运行 ng serve 时出错
   • 原因：可能是项目依赖包安装不完整，或者项目代码存在语法错误。
   • 解决方法：
     • 依赖包问题：在项目根目录下运行 npm install 命令，重新安装项目的所有依赖包。这会根据 package.json 文件中的依赖信息，从 npm 注册表下载并安装所需的包。
     • 代码语法错误：检查项目中的 TypeScript 文件、HTML 模板文件和 CSS 样式文件是否存在语法错误。在命令行中运行 ng serve 时，错误信息会提示具体的错误位置和原因。例如，如果是 TypeScript 语法错误，会显示错误所在的文件和行号，根据提示修改代码即可。

通过以上步骤，你应该能够顺利完成 Node.js 的安装和 Angular 开发环境的准备工作，并解决可能遇到的常见问题。在实际开发过程中，还需要不断学习和掌握 Angular 的各种特性和最佳实践，以构建高质量的前端应用程序。