一个完整的Angular应用主要由六个总要的部分组成：组件、模板、指令、服务、依赖注入和路由。

组件

样式

  • styles 和 styleUrls 可同时指定，styles 中的样式会被 styleUrls 中的样式覆盖。

拦截输入属性

  • setter拦截输入属性

模板

class类名

1
2
3
4
5
6
7
<div [class]="changeGreen">
  将class名绑定为模板类中的值
</div>
<div [class.color-blue]="isBlue()">
  isBule 返回 true or false
</div>
  • 添加或移除一个类
1
2
3
4
5
6
7
8
<div [ngClass]="setClass()"></div>
setClass(){
  return {
    red: this.red,
    title: this.isTitle
  }
}
  • 通过ngClass内置指令，同时添加或移除多个类

内置指令

1
2
3
4
5
<span [ngSwith]="contactName">
  <span *ngSwitchCase="TimCook">库克</span>
  <span *ngSwitchCase="BillGates">比尔盖茨</span>
  <span *ngSwitchDefault>无名氏</span>
</span>
  • ngSwith前不用加 ，ngSwithCase 和 ngSwithDefault 前需要加 
1
2
3
4
5
6
7
8
<div *ngFor="let contact of contacts; let i = index">
  {{ i+1 }} - {{ contact.id }}
</div>
// NgForTrackBy
<div *ngFor="let contact of contacts; let i = index; trackBy: trackByContacts">
  {{ i+1 }} - {{ contact.id }}
</div>
1
2
3
trackByContacts(index: number, contact: Contact) {
  return contact.id
}
  • trackBy检查同一个联系人属性是否发生变化，如果发生变化则更细DOM元素，反之则留下DOM元素（性能优化）

表单

Angular提供了模板驱动及模型驱动两种方式来构建表单。

  • 模板驱动：使用模板表单内置指令、内置校验的方式来构建表单
  • 模型驱动：采用自定义表单、自定义校验的方式来构建表单

模板驱动