Node.js安装与Angular环境搭建

Node.js 简介

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。它允许开发人员在服务器端使用 JavaScript 编写高性能、可扩展的网络应用程序。Node.js 采用了事件驱动、非阻塞 I/O 模型，这使得它非常适合构建处理大量并发请求的应用，比如实时 Web 应用（如聊天应用、在线游戏）和微服务架构。

为什么选择 Node.js 与 Angular 搭配

Angular 是一款强大的前端框架，主要用于构建单页应用程序（SPA）。而 Node.js 则可以作为后端服务器，与 Angular 配合，实现完整的前后端分离架构。Node.js 可以处理 API 路由、数据库交互等任务，与 Angular 在前端的视图渲染和用户交互功能相辅相成。这种搭配不仅能提高开发效率，还能利用 JavaScript 作为统一的编程语言，降低前后端开发的技术壁垒。

Node.js 的安装

Windows 系统下安装 Node.js

1. 下载安装包：
   • 打开浏览器，访问 Node.js 官方网站（https://nodejs.org/）。在首页可以看到两个主要的版本分支，长期支持（LTS）版本和最新版本。对于大多数生产环境，建议下载 LTS 版本，因为它更稳定，经过了更多的测试。
   • 点击适合 Windows 系统的安装包进行下载，通常是.msi 格式的文件。
2. 运行安装向导：
   • 双击下载的.msi 文件，启动安装向导。在欢迎界面，点击“Next”继续。
   • 阅读并接受许可协议，再次点击“Next”。
   • 选择安装路径。默认情况下，Node.js 会安装到“C:\Program Files\nodejs\”目录。如果需要更改路径，可以点击“Change”按钮选择自定义路径，然后点击“Next”。
   • 选择要安装的组件。通常保持默认选项即可，这些选项包括 Node.js 运行时环境、npm（Node Package Manager）等重要工具。点击“Next”。
   • 安装程序会显示准备安装的信息，确认无误后点击“Install”开始安装。
   • 安装完成后，点击“Finish”退出安装向导。
3. 验证安装：
   • 打开命令提示符（CMD）。可以通过在开始菜单中搜索“命令提示符”来找到它。
   • 在命令提示符中输入node -v，如果安装成功，会显示 Node.js 的版本号，例如v14.17.0。
   • 同样，输入npm -v可以查看 npm 的版本号，例如6.14.13。这表明 Node.js 和 npm 都已成功安装到系统中。

macOS 系统下安装 Node.js

1. 使用 Homebrew 安装（推荐）：
   • 如果你的系统还没有安装 Homebrew，首先需要安装它。打开终端，运行以下命令：

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

   • 安装完 Homebrew 后，在终端中运行以下命令安装 Node.js：

   brew install node
   

   • Homebrew 会自动下载并安装最新的 Node.js LTS 版本。安装完成后，它会提示安装成功的信息。
2. 使用官方安装包安装：
   • 访问 Node.js 官方网站（https://nodejs.org/），下载适合 macOS 的.pkg 安装包。
   • 双击下载的.pkg 文件，启动安装向导。按照向导提示，一步一步完成安装，包括接受许可协议、选择安装路径等操作。默认安装路径为“/usr/local/bin”。
3. 验证安装：
   • 打开终端，输入node -v和npm -v，分别验证 Node.js 和 npm 是否安装成功。如果成功，会显示相应的版本号。

Linux 系统下安装 Node.js

1. 基于 Debian 或 Ubuntu 的系统：
   • 打开终端，首先更新系统软件包列表：

   sudo apt update
   

   • 然后添加 Node.js 官方仓库到系统源列表。对于 Ubuntu 20.04 及以上版本，可以使用以下命令：

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

   • 上述命令会下载并执行一个脚本，该脚本会自动配置 Node.js 的官方仓库。接下来，安装 Node.js 和 npm：

   sudo apt install -y nodejs
   

