最近從angularjs轉到學習angular，雖然有了前面的專案實踐的經驗，這幾天的學習總體來說還是比較輕鬆的，但是也是以前的思想的緣故吧，踩了好幾個坑。

TypeScript

我們知道，angular使用的是typeScript語言，帶類的js語言。這就讓我這個寫慣了js和java的有點難受了。

java中，定義變數都是先宣告型別，然後才是變數名：

private Test test；

但是在ts（typeScript簡稱，後面我都會以ts代表）中，變數的定義是先定義變數名，然後才宣告變數的型別，而且還有一個冒號：

private test: Test;

另外，還有箭頭表示式：

let fn = () => a + b;
 

他就相當於：

let fn = function() {
    a + b;
};

像let和const代替var，箭頭表示式代替匿名函式等等，這些小的細節部分都讓我沒少出問題。

元件化的核心

angular最為核心的就是元件化，將單頁面分為若干個元件，

然後將元件進行拼接。

這就有點向我們在angularjs中使用的ui-view，但是他要比ui-view元件化的更加徹底。

元件化就要求我們要做好一個規劃：

1.將一個頁面分為哪幾個元件.2.組裝好。3.最後去實現元件的功能。

要不就有可能出現我在學習中出現的問題：元件組裝錯了位置。而且相信在後面的專案中，我們會建立大量的元件，清晰的整理元件之間的關係會讓專案的開發變得簡單。

資料繫結

angular預設單向資料繫結，要使用雙向資料繫結就要使用[()]的形式：

<div>
    <span>name:</span>
    <input [(ngModel)]="hero.name" placeholder="hero">
</div>

其實他angular的繫結是這樣的：

資料繫結：使用[]事件繫結： 使用()雙向資料繫結：資料繫結 + 事件繫結，所以是[()]

其他

還有一些就是angular自帶的裝飾器，比如@Component，@Input，@NgModule等等，這些都是angular內部寫好的。

還有angular的內建指令也和angularjs有所區別，像是ngIf和ngFor，他們在使用時都需要在前面新增一個星號：*，例如：

<div *ngIf="object">
    ...
</div>

這個星號其實是一種語法糖，簡化了ngIf和ngFor的原有的寫法，並且也使得程式碼更符合我們的普遍要求，更加易讀。

總結

通過幾天的學習，對angular有一個初步的瞭解。但是還是要通過專案的磨鍊才能對更加深入的原理等深層的東西有一個比較深刻的理解。

但是通過這次學習，也是發現了，我們學習語言主要學習的是思維，當我們的思想有了，那麼其他的都是想通的。