Angular 是一个用于构建动态单页应用程序的前端框架。以下是一些基础的教程，帮助您开始使用 Angular。

快速入门

  1. 安装 Node.js 和 npm
    确保您的系统上已安装 Node.js 和 npm，这是构建 Angular 项目的基础。

  2. 创建一个新的 Angular 项目
    使用以下命令创建一个新的 Angular 项目：

    ng new my-angular-app

    这将创建一个名为 my-angular-app 的新目录，其中包含一个基本的 Angular 应用程序。

  3. 导航到项目目录
    进入新创建的项目目录：

    cd my-angular-app

  4. 启动开发服务器
    使用以下命令启动开发服务器：

    ng serve

    这将在本地启动一个开发服务器，通常在 http://localhost:4200。

组件

Angular 应用程序由组件组成。以下是一些关于组件的基础知识：

  • 创建组件
    使用 Angular CLI 创建一个新的组件：

    ng generate component my-component

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

  • 使用组件
    在父组件的模板中引入新创建的组件：

    <app-my-component></app-my-component>

路由

Angular 使用路由来管理应用程序的视图。以下是一些关于路由的基础知识：

  • 设置路由
    在 app-routing.module.ts 文件中定义路由：

    const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

  • 导航到路由
    使用 Angular 的 <router-link> 指令在模板中导航到不同的路由：

    <router-link to="/about">About</router-link>

学习更多

要了解更多关于 Angular 的信息，请访问我们的官方文档.

[center] Angular_logo