2. 基于 Fedora 的系统：
   • 打开终端，更新系统软件包：

   sudo dnf update
   

   • 安装 Node.js 和 npm：

   sudo dnf install nodejs
   

3. 验证安装：
   • 在终端中输入node -v和npm -v，如果安装成功，会显示对应的版本号。

npm 基础

npm（Node Package Manager）是 Node.js 的默认包管理器。它是一个命令行工具，用于安装、管理和分享 Node.js 包。npm 有两个主要功能：

1. 包安装：可以从 npm 注册表下载并安装包到项目目录中。例如，要安装一个名为lodash的流行 JavaScript 实用工具库，可以在项目目录的命令行中运行：

   npm install lodash
   

   这会在项目的node_modules目录下安装lodash及其所有依赖项。
2. 项目依赖管理：npm 使用package.json文件来记录项目的依赖关系。当在项目目录中运行npm install时，npm 会读取package.json文件，并安装其中列出的所有依赖包。package.json文件还可以包含其他元数据，如项目名称、版本、作者等信息。例如，一个简单的package.json文件可能如下：

   {
     "name": "my - project",
     "version": "1.0.0",
     "description": "A sample Node.js project",
     "main": "index.js",
     "dependencies": {
       "lodash": "^4.17.21"
     },
     "scripts": {
       "start": "node index.js"
     },
     "author": "Your Name",
     "license": "MIT"
   }
   

   在这个文件中，dependencies字段列出了项目的依赖包，scripts字段定义了一些可执行的脚本命令。例如，运行npm start会执行node index.js命令。

Angular CLI 简介

Angular CLI（命令行界面）是一个基于 Node.js 的工具，用于初始化、开发、构建和维护 Angular 应用程序。它提供了一系列的命令，大大简化了 Angular 开发流程。例如，使用 Angular CLI 可以快速创建一个新的 Angular 项目，生成组件、服务、模块等各种 Angular 应用的基本构建块。

安装 Angular CLI

1. 确保 Node.js 和 npm 已安装：
   • 在安装 Angular CLI 之前，首先要确保 Node.js 和 npm 已经正确安装并在系统路径中可用。可以通过运行node -v和npm -v命令来验证。
2. 全局安装 Angular CLI：
   • 打开命令行工具（如 Windows 下的 CMD 或 PowerShell，macOS 和 Linux 下的终端）。
   • 运行以下命令全局安装 Angular CLI：

   npm install -g @angular/cli
   

   • -g参数表示全局安装，这样在系统的任何目录下都可以使用ng命令（Angular CLI 的命令前缀）。安装过程可能需要一些时间，因为它会下载并安装 Angular CLI 及其所有依赖项。
3. 验证安装：
   • 安装完成后，在命令行中运行ng --version。如果安装成功，会显示 Angular CLI 的版本号，以及相关的 Angular 核心和 CLI 包的版本信息。例如：

   Angular CLI: 12.2.10
   Node: 14.17.0
   Package Manager: npm 6.14.13
   OS: win32 x64
   ……
   

创建第一个 Angular 项目

1. 使用 Angular CLI 创建项目：
   • 打开命令行工具，导航到你希望创建项目的目录。例如，要在D:\projects目录下创建项目，可以在 Windows 命令提示符中运行：

   cd D:\projects
   

   • 在 macOS 或 Linux 终端中运行：

   cd /Users/yourusername/projects
   

   • 运行以下命令创建一个新的 Angular 项目，假设项目名为my - first - angular - app：

   ng new my - first - angular - app
   

   • Angular CLI 会询问一些配置问题，例如是否使用 Angular 路由（用于处理页面导航）、选择 CSS 预处理器（如 Sass、Less 等）。如果不确定，可以按回车键接受默认选项。
   • 创建过程中，Angular CLI 会下载项目所需的各种依赖包，这可能需要一些时间，取决于网络速度。
