---
# System prepended metadata

title: Angular 學習筆記

---

# Angular 學習筆記

### Day 1

 都在引入component 

### Day 2
 印象最深的是與vue的不同之處
1. #### Property Binding

    |      Angular      |       vue        |
    |:-----------------:|:----------------:|
    |        []         |        :         |
    | [disabled]="data" | :disabled="data" |

2. #### Function Binding
    |     Angular      |      vue      |
    |:----------------:|:-------------:|
    |        ()        |       @       |
    | (click)="ooxx()" | @click="ooxx" |

3. #### Two-way-databinding

    ####     Hint:
    You need to enable the ngModel  directive. 
    This is done by adding the **FormsModule**  to the **imports[]**  array in the **AppModule**.
    You then also need to add the import from @angular/forms  in the app.module.ts file:

    ```
    import { FormsModule } from '@angular/forms'; 
    ```
    
    
    |         Angular         |        vue         |
    |:-----------------------:|:------------------:|
    | ([ngModule])="dataName" | v-model="dataName" |
    |            @            |                    |

   
4. #### *ngIf v.s. v-if

        <p *ngIf="serverCreated; else noServer"></p>
        <ng-template #noServer>
          <p>NO SERVER LA !!!!</p>
        </ng-template>

     Hint: ng-template #name
     
5. #### ngFor v.s. v-for
    ```
    <app-server *ngFor="let item of servers;let i = index">
        {{ i }} :{{ item }} 
    </app-server>
    ```
        
6. #### [ngStyle], [ngClass] 用法如Vue的 :style , :class相同

    ```
    <div *ngFor="let item of log; let i = index" 
         [ngStyle]="{backgroundColor: i >= 4 ? 'blue':'green'}" 
         [ngClass]="{online: i >= 4}">{{ item }}</div>
    ```



### Day 3

1.資料綁定 
    

|         Angular         |          vue           |
|:-----------------------:|:----------------------:|
| [dataName]="parentData" | :dataName="parentData" |
|                         |   props:['dataName']   |

