angular 的安装和配置教程

2025-05-11 08:36:50作者：郜逊炳

1. 项目的基础介绍和主要的编程语言

Angular 是一个由谷歌维护的开源前端框架，主要用于构建单页面应用（SPA）。它允许开发者使用 HTML 作为模板语言，并通过扩展 HTML 的语法来清晰、简洁地表达应用的组件。Angular 的主要编程语言是 TypeScript，它为 JavaScript 提供了类型系统和对 ES6 的支持，帮助开发者更好地编写和维护大型的应用。

2. 项目使用的关键技术和框架

Angular 使用了一系列的关键技术和框架来构建应用，其中包括：

TypeScript：一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，为 JavaScript 提供了静态类型检查。
MVC 架构：Angular 采用 Model-View-Controller（MVC）架构模式，帮助开发者分离应用的逻辑、数据和界面。
双向数据绑定：Angular 通过双向数据绑定让模型（Model）和视图（View）保持同步，提高了应用的开发效率。
模块化：Angular 应用的构建是基于模块的，每个模块都包含特定的功能，便于管理和复用。
路由：Angular 提供了强大的路由功能，允许开发者创建单页面应用中的不同视图和页面。

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装 Angular 之前，需要确保你的系统中已经安装了以下软件：

Node.js：Angular 的工具链依赖于 Node.js。可以从 Node.js 官网下载并安装最新版本的 Node.js。
npm：Node.js 的包管理器，用于管理项目的依赖。Node.js 安装时会自动安装 npm。

安装步骤

安装 Angular CLI

打开命令行工具，运行以下命令来全局安装 Angular CLI：
```
npm install -g @angular/cli
```
创建新的 Angular 项目

使用 Angular CLI 创建一个新的项目，运行以下命令：
```
ng new my-angular-project
```
在创建过程中，CLI 会询问一些问题，比如是否要添加 Angular 路由、哪种样式预处理器等。根据你的需求进行选择。
进入项目目录

创建项目后，使用以下命令进入项目目录：
```
cd my-angular-project
```
启动开发服务器

在项目目录中，运行以下命令来启动本地开发服务器：
```
ng serve
```
当你看到提示“Local server address: http://localhost:4200”时，表示开发服务器已经启动成功。
在浏览器中查看应用

打开浏览器，输入地址 http://localhost:4200，你应该能看到你的 Angular 应用的欢迎页面。