【Angular】创建一个Angular项目

最新推荐文章于 2025-04-27 14:04:07 发布

cangloe

最新推荐文章于 2025-04-27 14:04:07 发布

阅读量1.8k

点赞数 8

分类专栏： angular 文章标签： angular.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/u013675821/article/details/144071909

版权

angular 专栏收录该内容

14 篇文章

订阅专栏

创建一个 Angular 项目通常是使用 Angular 的 CLI（命令行界面）工具来完成的。Angular CLI 提供了一个快速而简便的方式来初始化和管理 Angular 应用程序。以下是创建 Angular 项目的步骤：

1. 安装 Node.js 和 Angular CLI

确保你已经安装了 Node.js 和 npm。如果尚未安装，可以通过 Node.js 官网下载安装。

安装完成后，你可以使用以下命令检查安装是否成功：

node -v
npm -v

接下来，通过 npm 安装 Angular CLI：

npm install -g @angular/cli

2. 创建一个新的 Angular 项目

创建一个新的 Angular 项目，使用以下命令：

ng new my-angular-app

命令说明：

my-angular-app 是你项目的名称，你可以根据需要替换为你喜欢的名称。

在创建项目时，Angular CLI 会提示你配置一些选项，如：

是否添加 Angular 路由（选择 Yes 或 No）
选择样式格式（如 CSS、SCSS、Sass 等）

选择配置后，Angular CLI 会自动创建项目结构并安装相关依赖。

3. 进入项目目录

cd my-angular-app

4. 启动开发服务器

你可以启动 Angular 开发服务器并查看应用：

ng serve

默认情况下，应用将运行在 http://localhost:4200。你可以在浏览器中访问此地址查看运行中的应用。

5. 项目目录结构说明

创建的 Angular 项目目录结构如下：

my-angular-app/
│
├── e2e/                       # 端到端（e2e）测试目录
│   ├── src/                   # e2e 测试代码目录
│   ├── protractor.conf.js     # e2e 测试配置
│   └── tsconfig.json          # TypeScript 配置文件
│
├── node_modules/              # npm 安装的所有依赖包
│
├── src/                       # 源代码目录
│   ├── app/                   # 应用的主要代码目录
│   │   ├── app.component.ts   # 根组件 TypeScript 文件
│   │   ├── app.component.html # 根组件 HTML 模板文件
│   │   ├── app.component.css  # 根组件 CSS 文件
│   │   ├── app.module.ts      # 根模块文件，配置应用的根模块
│   │   └── ...                # 其他组件、服务等
│   │
│   ├── assets/                # 静态资源（如图片、字体等）
│   ├── environments/          # 环境配置（如开发环境和生产环境）
│   │   ├── environment.ts     # 开发环境配置
│   │   └── environment.prod.ts # 生产环境配置
│   ├── index.html             # 入口 HTML 文件
│   ├── main.ts                # 应用的入口文件，启动 Angular 应用
│   ├── styles.css             # 全局样式文件
│   └── polyfills.ts           # 兼容性支持文件
│
├── angular.json               # Angular 项目的配置文件
├── package.json               # npm 包配置文件，包含项目的依赖和脚本
├── tsconfig.json              # TypeScript 配置文件
├── tslint.json                # TypeScript 代码规范配置文件
└── .editorconfig              # 编辑器配置文件，帮助统一团队开发环境

目录结构详细说明

e2e/：用于存放端到端测试的代码。通常包含 Protractor 配置文件和测试代码。Angular CLI 会自动创建基本的端到端测试框架。
node_modules/：存放项目所有的 npm 依赖包。此文件夹由 npm 自动生成，通常不需要手动修改。
src/：这是你编写 Angular 应用代码的地方。
- app/
  
  ：这个目录是应用的核心，包含了应用的所有组件、服务和模块等。
  - app.component.ts：根组件的 TypeScript 代码，负责控制该组件的业务逻辑。
  - app.component.html：根组件的 HTML 模板。
  - app.component.css：根组件的 CSS 样式。
  - app.module.ts：根模块，配置和引导 Angular 应用。这里是引入所有应用模块和组件的地方。
- assets/：存放静态资源，如图片、字体等。
- environments/
  
  ：存放不同环境下的配置文件。Angular 会根据构建目标（开发或生产）来加载不同的环境配置。
  - environment.ts：开发环境配置。
  - environment.prod.ts：生产环境配置。
- index.html：应用的 HTML 入口文件。
- main.ts：应用的入口文件，启动 Angular 应用并引导根模块。
- styles.css：全局 CSS 样式文件，定义应用的通用样式。
- polyfills.ts：用来支持旧版本浏览器的兼容性脚本。
angular.json：Angular 项目的配置文件，定义了项目结构、构建设置、开发服务器配置等。
package.json：npm 包管理配置文件，列出了项目的依赖、开发依赖以及脚本命令。
tsconfig.json：TypeScript 配置文件，指定了 TypeScript 编译的选项和文件。
tslint.json：用于 TypeScript 代码规范的配置文件，帮助保持代码风格一致。
.editorconfig：统一团队开发时的代码风格配置文件。