0%

Angular 筆記 - Angular CLI 安裝與基本認識

angular

簡介

Angular 是 Google 開發出來一款開源 JavaScript 框架,用來開發單一頁面應用程式(single page application, SPA)。目前已經到 Angular 10 版本,預計今年 11 月還會有 11 的版本釋出 ,第一版正名為 AngularJS ,而第 2 版後稱為 Angular。兩者架構差異很大,簡單來說 AngularJS 本身有些缺點,後來受到 React 的刺激後,Angular 便被開發出來與之抗衡。

Angular 採用 MVC 模式,涵蓋了 M、V、C/VM 等層面,不需要組合、評估其它技術就能完成大部分前端開發任務。這是因為她已經將各種技術封裝在框架中,隔離了瀏覽器的細節,讓你不用關心它的實現細節。此外所有需要使用的套件、模組 Angular 都已經幫你打包好了,不像是 React 或 Vue 要自己去架構模組。

引用內文

開發環境

  • win10 64bit
  • npm 6.12.1
  • node.js v12.13.1
  • Git 2.23.0.windows.1
  • vscode 1.48.0 x64

安裝前準備

使用 Angular 開發會需要安裝以下軟體:

  • Node.js
  • Git
  • Visual Studio Code

建立 Angular 專案

  • 新增一個資料夾。
  • 將路徑指向資料夾。
    cd F:/angular
  • 透過 npm 安裝 Angular CLI,輸入:
1
npm i -g @angular/cli

MAC

OS 後來改版後,目前遇到的狀況是,第一次建立 CLI,新增一個資料夾,然後要將指令改成

1
sudo npm i -g @angular/cli

i 就是 install 的意思,-g 是全域 global 的意思。

安裝後會出現以下訊息,輸入 y,就可以完成安裝,目前安裝版本為 10.0.6。

ngInstall

確認是否安裝成功,輸入 ng -v 就會得到下方畫面,就代表安裝成功並告知我有什麼命令可以使用。

angularVersion

開發好用套件大補帖

可以在 VSCode 擴充套件工具欄位中搜尋 angular,並在前幾名可以看到 Will 保哥開發的好用 Angular Extension Pack 套件。

will

如果是全新手要找 Angular 的開發套件,推薦可以使用此大補帖,便可以安裝基本所需的套件喔!已經有 11 萬下載人次了呢!

建立專案骨架

在剛剛建立好的目錄資料夾中,輸入以下指令:

1
ng new index

index 為專案名稱,可自訂義。

輸入後會問兩個問題:

install

  • 請問你想要新增 Angular Routor 嗎? Y
  • 哪個 stylesheet 是你想要使用的?SCSS

CSS 我習慣用 SCSS 預處理器編譯。

這時候看到骨架已經完成,但程式還在安裝,原因是 npm 正在做 install 的動作,安裝之後要開發的元件。

install finish

在將資料夾放到 VScode 中,會看到專案已建立完成。

project is complete

如何確認專案建置成功

因為剛剛我有新增專案名稱,所以要將路徑改成專案資料夾的名稱,
npmStart

剛剛看起來都建置完成,但如果跑不起來也是白搭,所以透過以下指令測試:

1
npm start

輸入完後會自己跑 npm serve,這時候都不用做任何事情。

MAC

要先啟動 npm,所以要先跑 npm install

question

跑完後會出現這段問題,就輸入 y 即可,跑一下子會得到一個 localhost 的位置,已下圖為例是 localhost:4200,把這段複製到網頁上即可。

localhost

如果看到以下畫面,就代表建置成功了!!

complete