Angular 教程 – 案例讲解

本教程将介绍 Angular 的基础知识，并通过一个案例讲解如何在 Angular 中实现一个基本的应用程序。

Angular 简介

Angular 是一个开源的前端框架，由 Google 开发并维护。它使用 TypeScript 作为编程语言，提供了一套完整的开发工具和框架，用于构建单页应用程序。

Angular 的基本特性

• 组件化：Angular 采用组件化的开发方式，将页面划分为多个独立的组件，提高了代码的复用性和可维护性。
• 双向数据绑定：Angular 提供了双向数据绑定的机制，使得视图和数据模型之间的同步变得更加简单。
• 依赖注入：Angular 支持依赖注入，使得组件之间的解耦更加容易。

案例讲解：构建一个简单的计数器应用程序

本案例将演示如何使用 Angular 构建一个简单的计数器应用程序。

创建 Angular 项目

首先，我们需要使用 Angular CLI 创建一个新的 Angular 项目。打开终端，输入以下命令：

ng new counter-app

创建计数器组件

接下来，我们创建一个名为 “Counter” 的组件。在终端中，导航到项目根目录，并输入以下命令：

cd counter-app
ng generate component Counter

编写计数器组件的模板

在 `src/app/counter/counter.component.html` 文件中，编写计数器组件的模板。示例代码如下：

<h2>计数器: {{ count }}</h2>
<button (click)="increment()">增加</button>
<button (click)="decrement()">减少</button>

编写计数器组件的逻辑

在 `src/app/counter/counter.component.ts` 文件中，编写计数器组件的逻辑。示例代码如下：

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

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

将计数器组件添加到应用程序

最后，在 `src/app/app.module.ts` 文件中，将计数器组件添加到应用程序的模块中。示例代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CounterComponent } from './counter/counter.component';

@NgModule({
  declarations: [
    AppComponent,
    CounterComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

运行应用程序

在终端中，运行以下命令启动开发服务器：

ng serve

在浏览器中访问 `http://localhost:4200`，即可看到运行的计数器应用程序。

总结

本教程通过一个简单的计数器应用程序案例，讲解了如何在 Angular 中构建应用程序的基本步骤。希望对您有所帮助。