2. 项目结构：
   • 创建完成后，进入项目目录：

   cd my - first - angular - app
   

   • 项目目录结构如下：
     • src：这是项目的源代码目录，包含了应用的主要代码。
       • app：这个目录包含了 Angular 应用的组件、模块、服务等核心代码。例如，app.component.ts是应用的根组件，app.module.ts是应用的根模块。
       • assets：用于存放静态资源，如图像、字体等。
       • environments：包含不同环境（如开发、生产）的配置文件。
     • e2e：用于端到端（End - to - End）测试的代码。
     • node_modules：这个目录包含了项目所有的依赖包，由 npm 安装。
     • .angular.json：这是 Angular 项目的配置文件，包含了项目的构建、测试、部署等各种配置选项。
     • package.json：记录了项目的依赖关系和一些脚本命令。
3. 运行项目：
   • 在项目目录的命令行中运行以下命令启动开发服务器：

   ng serve
   

   • 开发服务器启动后，会自动打开浏览器并导航到http://localhost:4200/，显示默认的 Angular 应用页面。如果浏览器没有自动打开，可以手动在浏览器中输入该地址。在开发过程中，每次修改源代码并保存后，开发服务器会自动检测到变化并重新加载页面，方便实时查看代码修改的效果。

Angular 项目中的模块

1. 模块的概念：
   • 在 Angular 中，模块是一个组织代码的机制。它将相关的组件、服务、指令等代码块组合在一起，形成一个可管理的单元。每个 Angular 应用至少有一个根模块（通常是AppModule），也可以有多个特性模块来进一步组织代码。例如，一个电商应用可能有ProductModule用于管理产品相关的组件和服务，CartModule用于购物车功能等。
2. 创建模块：
   • 使用 Angular CLI 可以方便地创建模块。在项目目录的命令行中运行以下命令创建一个名为feature - module的模块：

   ng generate module feature - module
   

   • 这会在src/app目录下创建一个feature - module目录，并生成feature - module.module.ts文件。该文件的内容如下：

   import { NgModule } from '@angular/core';
   
   @NgModule({
     declarations: [],
     imports: [],
     exports: []
   })
   export class FeatureModule {}
   

   • 在这个模块定义中：
     • declarations数组用于列出该模块中定义的组件、指令和管道。
     • imports数组用于导入该模块需要依赖的其他模块，例如CommonModule（提供一些常用的指令，如ngIf、ngFor）或自定义模块。
     • exports数组用于列出哪些组件、指令或管道可以被其他模块使用。如果一个模块定义了一个组件，并且希望其他模块能够使用这个组件，就需要将该组件添加到exports数组中。

Angular 项目中的组件

1. 组件的概念：
   • 组件是 Angular 应用的基本构建块，它负责处理应用的视图和相关逻辑。每个组件都有一个模板（定义视图的 HTML 代码）、一个类（包含视图逻辑的 TypeScript 代码）和一个样式文件（用于定义组件的样式，如 CSS、Sass 等）。例如，一个按钮组件可能有一个按钮的 HTML 模板，以及处理按钮点击事件的 TypeScript 逻辑。
2. 创建组件：
   • 使用 Angular CLI 创建组件非常简单。在项目目录的命令行中运行以下命令创建一个名为hello - world的组件，并且指定该组件属于feature - module模块：

   ng generate component hello - world --module=feature - module
   

   • 这会在src/app/feature - module目录下创建一个hello - world目录，并生成以下文件：
     • hello - world.component.ts：组件的 TypeScript 类文件，内容如下：

     import { Component } from '@angular/core';
     
     @Component({
       selector: 'app - hello - world',
       templateUrl: './hello - world.component.html',
       styleUrls: ['./hello - world.component.css']
     })
     export class HelloWorldComponent {
       constructor() {}
     }
     

     • 在这个组件类中，@Component装饰器定义了组件的元数据。selector是组件在 HTML 模板中使用的标签名，templateUrl指定了组件的模板文件路径，styleUrls指定了组件的样式文件路径。
     • hello - world.component.html：组件的模板文件，初始内容可能为空，我们可以添加一些 HTML 代码，例如：

     <h1>Hello, World!</h1>
     

     • hello - world.component.css：组件的样式文件，可以在这里定义组件的样式，例如：

     h1 {
       color: blue;
     }
     

