使用 Visual Studio Code 入門 Angular 5

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

在本文中，我們將使用Visual Studio Code構建一個Angular 5應用程式。我們將使用Angular CLI進行演示。

流程

• 安裝Node.js
• 安裝Angular CLI
• 建立我們的第一個Angular App
• 在瀏覽器中啟動Angular App
• 在網頁上顯示自定義訊息
• 結論

安裝Node.js

第一步是安裝Node.js。從此處開啟Node.js下載頁面。你會看到以下顯示內容。

根據機器的配置下載並安裝最新的LTS版本。Node LTS的當前版本是8.9.2。安裝Node.js也會在你的系統上安裝npm（node package manager）。

為了檢查機器安裝的node和npm版本，請在命令提示符中執行以下命令。

node -v 
npm -v

安裝了node和npm之後，下一步就是安裝Angular CLI。執行以下命令：

npm install -g @angular/cli

這將開始在你的機器上安裝Angular CLI。這需要一些時間，所以不妨坐下來，喝杯咖啡，放鬆一下。

建立你的第一個Angular App

Angular CLI安裝成功之後，開啟VS Code並導航到View >> Integrated Terminal。

這會開啟終端視窗，如下圖所示。

在終端視窗中鍵入以下命令序列。這些命令將建立一個名為“AngularDemo”的目錄，然後在該目錄內建立一個名稱為“myFirstApp”的Angular應用程式。

mkdir AngularDemo 
cd AngularDemo 
ng new myFirstApp

就是這樣。我們使用VS Code和Angular CLI建立了我們的第一個Angular app。

在瀏覽器中啟動你的Angular app

我們的Angular應用程式的名稱是myFirstApp，它在AngularDemo目錄內。

所以，我們將首先使用下面的命令導航到我們的應用程式。

cd AngularDemo 
cd myFirstApp

現在，我們使用以下命令啟動Web伺服器。

ng serve

執行此命令後，你可以看到它要求你在瀏覽器中開啟http://localhost:4200。所以，開啟機器上的任何瀏覽器，並導航到這個URL。現在，你可以看到下面的頁面。

在我們檢視這個應用程式的程式碼時，我們就這樣讓Web伺服器執行。通過導航到File >> New Window來開啟另一個VS Code視窗，然後在終端中執行以下命令集。

cd AngularDemo 
code .

這將在新的VS Code視窗中開啟我們應用程式的程式碼檔案。你可以在Solution Explorer中看到以下檔案結構

在網頁上顯示我們的自定義訊息

現在，我們需要將網頁上的訊息從“Welcome to app!”更改為“Welcome to the world of Angular 5!”。

要實現這個，開啟/src/app/app.component.ts檔案。

將AppComponent類中title屬性的值更改為“the world of Angular 5”。

import {  
    Component  
} from '@angular/core';  
@Component({  
    selector: 'app-root',  
    templateUrl: './app.component.html',  
    styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
    title = 'the world of Angular 5';  
}

只需儲存檔案並導航到http:// localhost:4200（請記住，Web伺服器仍在執行）。你可以看到更新後的網頁，如下所示。

Web伺服器正在執行時，如果你在Angular應用程式中進行了任何更改，則不需要重新整理該Web頁面。它將在你儲存應用程式程式碼檔案時自動更新。嘗試一下在不關閉瀏覽器的情況下，將標題字串更改為你選擇的任意自定義值，看看在你儲存應用程式時會發生什麼情況。

結論

我們已經學會了如何使用VS Code和Angular CLI建立我們的第一個Angular 5 app。我們還知道了如何通過更改類屬性在網頁上顯示自定義訊息。

程式設計快樂！