Angular權威教程閱讀總結（1）

啟程

寒假的時候老師佈置了一個web作業，做一個個人部落格，並給出了種子專案程式碼，一看發現是用angularjs寫的，並且是好幾年前的東西了（大概已經被淘汰了吧233），於是看了下angular的文件，決定用angular5進行開發。如今加入一個team，剛好裡面的前端框架也是用angular5，於是給自己定了個目標，結合專案程式碼、官方文件、以及這本書進行更深入的學習。在此記錄下看書得到的一點體會。

解構

匯入模組元件的時候利用了es6的解構賦值特性，如import { componet } from ‘@angular/core’
然後專案中有這樣寫的 import { …something } from ‘xxModule’; 不是很理解表達的意思。

反引號模板字串

反引號字串會展開模板變數！

輸入屬性

在Angular中，新增一個帶方括號的屬性（比如[foo]）意味著把一個值傳給該元件上同名的輸入屬性（如foo）

啟動過程

ng serve >> angular-cli.json >> main.ts >> bootstrap引導模組(AppModule) >> 頂層元件AppComponent >> 渲染模板

模板變數

<input name="link" #newlink></input>

這裡的#newlink語法稱作一個解析，Angular會把設定了#(hash)的標籤元素賦值給一個區域性變數，其代表了這個元素的Dom，其效果是讓變數newlink可用於該檢視的所有表示式中。

元件host選項

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.css'],
  host:{
    class: 'row'
  }
})

元件的宿主就是該元件所附著到的元素，藉助host選項，我們可以在元件的內部設定宿主元素。（不是很明白具體作用是什麼。）

可選引數

constructor(aa: string, bb: string, cc?: number){
    this.cc= cc|| 0;
  }

上面的cc引數是一個可選引數，由末尾的？標出來。

擴充套件閱讀

1. 胖模型、皮包骨的控制器
2. 變數的解構賦值
3. Angular高階樣式指南
4. Angular Directive（指令）