[筆記][Angular 2][Angular 4] 學習筆記01--透過Angular-CLI建置第一個專案

在正式開始瞭解AngularJS之前,先透過Angular-CLI建立第一個專案,並簡單測試一下Hello Word,並說明如何使用Visual Studio Code開啟此專案,以及如何啟動開發模式,修改成Hello Word,藉以熟悉Visual Studio Code開發AngularJS 2的幾個基本操作。

緣起

在上一篇『[筆記]AngularJS 2 學習筆記00-緣起與開發環境建置』中,介紹的如何建置AngularJS 2的開發環境,如果您還沒有建立好開發環境,建議先參考上一篇的內容,建立好開發環境,再來看這一篇。

本篇說明如何使用Angular-CLI環境,建立AngularJS 2的開發專案,並說明如何使用Visual Studio Code開啟此專案,以及如何啟動開發模式,修改成Hello Word,藉以熟悉Visual Studio Code開發AngularJS 2的幾個基本操作。

透過ng new 建立專案

首先,在硬碟中,新增一個資料夾,用以存放後續練習的一些專案。由於之後經常會透過『Command模式』下指令,建議目錄的名稱不要太複雜。小喵就在D碟,建立一個AJ2的資料夾,在裡面,建立一個PJs的資料夾

接著,透過cmd開啟命令提示字元

進入 D:\AJ2\PJs,下以下指令

ng new MyFirst

接著會出現如下畫面,讓系統跑一下,建立『MyFirst』的專案

這動作要花一點時間,跑完後會出現如上畫面中下方Success的三句

此時專案就建立完成。

使用Visual Studio Code開啟MyFirst專案

要使用Visual Studio Code開啟MyFirst專案,只需要在D:\AJ2\PJs中,下以下的指令,即可用Visual Studio Code開啟MyFirst專案

Code MyFirst

如果前面一篇的開發環境安裝沒有問題,就會看到Visual Studio Code開啟了,並且開啟了MyFirst的專案,如下圖

如果您有安裝擴充套件『VSCode Icons』,您可以點選:檔案>喜好設定>檔案圖示佈景主題,選擇『VSCode Icons』。這樣,在Visual Studio的檔案總管所看到的,會依據不同的檔案類型(附檔名),顯示不同的圖示,如下圖:

嘗試執行

我們建立了專案,我們先試著把這個專案執行起來,請回到剛剛的命令視窗,進入MyFirst的資料夾並下如下的指令

D:\AJ2\PJs\MyFirst\ng serve

此時,會把這個專案編譯,並且跑起來,如下畫面:

此時,整個專案已經編譯過並且跑了起來,要看結果,請開啟瀏覽器(建議使用Chrome),並且瀏覽網址:http://localhost:4200

可以看到畫面顯示:『app works!』代表專案已經開啟。

資料夾的架構初覽

這裡介紹兩個比較重要的資料夾

  • src:所有相關的程式碼,在資料夾『src』裡面。
  • node_modules:這個資料夾就豐富了,下載了許許多多的功能模組,檔案超多(共25896個檔案),也很大(134MB)。日後用上的時候,再來介紹(其實小喵剛學,還不是很知道這些模組的用途)。未來如果要把專案放版控,這個資料夾的內容請『不要』放入版控中,有需要的時候,可以透過npm從網路抓回。

AngularJS 2的畫面結構

在AngularJS 2的世界中,可以視為將一個畫面,切分成許多大大小小的區塊所組成,而且大區塊包著中區塊,中區塊包著小區塊,一個個的區塊,稱之為Component,就像下面這樣:

最外層的App Component裡面分別包含了Head, Left, Foot, Content的Component,而Left Component中,又包含了Calendar Component,這樣一層一層的包下去。

而每個Component,基本上都包含了TypeScript檔, Html 檔, CSS樣式檔, 以及spec.ts的測試檔。例如:Head Component就像以下這樣:

在Src資料夾中,有個『index.html』,這是起始的頁面,而打開其內容,在<body>與</body>之間,有個

<app-root>Loading...</app-root>

這就是讀取AppComponent並將結果替代放在此。

再觀看src/app資料夾中的app.component.ts

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

選擇器(selector)為『app-root』,對應index.html的<body></body>中的『<app-root></app-root>』,就是以app-root的html tag為選取。選取器的規則同css, jQuery

  • 名稱(例如:app-root):對應『Html Tag』
  • 『.』:對應Class
  • 『#』:對應id

另外,『templateUrl』指出相關template的檔案位置,以及『styleUrls』指出CSS Style的檔案位置
這些設定,都可以透過Angular Cli幫忙產生,後續會再介紹,目前有基本概念即可。

而後面的class AppComponent則是Component的程式『類別』本體,附檔名為『ts』代表使用的是『TypeScript』的語法

這裡預設宣告了『title』的屬性,且預設值為「app works!」的字串。

 

app.component.html

再來觀看app.component.html這個檔案

<h1>
  {{title}}
</h1>

這個檔案是template檔,用來設定該component要呈現的html內容。從內容中觀察,設定的一個<h1>的Tag,而內容是{{title}}

在Templete中,可以直接透過雙大刮號『{{}}』來取用component類別中的東西,以這個為例,直接取用『title』的屬性並顯示在此。

 

在VS Code中開啟命令視窗

想要將目前產生的專案執行起來,可以這樣處理

首先,在VS Code中,按下『Ctrl + `』,這會在VS Code中,啟動一個Command的視窗,如下

他會開啟一個PowerShell的命令視窗,我們可以從這裡去下Angular-Cli的相關命令。命令視窗的右上角有個『+』號,可以開啟多個命令視窗,並利用下拉選單,來切換命令視窗。

執行

要將專案編譯並且執行起來,請在剛剛開啟的PowerShell命令視窗中,輸入以下指令

ng serve

接著,讓他編譯執行一下,出現如下的畫面

此時,您可以開啟瀏覽器,在網址中輸入『http://localhost:4200』,如果沒有意外,瀏覽器中就會出現『app works!』

這樣,專案就執行起來了。

 

修改Hello Word

我們開啟app.component.ts,修改title屬性的預設值,將原本的「app works!」改為「Hello World~Topcat!」

當按下儲存,會發現:

  1. 下方的命令視窗自動的話重新編譯修改的部分。
  2. 在編譯完成後,瀏覽器會自動重新整理。並顯示新的訊息:Hello World

全部儲存快速鍵自訂

從剛剛的練習中,當VS Code儲存時,『編譯-->網頁重新整理』這樣的過程會自動的執行。這對於開發過程中,還蠻方便的。我們一次的修改,可能會修改多個檔案,然後再進行「全部儲存」的動作。在VS Code中,儲存有快速鍵「Ctrl+S」。而快速儲存,可以透過滑鼠點選「檔案-->全部儲存」來進行。不過,如果有快速鍵,會更為方便,但這功能沒有預設快速鍵。

我們可以透過自訂快速鍵,來輔助後續想要「全部儲存」時,可以讓「全部儲存-->編譯-->網頁重新整理」一次到位

設定方式:檔案-->喜好設定-->鍵盤快速鍵

在畫面右邊,加上自訂的快速鍵設定如下:

// 將您的按鍵組合放入此檔案中以覆寫預設值
[
// Save All
{ "key": "ctrl+shift+s", "command": "workbench.action.files.saveAll" }

]

這樣就可以囉。

 

末記

此篇說明如何透過Angular Cli建立專案,並執行,以大致說明Angular 2的架構,是由一個個的Component組成,並且嘗試將執行的訊息,改成Hello World。後續,將逐一的介紹如何透過Angular Cli來開發畫面。

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)