Angular 教程

Angular 是一个由 Google 维护的开源 Web 应用程序框架。它旨在通过组件化的方式来构建高性能的 Web 应用程序。

Angular 简介

Angular 提供了以下特性：

• 组件化：将 UI 分解成可重用的组件，便于维护和扩展。
• 双向数据绑定：简化了数据和视图之间的同步。
• 依赖注入：方便地管理组件之间的依赖关系。
• 模块化：将应用程序分解成可管理的模块，便于测试和部署。

快速开始

安装 Node.js 和 npm

首先，您需要安装 Node.js 和 npm（Node.js 包管理器）。您可以从 Node.js 官网 下载并安装。

创建 Angular 项目

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

ng new my-angular-app

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

运行 Angular 项目

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

cd my-angular-app
ng serve

访问 http://localhost:4200，您应该能看到 Angular 的欢迎页面。

组件

组件是 Angular 的核心概念。以下是一个简单的组件示例：

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Welcome to Angular!</h1>
  `
})
export class AppComponent {
}

在上面的代码中，我们定义了一个名为 AppComponent 的组件，并为其指定了一个选择器 app-root 和一个模板。

路由

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 { }

在上面的代码中，我们定义了一个路由数组 routes，并将其传递给 RouterModule.forRoot() 方法。

图片示例

Angular Logo

更多关于 Angular 的信息，请访问 Angular 官方文档。