iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
5
Modern Web

Angular 深入淺出三十天系列 第 4

[Angular 深入淺出三十天] Day 03 - 開發工具與環境建置

「原來如此!好像很厲害!!」聽完我的介紹後,Wayne 一副饒有興致的樣子。

「對呀!想不想學阿?!我教你!」看到 Wayne 這麼有興趣,當然就是要趁勢推他入坑啦,嘿嘿。

「好阿!那我們要從哪裡開始?」Wayne 邊說邊從他的背包裡拿出他的電腦。

「那就先從環境架設開始吧!我跟你說...」


Node.js 與 NPM

以前的前端套件大多數是函式庫的形式,每次引用的時候都是將事先到官網下載好的檔案引入,或是直接引入線上的連結。像是:

<!-- 線上連結 -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<!-- 檔案 -->
<script src="assets/js/lib/jquery.min.js"></script>

而在 Node.js 與其套件管理系統 NPM Node Package Manager) 的蓬勃發展下,現今的前端框架已大多是基於這套系統的架構上開發 (其他的套件本版管理系統如 yarn,但本系列文不會特別介紹) ,Angular 也不例外。所以首先要做的事就是先到官網下載並安裝 (本系列文分享的是最簡單的安裝方式)

Imgur

到了官網之後會看到如上圖所示的兩顆按鈕。LTS 是大多數人都在使用的版本;Current 則是目前最新的版本。點擊 LTS 的按鈕下載,然後一直按「下一步」即可。

安裝完成之後要怎麼檢查是否已經確實安裝完成呢?開啟你的終端機或命命列提示工具(找不到或不知道的朋友再麻煩你自行 Google),輸入:

node -v

如果輸入完有印出類似下圖的版本資訊,就表示你的電腦已經將 Node.js 裝好囉! (其實安裝之前也可以先試著輸入看看,搞不好你的電腦已經安裝過了,只是你不知道而已)

Imgur

裝完 Node.js 之後,接下來要裝的就是 NPM 了!等等,其實安裝 Node.js 的時候,其實也一併把 NPM 安裝好了 (Node.js 0.6.3 版之後就將 NPM 內建了) !要怎麼檢查是否已經確實安裝完成呢?跟 Node.js 的檢查方式類似,輸入:

npm -v

跟 Node.js 一樣,有看到類似下圖的版本資訊就表示你的電腦也已經將 NPM 裝好囉!

Imgur


Angular CLI

Angular CLI 是 Angular 的命令列工具。雖說是工具,但我個人覺得,如果 Angular 沒有了它,Angular 都不 Angular 了!

還記得我剛剛開始接觸 AngularJS 以及相關環境建置的套件如 WebpackGulpKarmaProtractor 的時候,光是將這些東西組裝起來,令其能夠在我改了程式碼之後自動刷新頁面、下了指令可以幫我將程式碼打包起來等等這些事情,就讓我足足花了一個禮拜的時間才完成! (對不起我太遜了,嗚嗚!) 那時我心裡還想說:哇靠!前端怎麼變得這麼難?!這下腫了。直到我遇見了 Angular CLI 才知道,原來這一切其實可以這麼簡單!

事不宜遲,讓我們趕快來安裝 Angular CLI 吧!!安裝的方式非常簡單,在終端機中輸入以下指令:

npm install -g @angular/cli

等它跑完就安裝完成囉!!想要檢查是否有確實安裝完成的話,一樣在終端機中輸入:

ng -v

如果終端機有印出類似下圖的版本資訊,那代表 Angular CLI 也已經安裝完成囉!我們可以開始建立我們第一個 Angular 專案了!!

Imgur

如果讀者輸入 ng -v 沒有看到類似上圖的版本資訊的話,請改為輸入 ng version 或是 ng vng -v 這個指令已在某個版本移除了(貌似是 Angular 7)

在開始建立前,建議先將你終端機的當前目錄移動到你想要的位置之後,再輸入以下指令:

ng new HelloAngular

輸入完之後,一樣讓子彈飛一陣子,等它跑完之後,先輸入以下指令進入我們剛剛新建的專案目錄裡:

cd HelloAngular

接著再輸入:

ng serve

一樣等它跑完之後,打開瀏覽器並在網址列輸入 localhost:4200 後,應該會看到類似下圖的畫面。

Imgur

