Angular 入门教程

欢迎来到 Angular 入门教程页面！这里将为您介绍 Angular 的基本概念、安装步骤以及如何创建第一个 Angular 应用。

安装 Angular CLI

首先，您需要安装 Angular CLI，这是 Angular 的官方命令行界面，用于创建、生成和管理 Angular 项目。

npm install -g @angular/cli

创建 Angular 项目

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

ng new my-first-angular-app

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

运行 Angular 应用

进入项目目录，并运行以下命令启动开发服务器：

cd my-first-angular-app
ng serve

打开浏览器，访问 http://localhost:4200，您将看到您的第一个 Angular 应用已经运行起来了！

组件

Angular 应用由多个组件组成，每个组件负责展示页面上的一个部分。以下是一个简单的组件示例：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '我的第一个 Angular 应用';
}

在上面的代码中，我们定义了一个名为 AppComponent 的组件，它有一个模板文件 app.component.html 和一个样式文件 app.component.css。

路由

Angular 使用路由来管理不同组件的显示。以下是一个简单的路由示例：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
  { path: '', component: AppComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在上面的代码中，我们定义了一个路由配置，其中包含一个根路由，它将匹配空路径，并显示 AppComponent。

扩展阅读

想要了解更多关于 Angular 的知识，请访问以下链接：

• Angular 官方文档
• Angular 实战教程

希望这份入门教程能帮助您快速上手 Angular！🎉