欢迎来到 Angular 教程的入门指南部分！如果你是第一次接触 Angular，这里将帮助你开始你的学习之旅。

基础知识

在开始之前，请确保你具备以下基础知识：

  • HTML
  • CSS
  • JavaScript

安装 Angular CLI

Angular CLI 是 Angular 的官方命令行界面，用于快速搭建和开发 Angular 应用。以下是安装步骤：

  1. 打开终端或命令提示符。
  2. 运行以下命令安装 Angular CLI：
npm install -g @angular/cli
  1. 验证安装是否成功：
ng version

创建新项目

使用 Angular CLI 创建一个新项目：

ng new my-angular-app

这将在当前目录下创建一个名为 my-angular-app 的新目录。

运行项目

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

cd my-angular-app
ng serve

在浏览器中访问 http://localhost:4200，你应该能看到一个默认的 Angular 应用。

组件

Angular 应用由组件组成。组件是可复用的 UI 组件，它们可以包含 HTML、CSS 和 TypeScript 代码。

要创建一个新组件，运行以下命令：

ng generate component my-component

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

路由

Angular 使用路由来控制不同组件的显示。要设置路由，请创建一个路由模块并在其中定义路由配置。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './my-component.component';

const routes: Routes = [
  { path: 'my-component', component: MyComponent }
];

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

在 app.module.ts 文件中导入并声明 AppRoutingModule：

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    AppRoutingModule
  ],
  // ...
})
export class AppModule { }

更多资源

想要深入了解 Angular，请访问我们的 Angular 教程中心。

Angular