# 什么是 Angular?

本主题会帮你了解 Angular:什么是 Angular?它有哪些优势?当构建应用时它能为你提供什么帮助?

Angular 是一个基于 TypeScript 构建的开发平台。它包括:

  • 一个基于组件的框架,用于构建可伸缩的 Web 应用

  • 一组完美集成的库,涵盖各种功能,包括路由、表单管理、客户端-服务器通信等

  • 一套开发工具,可帮助你开发、构建、测试和更新代码

借助 Angular,无论单人项目还是企业级应用,你都能获得平台带来的优势。Angular 的设计目标之一就是让更新更容易,因此你可以用最小的成本升级到最新的 Angular 版本。最重要的是,Angular 的生态系统由包括 170 万名开发人员、库作者和内容创作者在内的多元团队构成。

TIP

要试用包含本指南中代码片段的可工作范例,请看现场演练/ 下载范例

# Angular 应用:知识要点

本节会解释 Angular 背后的核心思想。了解这些思想可以帮助你更有效地设计和构建应用。

# 组件

组件是构成应用的砖块。组件包括三个部分:带有 @Component()装饰器的 TypeScript 类、HTML 模板和样式文件。@Component()装饰器会指定如下 Angular 专属信息:

Components are the building blocks that compose an application. A component includes a TypeScript class with a @Component()decorator, an HTML template, and styles. The @Component()decorator specifies the following Angular-specific information:

  • 一个 CSS 选择器,用于定义如何在模板中使用组件。模板中与此选择器匹配的 HTML 元素将成为该组件的实例。

  • 一个 HTML 模板,用于指示 Angular 如何渲染此组件

  • 一组可选的 CSS 样式,用于定义模板中 HTML 元素的外观

