rabbitMQ的扇出模式（fanout发布订阅）的生产者与消费者使用案例-CFANZ编程社区

Angular

什么是Angular？

Angular 应用

1. 组件

1.1 @Component() 装饰器

通过 ng g component hello-world 命令可以自动生成组件，如下所示：

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

@Component({
  selector: 'hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {

}

下面是一个最小化的 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 的组件模型提供了强大的封装能力和直观的应用结构。组件还能让你的应用更容易进行单元测试，并可以提高代码的整体可读性。

2. 模板

2.1 插值（interpolation）

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

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

这里 message 的值来自上面的组件类：

<!--这里所用的双花括号，代表 Angular 对其中的内容进行插值。-->
<p>{{ message }}</p>

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

<p>Hello, World!</p>

2.2 属性绑定

假设有以下的组件类：

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);
  }
}

在模板中编写如下内容：

<!--这里所用的方括号，该语法表明你正在将 Property 或 Attribute 绑定到组件类中的值。-->
<p [id]="sayHelloId" [style.color]="fontColor">My color is {{ fontColor }}</p>

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

<p id="1" style="color: blue;">My color is blue</p>

2.3 声明事件监听器

在模板中编写如下内容：

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

当用户点击按钮时，将会调用组件类中的sayMessage()方法，显示 Hello, World 。

2.4 指令

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

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!";
    }
  }
}

<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，因此易于构建、维护和更新。

3. Angular CLI

命令	详情
ng build	把 Angular 应用编译到一个输出目录中。
ng serve	构建你的应用并启动开发服务器，当有文件变化时就重新构建。
ng generate	基于原理图（schematic）生成或修改某些文件。
ng test	在指定的项目上运行单元测试。
ng e2e	构建一个 Angular 应用并启动开发服务器，然后运行端到端测试。

4. 自带库

库	详情
Angular 路由器	高级的客户侧导航功能与基于 Angular 组件的路由机制。支持惰性加载、嵌套路由、自定义路径匹配规则等。
Angular 表单	统一的表单填报与验证体系。
Angular HttpClient	健壮的 HTTP 客户端库，它可以支持更高级的客户端-服务器通讯。
Angular 动画	丰富的动画体系，用于驱动基于应用状态的动画。
Angular PWA	一些用于构建渐进式 Web 应用（PWA）的工具，包括 Service Worker 和 Web 应用清单（Manifest）。
Angular 原理图	一些搭建脚手架、重构和升级的自动化工具。用于简化大规模应用的开发。

搭建本地开发环境和工作区

1. 前提条件

需求	详情
Node.js	Angular 需要 Node.js 的活跃 LTS 版或维护期 LTS 版。(参阅：https://nodejs.org/en)
npm 包管理器	Angular、Angular CLI 以及 Angular 应用都要依赖 npm 包来实现很多特性和功能。要下载并安装 npm 包，你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面，该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端，请在终端窗口中运行 npm -v。

2. 安装 Angular CLI

npm install -g @angular/cli

在 Windows 客户端计算机上，默认禁用 PowerShell 脚本的执行。要允许执行 npm 全局二进制文件所需的 PowerShell 脚本，你必须设置以下执行策略内容:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

3. 创建工作区和初始化应用

运行 CLI 命令 ng new <project-name>，其中<project-name>是 Angular 应用的名称，如：

ng new my-app

ng new 命令会提示你要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。

4. 运行应用

进入 workspace 文件夹，比如 my-app。
运行下列命令。

cd my-app
ng serve --open

ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。
--open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/。