第三章：Template —— 楼里的中控面板，不是普通 HTML，而是带调度规则的操作面板

Angular 的模板看起来很像 HTML，但它不是“静态网页字符串”，而是带绑定、事件、控制流、指令语义的中控面板。

最常见的几类模板能力：

• 插值：{{ value }}
• 属性绑定：[disabled]="isLocked"
• 事件绑定：(click)="openGate()"
• 双向绑定：[(ngModel)]="keyword"
• 列表/条件控制：*ngFor、*ngIf，或现代块语法 @for、@if
• 管道：{{ createdAt | date }}

<section>
  <h3>{{ departmentName }}</h3>

  <input [value]="keyword" (input)="onKeywordChange($any($event.target).value)" />

  <button [disabled]="loading" (click)="reload()">
    刷新数据
  </button>
</section>

模板心智要这样记：

Template 不是“写页面”
Template 是“声明面板如何映射业务状态”

也就是说，Angular 不是让你手动说：

• 找到这个 DOM
• 修改它的文字
• 给那个按钮加事件
• 遍历数组再拼节点

而是让你声明：

• 这个区域显示哪个数据
• 这个按钮在什么条件下禁用
• 点击后触发哪个行为
• 这一组数据如何展开成界面

这就是园区中控面板思维：

你定义调度规则，框架负责落实。