初識angular踩的坑

最近從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有一個初步的瞭解。可是仍是要經過項目的磨鍊才能對更加深刻的原理等深層的東西有一個比較深入的理解。

可是經過此次學習，也是發現了，咱們學習語言主要學習的是思惟，當咱們的思想有了，那麼其餘的都是想通的。

---

相關參考：
官方文檔
https://blog.csdn.net/u010130...