前言

本系列文章由一名懵懂無知的前端初學者所撰寫，文章內容若有錯誤、誤植，也敬請不吝指教。

我們先來聊聊前端吧，在過去開發前端，基本上就是寫網頁類型的應用為主，時至今日，行動裝置的興起，RWD 、Web App 的出現讓前端需求越來越多元，前端不再是網頁應用的特權，在這樣的發展下，我們需要一套規範，於是在 Html5 、 ECMAscript 等新的標準出現後，誕生了幾套大家可能常聽到的開發框架，其中以 Vue.js 、 Angular 、React 這三套框架最受歡迎，有了這些框架的輔助，可以讓我們更有效率的完成我們的專案，更容易踏入前端這個領域，並且有一套開發的原則。

那麼本系列我們就拿Angular作為範例，一步步建立一個屬於自己的Web應用。前端免不了就是圍繞在 CSS 、 javascript (ECMAscript)、 HTML 這三個東西。若你沒有上述這些技能的基礎，歡迎你跟我一起從零開始。

好了，廢話真多。開始吧!

安裝npm

請到node.js官網下載並安裝node.js。

這邊可以看到除了node.js，npm也會一併被安裝，並且會幫我們把路徑加到環境變數中。

node.js是個執行環境，讓javascript也能開發一些後端的應用，你可以local端執行javascript的程式。
以下是一個簡單的範例：

// Hello.js

const hello ='Hello world'
console.log(hello)

這邊我的環境是Windows 10，我使用command line，用 type 這個指令查看Hello.js 這個檔案的內容，再用node 指令執行這個.js檔，於是就印出了Hello world的字樣。有興趣的朋友，可以下 node -h 這個命令研究更多功能，這邊不多加贅述。

我們的主角是node.js附帶的套件管理工具npm。
npm是一個蠻方便的套件管理工具，它也可以用來建立專案。由npm建立的專案，資料夾中會有一個package.json檔案，讓我們移植專案更加方便，這個以後再談。

首先輸入下面這個指令，依照撰文時最新的官方文件，確認node版本在10.9.0以上：

node -v

安裝 Angular CLI

接著用npm 安裝 Angular CLI，記得下參數 -g，意思是global，這樣你才能在這台電腦的任何位置都使用Angular CLI，否則預設只會安裝在你目前的資料夾。

npm install -g @angular/cli

Angular CLI會是之後非常常用的工具，建立專案、建立元件、開測試伺服器...等，都要透過Angular CLI來進行。

安裝完之後，我們下 ng help 這個指令，看看有哪些功能:

ng help

功能非常的多，我們先不深入探討，有用到該功能時再研究即可。

我們可以用下面的指令，確認Angular的版本:

ng v

安裝編輯器- VSCode

請到這裡下載並安裝VSCode。
VSCode 是一個非常方便的開發環境，並且有相當多的extensions可用，當然你要用Vim我也不反對。

建立專案

安裝完上述的工具後，我們可以開始建立第一個Angular APP了。

找好一個資料夾，開啟command line，並使用ng new這個指令建立專案：

ng new <APP-name>

的地方可以填入任何你想要的名字，記得不要有中文，以免產生不必要的麻煩，也不要傻傻地就填入。我這邊的範例是 ng new Sponge-WebSite。

接著Angular CLI會問兩個問題，都先按Enter，採用預設設定即可。接下來會建立很多檔案，請耐心等候。

安裝完後，移動到我們的專案目錄：

cd <APP-name>

cd 這個指令用在切換目錄，是change directory的縮寫。

下指令ng serve 開啟測試伺服器，參數 --open會自動幫你開啟瀏覽器以及剛剛建立的網站頁面。預設會開在localhost，也就是本機，4200這個port。對localhost很陌生的朋友可以參考Wiki，進一步的了解。

我目前的Angular版本是8.2.2，較新版本的Angular，頁面可能會有些不一樣，不過這不是甚麼太大的問題。

ng serve --open

看到這個畫面，就表示成功了，收工！