Angular TypeScript 入门教程

Angular 是一个流行的前端框架，结合了 TypeScript 可以提供强大的开发体验。以下是一些关于 Angular 和 TypeScript 的基础教程，帮助你快速上手。

安装 Angular CLI

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

npm install -g @angular/cli

创建 Angular 项目

使用 Angular CLI 创建一个新的 Angular 项目。

ng new my-angular-app

这将创建一个名为 my-angular-app 的新项目。

目录结构

Angular 项目的目录结构通常如下：

my-angular-app/
├── e2e/                 # 端到端测试
├── node_modules/        # 项目依赖
├── src/                 # 源代码
│   ├── app/             # 应用程序代码
│   │   ├── components/  # 组件
│   │   ├── services/    # 服务
│   │   ├── models/      # 模型
│   │   └── ...
│   ├── assets/          # 静态文件
│   ├── index.html       # 主 HTML 文件
│   └── main.ts          # 主 TypeScript 文件
├── .angular-cli.json    # Angular CLI 配置文件
├── package.json         # 项目包配置文件
└── ...

创建组件

在 Angular 中，组件是构建用户界面的基础。你可以使用 Angular CLI 创建一个新的组件。

ng generate component my-component

这将在 src/app/components 目录下创建一个名为 my-component 的新组件。

组件模板

组件的模板定义了组件的 HTML 结构。在 my-component.component.html 文件中，你可以编写如下代码：

<h1>{{ title }}</h1>
<p>这是一个 Angular 组件。</p>

组件样式

组件的样式定义了组件的外观。在 my-component.component.css 文件中，你可以编写如下样式：

h1 {
  color: red;
}

组件类

组件类包含了组件的逻辑。在 my-component.component.ts 文件中，你可以编写如下 TypeScript 代码：

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title = '欢迎来到 Angular';
}

使用组件

在主应用组件的模板中，你可以使用 <app-my-component></app-my-component> 标签来使用这个组件。