Angular 快速入门指南

欢迎来到 Angular 快速入门指南！在这里，我们将带你了解 Angular 的基础知识，并帮助你开始你的 Angular 之旅。

安装 Angular CLI

首先，你需要安装 Angular CLI，它是用于初始化、开发、测试、打包 Angular 应用的官方工具。

npm install -g @angular/cli

创建你的第一个 Angular 应用

安装完 Angular CLI 后，你可以使用以下命令创建一个新的 Angular 应用：

ng new my-app

这将创建一个名为 my-app 的新目录，其中包含一个基本的 Angular 应用。

项目结构

以下是一个典型的 Angular 项目的结构：

my-app/
├── e2e/        # 端到端测试
├── node_modules/ # 依赖项
├── src/        # 源代码
│   ├── assets/ # 静态文件
│   ├── environments/ # 环境配置
│   ├── index.html # 主 HTML 文件
│   ├── main.ts # 主 TypeScript 文件
│   ├── styles.css # 全局样式
│   ├── app/      # 应用模块
│   │   ├── app.module.ts # 应用模块
│   │   ├── app.component.ts # 应用组件
│   │   ├── app.component.html # 应用组件模板
│   │   ├── app.component.css # 应用组件样式
│   │   └── app.routing.ts # 应用路由
│   └── ...
├── .angular-cli.json # Angular CLI 配置文件
├── package.json # 项目包配置文件
└── ...

快速开始

创建组件

在 Angular 中，组件是构成应用的基本单元。你可以使用以下命令创建一个新的组件：

ng generate component my-component

这将创建一个名为 my-component 的新组件，并在 src/app/app.component.html 中自动添加对它的引用。

运行应用

在命令行中，进入 my-app 目录，并运行以下命令来启动开发服务器：

ng serve

默认情况下，应用将在 http://localhost:4200/ 上运行。

修改组件

现在，你可以打开 src/app/my-component/my-component.component.html 文件，并开始编写你的组件模板。

<h1>我的组件</h1>
<p>这是一个示例组件。</p>

保存并刷新

保存你的文件，浏览器会自动刷新，并显示你的新组件。

扩展阅读

想要了解更多关于 Angular 的信息，请访问我们的 Angular 官方文档。