步骤 1: 安装 Angular CLI
Angular CLI（Command Line Interface）是一个工具，它可以帮助你初始化、开发和构建 Angular 应用。首先，确保你已经安装了 Node.js 和 npm（Node.js 包管理器），然后打开终端并运行以下命令安装 Angular CLI：
npm install -g @angular/cli
步骤 2: 创建新的 Angular 项目
在终端中运行以下命令来创建一个新的 Angular 项目：
ng new my-angular-app
这将创建一个名为 my-angular-app 的新项目，并安装所需的依赖项。
步骤 3: 运行 Angular 应用
进入项目目录并运行以下命令来启动 Angular 应用：
cd my-angular-app
ng serve
这将启动开发服务器，并在默认端口（通常是 http://localhost:4200）上运行应用。在浏览器中打开该地址，你应该能够看到 Angular 的欢迎页面。
步骤 4: 创建一个组件
在 Angular 中，组件是构建块之一。你可以使用 Angular CLI 来生成一个新的组件。在项目目录中运行以下命令：
ng generate component my-component
这将在项目中创建一个名为 my-component 的新组件，并自动生成相关的文件。
步骤 5: 编辑组件
打开生成的组件文件（src/app/my-component/my-component.component.ts），并编辑组件的逻辑和模板。
// 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 {
title = 'My Angular Component';
}
<!-- my-component.component.html -->
<h1>{{ title }}</h1>
步骤 6: 在应用中使用组件
在 Angular 应用中，组件通过选择器来使用。打开 src/app/app.component.html 文件，使用 <app-my-component></app-my-component> 标签来引入新创建的组件。
<!-- app.component.html -->
<h1>Welcome to {{ title }}!</h1>
<app-my-component></app-my-component>
步骤 7: 查看应用
确保开发服务器仍在运行，刷新浏览器，你应该能够看到应用中包含了新创建的组件。
这就是一个简单的 Angular 快速上手过程。从这里开始，你可以深入学习 Angular 的更多特性，如服务、路由、模块等，以构建更复杂的应用。参考 Angular 的官方文档和教程可以帮助你更全面地了解 Angular。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4899/Angular