下面是我最近在研究的一個angular實戰練習總結：

1. angular程序架構：

2.環境搭建步驟

　　a. 安裝node.js angular CLI webStorm

　　　　安裝node需要去官網下載對應操作系統的node版本：官網地址。

　　　　安裝angular CLI是在安裝完成node之後， 執行腳本語句：

　　　　npm install  -g @angular/cli

　　　　安裝webstorm同樣也是去官網下載即可: webStorm下載地址。

　　b. 使用angular CLI創建並運行項目

　　　　以上程序安裝完畢後， 開始創建項目， 創建項目的命令是：

　　　ng new "productName"

　　c. 分析項目結構以及代碼。

　　如上圖， 所有組件都必須包含這三個元素：

　　@Component： 組件元數據裝飾器， 所有的組件都需要這個東西做註解。 裝飾器告訴angular， 你所定義的類實際上是一個組件。裝飾器中的屬性，就叫做元數據。

下面我們看一下元數據，

selector屬性實際上是css的選擇器

templateURL指定了組件的內容，被稱為模板

StyleURL指向了css文件，在這個文件中編寫模板所要用到的樣式。

export class appcomponent定義了組件的控制器， 包含模板所有的屬性和方法。

3 angular 應用啟動順序

a. angular.cli.json>apps>src>index屬性默認指向index.html, 他是angular應用啟動時加載的頁面。

b. angular-cli.json>apps>src>main屬性默認為main.ts， 是angular應用啟動時的腳本。用於引導啟動。>

c. 加載appmodule為主模塊， 分析主模塊依賴的模塊，並依次加載。

d. appmodule>appcomponent對應的css選擇器app-root

Angular 實戰練習1