iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
1
Modern Web

從零開始的點餐系統,Google好棒棒系列 第 14

[Day14] 後台前端開發環境建置 - Angular

在網路上已經有許多的環境建置文章,在這裡還是依照慣例來個 Angular 的 Hello World!(提醒:這裡介紹的是 Angular 2 以上的版本,而非 AngularJS)

開發過程的好朋友 Angular CLI

安裝 Angular CLI 可以幫忙我們以下的事情

  • 建立應用程式骨架
  • 啟動 web server,預覽目前程式 (類似 live-server)
  • 執行測試
  • 建置與發佈
  • 產生 Angular 元素 (component、service、module、directive 等...)

接下來開始建置開發環境吧!安裝 Angular cli 之前,需要確保你的電腦有 Node.js 與 npm 套件管理器。

Node.js

通常在 Node.js 官網直接在下載 LTS 版的就可以。而在 Angular 的官網中,有提供此連結來參考當下的版本需求。

別擔心,我們不需要寫 Node.js

npm

基本上將 Node.js 安裝完後, npm 套件管理工具就一起安裝好了,可以用以下指令來檢查安裝版本。(參考開啟 command-line 方式)

node --version
npm --v

安裝 Anglar CLI

安裝以上兩個工具後,就可以開始安裝 Angular CLI 了。用 npm 指令來安裝最新版本的 Angular CLI

npm install -g @angular/cli

安裝完後,輸入已下指令確認版本

ng --version

使用 Angualr Cli 建立第一個專案

環境安裝好後,開啟新的 cmd ,輸入

ng new project1

接者會詢問你否加入 Angular routing

? Would you like to add Angular routing? (y/N)

這裡可以選就算選擇 N 在開發階段也可以用手動方式加入 Angular routing ,所以選哪個都可以

接著問你想用哪種樣式表,這裡選擇 SCSS,有關這些預處理器的資訊這邊就描述了

Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ]
  Less   [ http://lesscss.org                                                 ]
  Stylus [ http://stylus-lang.com                                             ]

Angular CLI 就會幫你在 project1 目錄下自動產生應用程式的骨架與一些檔案,並安裝一些必要的相依檔案。

啟動程式

在 cmd 輸入

cd project1

npm start

就可以啟動第一個應用程式了!

建議安裝的開發工具

Visual Studio Code

微軟推出的編輯器,非常好用。
為什麼好用?可參考新一代的編輯器 — VSCode這篇文章。

擴充套件

這邊推薦 Will 保哥 整理出來好用的 Angular 相關套件,只要安裝一個套件,就能把其他的套件一起安裝進來。

在編輯器左邊點擊方塊圖示,並搜尋 angular

下載 Angular Extension Pack,有興趣的人可以仔細看看各個套件的功能

Augury

此為 chorme 的擴充功能,可以在 chrome 線上應用程式商店下載到。 Augury 可以幫助開發者分析 Angular 程式頁面中所用元件的狀態與方法。

今日結語

大致說明了一些開發上會需要用到的工具,接下來會介紹 Angular 的世界裡會有哪些角色,這些角色有哪些職責,他們是如何合作建構出一個應用程式的。


上一篇
[Day13] Go 常用的套件
下一篇
[Day15] Angular 主要概念 - 模組介紹篇
系列文
從零開始的點餐系統,Google好棒棒30

尚未有邦友留言

立即登入留言