Angular 快速入门指南

欢迎来到 Angular 快速入门指南！以下是一些基础教程，帮助您快速上手 Angular。

安装 Angular CLI

首先，您需要安装 Angular CLI，这是一个用于启动、构建和测试 Angular 应用的命令行界面。

npm install -g @angular/cli

创建新的 Angular 项目

安装完成后，您可以使用以下命令创建一个新的 Angular 项目：

ng new my-angular-app

这将创建一个新的 Angular 应用，名为 my-angular-app。

了解 Angular 架构

Angular 使用组件化架构，每个组件都包含 HTML、CSS 和 TypeScript 代码。

组件结构

my-angular-app/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   └── my-component/
│   │   │       ├── my-component.component.html
│   │   │       ├── my-component.component.css
│   │   │       └── my-component.component.ts
│   │   ├── app.module.ts
│   │   ├── app.routing.ts
│   │   └── app.component.ts
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   └── main.ts
├── e2e/
├── node_modules/
├── package.json
├── package-lock.json
└── tsconfig.json

创建组件

要创建一个新的组件，请使用以下命令：

ng generate component my-component

这将在 src/app/components 目录下创建一个新的组件。

组件交互

组件之间可以通过事件进行交互。以下是一个简单的示例：

// my-component.component.ts

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  message = 'Hello, Angular!';

  showMessage() {
    alert(this.message);
  }
}

<!-- my-component.component.html -->

<button (click)="showMessage()">显示消息</button>

深入学习

要深入了解 Angular，您可以访问以下链接：

• Angular 官方文档
• Angular CLI 官方文档

希望这份指南能帮助您快速上手 Angular！🎉