下面是一个最小化的 Angular 组件。

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

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
  `
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}

要使用此组件,请在模板中编写以下内容:

<hello-world></hello-world>

当 Angular 渲染此组件时,生成的 DOM 如下所示:

<hello-world>
    <h2>Hello World</h2>
    <p>This is my first component!</p>
</hello-world>

Angular 的组件模型提供了强大的封装能力和直观的应用结构。组件还能让你的应用更容易进行单元测试,并可以提高代码的整体可读性。

有关可以用组件做什么的更多信息,请参见“组件”部分。

# 模板

每个组件都有一个 HTML 模板,用于声明该组件的渲染方式。你可以内联它或用文件路径定义此模板。

Angular 添加了一些语法元素以扩展 HTML,让你可以从组件中插入动态值。当组件的状态更改时,Angular 会自动更新已渲染的 DOM。此功能的应用之一是插入动态文本,如下例子所示。

<p>{{ message }}</p>

这里 message 的值来自组件类:

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

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

当应用加载组件及其模板时,用户将看到以下内容:

<p>Hello, World!</p>

注意这里所用的双花括号 —— 它们指示 Angular 对其中的内容进行插值。

Angular 还支持属性绑定,以帮助你设置 HTML 元素的 Property 和 Attribute 的值,并将这些值传给应用的展示逻辑。

<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  You can set my color in the component!
</p>

注意这里所用的方括号 —— 该语法表明你正在将 Property 或 Attribute 绑定到组件类中的值。

可以声明事件监听器来监听并响应用户的操作,比如按键、鼠标移动、单击和触摸等。你可以通过在圆括号中指定事件名称来声明一个事件监听器:

<button
  type="button"
  [disabled]="canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>

前面的例子中调用了一个方法,该方法是在组件类中定义的:

sayMessage() {
  alert(this.message);
}

以下是在 Angular 模板中插值和绑定的例子:

hello-world-bindings.component.ts

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

@Component ({
  selector: 'hello-world-bindings',
  templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
  fontColor = 'blue';
  sayHelloId = 1;
  canClick = false;
  message = 'Hello, World';

  sayMessage() {
    alert(this.message);
  }
}

hello-world-bindings.component.html

<button
  type="button"
  [disabled]="canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>

<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  You can set my color in the component!
</p>

<p>My color is {{ fontColor }}</p>

可以用指令来为模板添加额外功能。Angular 中最常用的指令是 *ngIf*ngFor。你可以使用指令执行各种任务,比如动态修改 DOM 结构。你还可以用自定义指令来创建出色的用户体验。

以下代码是 *ngIf指令的例子。

hello-world-ngif.component.ts

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

@Component({
  selector: 'hello-world-ngif',
  templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
  message = "I'm read only!";
  canEdit = false;

  onEditClick() {
    this.canEdit = !this.canEdit;
    if (this.canEdit) {
      this.message = 'You can edit me!';
    } else {
      this.message = "I'm read only!";
    }
  }
}

hello-world-ngif.component.html

<h2>Hello World: ngIf!</h2>

<button type="button" (click)="onEditClick()">Make text editable!</button>

<div *ngIf="canEdit; else noEdit">
    <p>You can edit the following paragraph.</p>
</div>

<ng-template #noEdit>
    <p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>

<p [contentEditable]="canEdit">{{ message }}</p>

Angular 的声明式模板使让可以将应用的逻辑和外观完全分开。模板基于标准 HTML,因此易于构建、维护和更新。

关于模板用法和用途的更多信息,请参见“模板”部分。

# 依赖注入

依赖注入让你可以声明 TypeScript 类的依赖项,而无需操心如何实例化它们,Angular 会为你处理这些琐事。这种设计模式能让你写出更加可测试、也更灵活的代码。尽管了解依赖注入对于开始用 Angular 并不是至关重要的事,但我们还是强烈建议你将其作为最佳实践,并且 Angular 自身的方方面面都在一定程度上利用了它。

为了说明依赖注入的工作原理,请考虑以下例子。第一个文件 logger.service.ts中定义了一个 Logger类。它包含一个 writeCount函数,该函数将一个数字记录到控制台。

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

@Injectable({providedIn: 'root'})
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
}

接下来,hello-world-di.component.ts文件中定义了一个 Angular 组件。该组件包含一个按钮,它会使用此 Logger 类的 writeCount函数。要访问此功能,可通过向构造函数中添加 private logger: Logger来把 Logger服务注入到 HelloWorldDI类中。

import { Component } from '@angular/core';
import { Logger } from '../logger.service';

@Component({
  selector: 'hello-world-di',
  templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent  {
  count = 0;

  constructor(private logger: Logger) { }

  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

有关依赖注入和 Angular 的更多信息,请参见 Angular 中的依赖注入部分。

# Angular CLI

Angular CLI 是开发 Angular 应用程序的最快、直接和推荐的方式。 Angular CLI 使某些任务无故障。例如:

Angular CLI 是开发 Angular 应用的最快、最简单和推荐的方式。Angular CLI 能简化许多任务。这里有些例子:

命令 Command 详情 Details
ng build 把 Angular 应用编译到一个输出目录中。Compiles an Angular application into an output directory.
ng serve 构建你的应用并启动开发服务器,当有文件变化时就重新构建。Builds and serves your application, rebuilding on file changes.
ng generate 基于原理图(schematic)生成或修改某些文件。Generates or modifies files based on a schematic.
ng test 在指定的项目上运行单元测试。Runs unit tests on a given project.
ng e2e 构建一个 Angular 应用并启动开发服务器,然后运行端到端测试。Builds and serves an Angular application, then runs end-to-end tests.

Angular CLI 是一种用于构建应用程序的有价值的工具。

有关 Angular CLI 的更多信息,请参阅 “Angular CLI 参考手册” 部分。

# 自带库

“Angular 应用:基本知识” 部分提供了构建 Angular 应用时要用到的几个关键架构元素的简要描述。但是,当你的应用不断成长并且想要添加其他功能(比如站点导航或用户输入)时,Angular 的许多优势才会真正显现出来。届时,你可以通过 Angular 平台,来引入 Angular 所提供的众多自带库之一。

你可以使用的一些库包括:

Library 详情 Details
Angular 路由器Angular Router 高级的客户侧导航功能与基于 Angular 组件的路由机制。支持惰性加载、嵌套路由、自定义路径匹配规则等。Advanced client-side navigation and routing based on Angular components. Supports lazy-loading, nested routes, custom path matching, and more.
Angular 表单Angular Forms 统一的表单填报与验证体系。Uniform system for form participation and validation.
Angular HttpClient 健壮的 HTTP 客户端库,它可以支持更高级的客户端-服务器通讯。Robust HTTP client that can power more advanced client-server communication.
Angular 动画Angular Animations 丰富的动画体系,用于驱动基于应用状态的动画。Rich system for driving animations based on application state.
Angular PWA 一些用于构建渐进式 Web 应用(PWA)的工具,包括 Service Worker 和 Web 应用清单(Manifest)。Tools for building Progressive Web Applications (PWAs) including a service worker and Web app manifest.
Angular 原理图Angular Schematics 一些搭建脚手架、重构和升级的自动化工具。用于简化大规模应用的开发。Automated scaffolding, refactoring, and update tools that simplify development at large scale.

这些库在扩展应用能力的同时,还能让你将更多精力放在那些令你的应用与众不同的功能上。你可以添加这些库,并相信它们能与 Angular 框架无缝集成并同步更新。

只有当它们可以帮你向应用中添加功能或解决特定的问题时,你才需要这些库。

# 下一步

本主题旨在帮你了解 Angular:什么是 Angular?它有哪些优势?当构建应用时它能为你提供什么帮助?

要实际使用 Angular,请参阅我们的入门教程。本教程使用 stackblitz.com ,因此你可以浏览 Angular 的可工作范例,而不必先做任何安装工作。

建议阅读以下部分来进一步探索 Angular 的特性:

  • 了解 Angular

  • Angular 开发人员指南

Last Updated: 5/5/2023, 9:06:42 AM