​

一、簡單操作

a) 使用Angular CLI可以快速建立專案框架，先執行 $ npm install –g @angular/[email protected]安裝CLI，為CLI的位置設定環境變數，然後就可以全域性使用ng命令了。

執行ng new –ng4 angular-hello-world可以建立Angular4專案，會自動生成基礎的資料夾和檔案，還會自動進行npm i操作，下載並安裝所需的依賴。

然後執行ng serve就可以編譯並啟動這個程式了，但ng並不會自動開啟瀏覽器。

b) 建立一個元件

元件是Angular的核心，執行ng generate componenthello-world可以生成hello-world元件，如果VSCode安裝了Angular Files外掛，也通過可以方便地右鍵-新增元件，會為一個元件自動建立四個檔案。

元件的基本組成部分為裝飾器(Component Decorator)和元件定義類(ComponentDefinition class)。

上圖右側的hello-world.component.ts檔案中，import引入兩個依賴Component和OnInit；@Component部分便是裝飾器了，這部分程式碼將HelloWorld類裝飾成了一個元件。因為selector屬性的值為“app-hello-world”，<app-hello-world>標籤就可以在html中使用了。templateUrl定義了模板的路徑，還可使用template並使用倒引號（`…`）直接在ts檔案中嵌入模板內容；styleUrl指定當前元件專屬的CSS檔案路徑。

如此，一個元件就建立好了，在app.component.html中加入<app-hello-world>標籤就可以使用這個元件了。

c) 在元件中使用資料。

用外掛的功能新增一個user-item元件，會自動建立所有的檔案，並已將元件新增到了app.component.html。

在元件的ts檔案新增name屬性並在建構函式初始化

隨後在模板中使用這個屬性，語法為{{name}}。

d) 陣列的使用。

陣列的遍歷使用*ngFor，這與razor中的遍歷類似，會自動建立包含陣列成員的標籤。在ts檔案中定義字串陣列，可以用string[]或Array<string>的寫法。然後*ngFor的使用方式為：

試了下把let換成var就不行了，let宣告的變數作用域被限制在了塊級，比var安全，可能這兒的模板語法廢棄了var吧。

e) 元件的使用

前面建立的user-item元件中的name屬性只是使用了預設的值‘Felipe’。實際使用中，元件是可複用的，屬性的值應該從外部指定。

要在user-list元件中使用user-item，可以這樣修改user-list的模板：

[name]=***這樣的寫法是在向user-item元件傳遞值。

修改後的user.item.components.ts如下，匯入了Input，並在屬性前面加上@Input()，這樣就可以從父模板傳入值了。

二、Angular的啟動過程

a) 每個程式都有啟動入口，在執行ng serve後，ng會在.angular-cli.json中查詢入口，.angular-cli.json指向main.ts檔案，而main.ts便是程式的入口。在main.ts中platformBrowserDynamic().bootstrapModule(AppModule)語句表示啟動程式會執行AppModule，AppModule在app.module.ts中定義。

b) app.module.ts中的具體內容有：

@NgModule裝飾器包含四個屬性:declarations、imports、providers和bootstrap。

declaration屬性聲明瞭當前AppModule模組包含的元件，建立的新元件會自動新增到這裡。

imports屬性匯入了AppModule依賴的模組。關於imports與頭部的import的區別作者後面會細說。

prividers屬性用於進行依賴注入，現在不懂了。

bootstrap屬性指定了執行該模組時，載入的第一個元件。

學習資料：The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda