[Angular]2.建立第一個專案

文、意如

了解基本架構後就要來實際建立一個Angular專案了。

▶ 延伸閱讀:[Angular]1.初探篇

任務一:建立專案
1-1.建立開發所需要的檔案
1-2.建立dist資料夾來放置編譯後的網頁
任務二:程式流程運作
任務三:Component元件的屬性-資料顯示
3-1. 建立、插入值
3-2. 建立、插入陣列值
3-3. 建立、插入物件值

 

 

任務一:建立專案
1-1.  建立開發所需要的檔案
可以透過指令 ▶ ng generate component <name> 來快速建立開發所需要的檔案。
例如要建立mydatapage的一個元件(Component)。
指令為 ▶ ng generate component mydatapage

 

angular01

 

 

此時會在src/app中新增(CREATE)四個檔案,及更新(UPDATE) app.module.ts

mydatapage.component.css ▶ CSS樣式

mydatapage.component.html ▶ 基本模板Template

mydatapage.component.spec.ts ▶ 執行ng test命令會透過Karma進行測試

mydatapage.component.ts ▶ 元件Component

 

angular02

 

 

1-2.建立dist資料夾來放置編譯後的網頁

 

使用ng build會在專案夾目錄下建立dist資料夾,專門放置已編譯後的網頁。

如要將此專案佈署至正式環境時,指令則是使用  ng build -prod 。

 

angular03

 

 

建立好之後,目錄上會多出dist資料夾,參考如下圖:

 

angular04

 

 

任務二:程式運作流程

Angular 是一個SAP(Single Page Application)的網頁架構,

整個網站只有唯一的一張頁面index.html,所有的頁面切換、使用者介面等內容改變都是靠著JavaScript來做即時動態切換。

在index.html內會包含main.ts (JavaScript的執行檔)

起始頁請參考設定檔angular.json。

 

angular05

 

 

▶ 運作流程:1.index.html

在先前 ng build 所產生的index.html可以看到網頁載入了main.xxxxxxx.js

 

angular06

 

 

▶ 運作流程:1.index.html ▶ 2.main.ts

開啟main.ts ▶ 預設起始載入模組為app.module.ts(src/app/app.module)

bootstrapModule則使用app.module中的AppModule類別

 

angular07

 

 

▶ 運作流程:1.index.html ▶ 2.main.ts ▶ 3.app.module.ts

Angular主要透過元件(Component)來處理所有的介面,而元件必須在模組中設定。

先開啟src/app/app.module.ts

在 @NgModule 模組內中預設 bootstrap 屬性為  AppComponent 為起始元件。

因此引入app.component.ts(src/app/app.component.ts)

 

angular08

 

 

▶ 運作流程:1.index.html ▶ 2.main.ts ▶ 3.app.module.ts ▶ app.component.ts

1. 開啟src/app/app.component.ts

2. 因有宣告為 @Component ,因此AppComponent類別將視為angular中的一個元件(Component)

3. 元件中的selector 為css的選擇器,會將網頁包含app-root標籤替換成./app.component.html

4. 元件中的templateUrl 會將此樣板輸出至介面上

5. 元件中的styleUrls樣板會套用此樣式[可以同時指定多個樣式]

 

angular09

 

 

了解了整個流程後,先開啟src/index.html 檔,可以看到有一個 <app-root></app-root>標籤,只要當Angular 在運作時就會被替換成app.component.html

 

angular10

 

 

接著開啟src/app/app.component.html

將原本的首頁內容全部刪掉,換成自己的內容

<h1>Welcome!!{{title}}</h1>
<h3>HelloWorld</h3>

 

angular11

 

 

最後透過指令ng serve --open來啟動專案。

 

angular12

 

 

此時會自動開啟瀏覽器,預設網址為:http://localhost:4200/

 

angular13

 

 

任務三:Component元件的屬性-資料顯示

 

3-1. 建立、插入值

 

路徑:src/app/app.component.ts

在AppComponet 元件中建立屬性變數為myparam = 'Yiru@Studio';

 

angular14

 

 

路徑:src/app/app.component.html

使用兩個大括弧{{}} 來插入值,例如{{title}}、{{myparam}}

 

angular15

 

 

結果顯示:

 

angular16

 

 

3-2. 建立、插入陣列值

 

路徑:src/app/app.component.ts

在AppComponet 元件中建立屬性陣列為:

member_name = ['John','Mary','Judy','Kevin'];

 

angular17

 

 

路徑:src/app/app.component.html

使用*ngFor來讀取陣列並印出,

例:*ngFor = "let mbn of member_name"

mbn為自己宣告的變數名稱(key),of 後的member_name為要讀去的陣列屬性。

{{mbn}}會去讀取member_name陣列並印出。

 

angular18

 

 

結果如下:

 

angular19

 

 

3-3. 建立、插入物件值

 

路徑:src/app/app.component.ts

在AppComponet 元件中建立屬性物件資料為:

weather = [
    {day:'Monday',degrees:'16'},
    {day:'Tuesday',degrees:'23'},
    {day:'Wednesday',degrees:'19'},
    {day:'Thursday',degrees:'25'},
    {day:'Friday',degrees:'22'},
    {day:'Saturday',degrees:'27'},
    {day:'Sunday',degrees:'23'},
  ]

 

angular20

 

 

路徑:src/app/app.component.html

使用*ngFor來讀取物件並在表格中印出,

例:*ngFor = "let wr of weather"

wr為自己宣告的變數名稱(key),of 後的weather為要讀去的物件屬性。

{{wr.屬性}}會去讀取weather物件中的陣列資料並印出。

 

angular21

 

 

結果如下:

 

angular22

 


 

Yiru@Studio - 關於我 - 意如