iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

網站一條龍 - 從架站到前端系列 第 24

[Day24] 第一個 Angular App

好的,今天開始我們就要用牛刀來殺雞。首先第一件事當然就是先準備牛刀,不過這個牛刀整支都在 npm 上,所以拿牛刀之前我們還需要先裝 Node.js。請直接透過傳送門下載並安裝 Node.js,已經有 Node.js 的話只要是 12.14.x 或 14.15.x 或最新版本就好。

安裝 Angular CLI

裝完 Node.js 之後,我們就可以透過 npm 來裝 Angular CLI 了,直接輸入 npm 指令
npm install -g @angular/cli

第一次裝可能會久一點,裝完之後我們就可以使在命令提示字元(command line)使用 Angular 的命令,首先我們來來檢查一下版本
ng version
https://ithelp.ithome.com.tw/upload/images/20210924/20140664clmMIBXXmX.png

安裝 VS Code

裝完之後,我們要來裝寫 Angular 程式的 IDE,筆者選擇 VS Code,因為裝完一些擴充功能(Extension)之後,開發體驗極佳,而且不只能寫 Angular,任何主流語言只要下載對應的擴充套件,全都可以寫。請直接開傳送門下載安裝。

建立新的 Angular 專案

再來就把命令提示字元跳到一個順眼的資料夾,然後建立一個新的 Angular 專案
cd D:/ironman
ng new ironman-frontend

建立新專案的時候,Angular CLI 會問我們幾個問題:

  1. Would you like to add Angular routing? 要不要加入 Angular 的路由功能
    Y
  2. Which stylesheet format would you like to use? 要使用哪種樣式框架
    用鍵盤選 CSS

接著,就等 Angular 幫我們把必要的 npm 套件裝好,裝好之後,讓命令提示字元進入剛剛建立的專案資料夾,然後用 VSCode 把 Angular 專案打開。
cd ./ironman-frontend
code .

請注意 VS Code 的指令(code)後面有一個點(.)

接著,我們要讓 VS Code 飛起來。在左側的功能列點一下擴充功能的按鈕 https://ithelp.ithome.com.tw/upload/images/20210924/20140664qq9edrFAaI.png,然後蒐尋保哥的 Angular Extension Pack。保哥的擴充包整合了非常多好用的功能,是目前寫 Angular 最好用的擴充功能整合包,沒有之一!
https://ithelp.ithome.com.tw/upload/images/20210924/20140664a5Zl3We0Fw.png

第一個 Angular App

前置作業終於都告一段落了!現在,我們就直接來執行我們的 Angular App 吧!在命令提示字元輸入
ng serve -o
讓 Angular CLI 幫我們編譯並執行我們的 app, -o 參數可以自動打開瀏覽器並連到我們的 app。

VS Code 按 Ctrl + ` 也能叫出 power shell 或 git bash 命令列,也能在這邊操作 ng 指令,但是三不五時就會當掉,所以筆者還是建議另外開一個命令提示字元,專門跑 ng serve

Tada~~~~ 一個預設的 Angular 頁面就好了~~~
https://ithelp.ithome.com.tw/upload/images/20210924/201406647Gu2b6tyPn.png

我們來簡單看一下左側檔案瀏覽器中的 Angular 的專案架構,不過由於 Angular 框架非常完整,本系列文沒有辦法完整的涵蓋所有東西,所以這邊只會挑本系列會用到的部分做說明,其他像是單元測試、相依套件(package.json)設定等等,請邦友另外再搜尋更專業的文章來學習。

  1. ./node_modules – 我們這個專案所依賴的 npm 模組們
  2. ./src/app – 自動產生的主頁模組,裡面包含這個模組必須的檔案,將來我們也會在這個資料夾裡面建立新的元件(component)
    • app.module.ts – 主頁模組的類別,管理模組的 import, export
    • app-routing.module.ts – app.module.ts 的路由模組,管理 app.module.ts 的路由
    • app.component.html – 主頁元件(component)的 HTML 骨架
    • app.component.ts – 主頁元件的邏輯處理
    • app. component.css – 主頁元件的 css
      (此時我們的模組只有一個 "app"元件(component),我們將在明天介紹 Angular 的元件)
  3. ./src/index.html – Angular App 的「實體」檔案。Angular App 只會有一個簡單的 index.html 實體,之後全部用編譯好的 JavaScript 操作 DOM 物件來完成整個網頁的運作。
  4. ./src/style.css 全域的 css 檔案

今天結束之前,筆者來分享幾個非常實用的 VS Code 快捷鍵(有些需要安裝保哥的 Extension Pack)

  • Ctrl + P –搜尋專案內的檔案並開啟
  • Ctrl + D - 以「目前所圈選的字串」在目前的檔案中搜尋並選取字串
  • Ctrl + ` - 開啟 powersell 或其他命令列介面
  • Ctrl + K (放開) + S - 儲存所有檔案
  • Ctrl + / - 註解/解除註解
  • Alt + 左/右箭頭 – 上一頁/下一頁```
  • Alt + U - 跳到目前正在編輯的元件的 ts 檔
  • Alt + I - 跳到目前正在編輯的元件的 css 檔
  • Alt + O - 跳到目前正在編輯的元件的 html 檔
  • Alt + P - 跳到目前正在編輯的元件的 spec.ts 檔(測試框架用的 ts)

明天,我們會繼續介紹 Angular 的 Module 與 Component


上一篇
[Day23] Angular 簡介
下一篇
[Day25] Angular 的 Module 與 Component
系列文
網站一條龍 - 從架站到前端33

尚未有邦友留言

立即登入留言