前端工程師必學知識!建立第一個Angular專案 發佈日期: 2022-10-122022-09-28 作者: yijun 文、意如老師 建立第一個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.tsmydatapage.component.css ▶ CSS樣式mydatapage.component.html ▶ 基本模板Templatemydatapage.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.ts1. 開啟src/app/app.component.ts 2. 因有宣告為 @Component ,因此AppComponent類別將視為angular中的一個元件(Component)3. 元件中的selector 為css的選擇器,會將網頁包含app-root標籤替換成./app.component.html4. 元件中的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 分享此文:分享到 Twitter(在新視窗中開啟)按一下以分享至 Facebook(在新視窗中開啟)按一下以分享到 Telegram(在新視窗中開啟)按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟)請按讚:喜歡 正在載入... 相關