3. 使用组件：
   • 要在应用中使用hello - world组件，需要先将FeatureModule导入到AppModule中。在src/app/app.module.ts文件中，添加以下导入语句：

   import { FeatureModule } from './feature - module/feature - module.module';
   

   • 然后将FeatureModule添加到AppModule的imports数组中：

   @NgModule({
     imports: [
       // 其他导入
       FeatureModule
     ],
     // 其他模块配置
   })
   export class AppModule {}
   

   • 最后，在app.component.html模板文件中使用hello - world组件：

   <app - hello - world></app - hello - world>
   

   • 运行ng serve启动开发服务器，浏览器中会显示“Hello, World!”，并且文字颜色为蓝色，这是因为我们在组件样式中定义了h1标签的颜色。

服务在 Angular 项目中的应用

1. 服务的概念：
   • 服务是一个在 Angular 应用中用于处理特定任务的类，它提供了一种将业务逻辑从组件中分离出来的方式，使组件更加专注于视图呈现。例如，数据获取、日志记录、用户认证等功能都可以封装在服务中。这样可以提高代码的可维护性和可复用性。
2. 创建服务：
   • 使用 Angular CLI 创建一个名为data - service的服务，在项目目录的命令行中运行：

   ng generate service data - service
   

   • 这会在src/app目录下生成data - service.service.ts文件，内容如下：

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     constructor() {}
   }
   

   • @Injectable装饰器标记这个类为一个可注入的服务。providedIn: 'root'表示这个服务在应用的根模块中提供，意味着整个应用都可以使用这个服务。
3. 在组件中使用服务：
   • 假设data - service服务用于获取一些数据，我们在hello - world组件中使用它。首先在hello - world.component.ts文件中导入DataService：

   import { Component } from '@angular/core';
   import { DataService } from '../data - service.service';
   
   @Component({
     selector: 'app - hello - world',
     templateUrl: './hello - world.component.html',
     styleUrls: ['./hello - world.component.css']
   })
   export class HelloWorldComponent {
     data: any;
     constructor(private dataService: DataService) {}
   
     ngOnInit() {
       this.data = this.dataService.getData();
     }
   }
   

   • 在这个组件类中，我们在构造函数中注入了DataService，并在ngOnInit生命周期钩子函数中调用dataService的getData方法获取数据。这里假设DataService中有一个getData方法，实际应用中需要在data - service.service.ts文件中实现该方法，例如：

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     constructor() {}
   
     getData() {
       return { message: 'This is some data from the service' };
     }
   }
   

   • 然后在hello - world.component.html模板文件中显示数据：

   <h1>{{data.message}}</h1>
   

   • 运行ng serve，浏览器中会显示“This is some data from the service”，展示了从服务获取的数据。

总结 Angular 环境搭建与基础应用

通过上述步骤，我们完成了 Node.js 的安装、npm 的基本使用、Angular CLI 的安装以及 Angular 项目的创建、模块、组件和服务的基本操作。这为进一步深入学习和开发 Angular 应用奠定了坚实的基础。在实际开发中，还会涉及到更多的 Angular 特性，如路由、表单处理、HTTP 请求等，这些都是构建复杂 Angular 应用必不可少的部分。同时，要熟练掌握 Node.js 和 npm 的更多高级用法，以便更好地管理项目依赖和进行项目部署等操作。在开发过程中，遇到问题时可以查阅 Angular 和 Node.js 的官方文档，社区也提供了丰富的资源和解决方案，帮助开发者不断提升开发技能和解决实际问题的能力。