Angular 快速入门

想要开始使用 Angular 进行前端开发吗？以下是一些基本步骤和资源，帮助你快速入门。

安装 Node.js 和 npm

首先，确保你的系统中安装了 Node.js 和 npm。这两个工具是 Angular 的基础。

创建 Angular 项目

使用 npm 命令创建一个新的 Angular 项目。

ng new my-angular-project

这将在当前目录下创建一个新的名为 my-angular-project 的文件夹，其中包含一个基本的 Angular 应用程序。

导航到项目目录

进入新创建的项目目录。

cd my-angular-project

启动开发服务器

启动开发服务器以查看你的应用程序。

ng serve

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

创建组件

在你的项目中创建一个新的组件。

ng generate component my-first-component

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

编辑组件

打开 src/app/my-first-component/my-first-component.component.ts 文件，并添加一些 TypeScript 代码。

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

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

使用组件

在你的应用程序的主模板中引入并使用新创建的组件。

<!-- src/app/app.component.html -->
<app-my-first-component></app-my-first-component>

运行应用程序

再次启动开发服务器，你应该能够看到包含新组件的应用程序。

ng serve