Angular 實戰練習1

下面是我最近在研究的一個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