當你看到這個畫面時,恭喜!!你就成功安裝完環境並建立了第一個 Angular 專案!!有沒有一種「我根本沒有做什麼事阿?!從安裝 Node.js 開始,我只打了七行指令而已耶?!」的感覺?!

沒錯!!這就是 Anuglar 想要讓你知道的事,環境與專案的建置就是這麼簡單!!當我建立完我第一個 Angular 專案的時候,我只有一個念頭:

「我之前花的那一個禮拜究竟是為了什麼?!」


VSCode

專案建立好了,接下來要開始 Coding 了!!我好興奮阿!!!!!

等一下!Coding 前沒有趁手的編輯器怎麼行呢?雖然很多人都已經有在用像是 Notepad++ 、 Sublime、Atom 等等之類的純文字編輯器,但我還是要推一下微軟推出的這套編輯器:VSCdoe Visual Studio Code 。至於我為什麼推薦用 VSCode 呢?其實很多人都有寫過推坑的文章如:

所以在此我就不再贅述,趕快下載來用就對了!!

安裝完 VSCode 之後,一定要去下載一個叫做 Angular Extension Pack 的擴充套件。這個擴充套件是 Will 保哥將很多好用的 Angular 相關擴充套件都整合進一個擴充套件裡,只要安裝一個套件就能連帶安裝好其他相關套件,方便又好用!!


Augury

最後要安裝的工具叫做 Augury

我在上一篇文章有提到過,Augury 是 Angular 官方出版的開發者工具,透過 Chrome 或是 Firefox 的擴充功能來安裝。這套工具可以幫我們分析頁面中所用元件的狀態與方法。

安裝方式也很簡單,以 Chrome 來說,只要到線上應用程式商店之後,選擇擴充功能,在搜尋的文字框中輸入 Augury,即可找到並安裝。

Imgur

安裝完之後,就可以在瀏覽器的開發者工具裡看到 Augury 的標籤,並且透過 Augury 看到應用程式目前的狀態:

Imgur

如果有看到類似上圖的畫面,就表示 Augury 已經確實安裝完成囉!

錯誤更新記錄

  • 2019/05/28 11:20 - 非常感謝邦友 SuperMike 的提醒,增加 Angular Cli 指令的補充說明。

上一篇
[Angular 深入淺出三十天] Day 02 - 為什麼是 Angular?
下一篇
[Angular 深入淺出三十天] Day 04 - 資料夾結構說明
系列文
Angular 深入淺出三十天33

2 則留言

0
jimmychn
iT邦新手 4 級 ‧ 2018-12-03 12:59:48

您好!開始拜讀您的推文,並跟著做!到此篇時發現:

ng new HelloAngular 

後還有個選擇

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
> CSS
  SCSS   [ http://sass-lang.com   ]
  SASS   [ http://sass-lang.com   ]
  LESS   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]

不知道選哪一個好?我只好選 CSS ,因為沒學過其他的。。。
跑一堆畫面後出現如下:

'git' 不是內部或外部命令、可執行的程式或批次檔。

我還要安裝 git 嗎?

Leo iT邦新手 4 級‧ 2018-12-03 13:55:08 檢舉

Hi Jimmy,

後還有個選擇
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
CSS
SCSS [ http://sass-lang.com ]
SASS [ http://sass-lang.com ]
LESS [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
不知道選哪一個好?我只好選 CSS ,因為沒學過其他的。。。

是選 CSS 沒錯噢!如果你會其他工具再選其他的即可。

值得一提的是,這個選擇介面是 Angular CLI 7 才提供的功能,免緊張~~

'git' 不是內部或外部命令、可執行的程式或批次檔。
我還要安裝 git 嗎?

由於 Angular CLI 預設會建立含有 git 的專案,如果你的電腦沒有安裝或者是不需要的話,建立新專案的時候可以加上 --skip-git 的參數來讓 CLI 不要將此專案加入版控。例如:ng new SampleProject --skip-git

這個部分剛好在第四天的文章內有提到,詳情可以再參考一下第四天的文章介紹。

以上,如果還有任何的問題,歡迎留言跟我說噢! :)

0
SuperMike
iT邦新手 5 級 ‧ 2019-05-24 15:32:56

拜讀文章並實作中,補充一下,Angular CLI 7 查詢版本已經要改成 ng version 囉!

Leo iT邦新手 4 級‧ 2019-05-28 11:43:26 檢舉

Hi SuperMike,

非常感謝您的補充!已增加補充說明囉!^^

我要留言

立即登入留言