2022/10/12

前端工程師必學知識!建立第一個Angular專案

文、意如老師

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

▶ 延伸閱讀:前端網頁工程師入門必備!認識Angular

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

任務一:建立專案

1-1. 建立開發所需要的檔案

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

此時會在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

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

使用ng build會在專案夾目錄下建立dist資料夾,專門放置已編譯後的網頁。
如要將此專案佈署至正式環境時,指令則是使用 ng build -prod 。

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

任務二:程式運作流程

Angular 是一個SAP(Single Page Application)的網頁架構,整個網站只有唯一的一張頁面index.html,所有的頁面切換、使用者介面等內容改變都是靠著JavaScript來做即時動態切換。
在index.html內會包含main.ts (JavaScript的執行檔)
起始頁請參考設定檔angular.json。

▶ 運作流程:1.index.html
在先前 ng build 所產生的index.html可以看到網頁載入了main.xxxxxxx.js

▶ 運作流程:1.index.html ▶ 2.main.ts
開啟main.ts ▶ 預設起始載入模組為app.module.ts(src/app/app.module)
bootstrapModule則使用app.module中的AppModule類別

▶ 運作流程: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)

▶ 運作流程: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樣板會套用此樣式[可以同時指定多個樣式]

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

接著開啟src/app/app.component.html
將原本的首頁內容全部刪掉,換成自己的內容

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

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

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

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

3-1. 建立、插入值

路徑:src/app/app.component.ts
在AppComponet 元件中建立屬性變數為myparam = 'Yiru@Studio';

路徑:src/app/app.component.html
使用兩個大括弧{{}} 來插入值,例如{{title}}、{{myparam}}

結果顯示:

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

路徑:src/app/app.component.ts
在AppComponet 元件中建立屬性陣列為:
member_name = ['John','Mary','Judy','Kevin'];

路徑:src/app/app.component.html
使用*ngFor來讀取陣列並印出,
例:*ngFor = "let mbn of member_name"
mbn為自己宣告的變數名稱(key),of 後的member_name為要讀去的陣列屬性。
{{mbn}}會去讀取member_name陣列並印出。

結果如下:

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'},
]

路徑:src/app/app.component.html
使用*ngFor來讀取物件並在表格中印出,
例:*ngFor = "let wr of weather"
wr為自己宣告的變數名稱(key),of 後的weather為要讀去的物件屬性。
{{wr.屬性}}會去讀取weather物件中的陣列資料並印出。

結果如下:

本文首圖圖片來源:Pexels

加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧!

不同頻道,不同知識!

Facebook Instagram Youtube