Angular笔记（二）

背景

提取部分Angular配置方法和基本资料，详细请浏览https://angular.cn

1、认识Component

1）Component是最小单位

2）Component由css,html,typescript组成

3）可重复使用

4）处理使用者的操作

5）反应物件的状态

2、设计Angular需要元件化思考

1）将画面拆分为一个个Component

2）主要用来呈现资料

3）保持简单，尽量不要有商业逻辑

4）尽量让Component可以重复使用

5）所有的东西都是由Component组成

3、开发基础规则

1）每个档案，只定义一件事情（SRP）

2）保持一致的命名规则

3）避免把主要逻辑放在main.ts

4）逻辑放在service

5）更多参考：https://angular.cn/guide/styleguide

4、第一个Component

-ng g c my-new-component

5、Data Binding方法

1）将资料呈现在画面上

• 绑定到画面

{{Title}}

• 绑定DOM属性

<input [value]="myValue"/>

• 绑定事件

<button (click)="myButtonClick()"/>

2）根据条件呈现

• ngIf

<div *ngIf="condition">

• ngFor

<li *ngFor="let item of list">

3）接收使用者输入资料

6、Components之间的沟通

1）透过组合Components完成功能

2）彼此使用Property和Event沟通

3）最外层的Components才有资料

• Controller View
• Child Component负责显示资料和触发事件

4）让元件更容易重复使用