Angular Hello World 計劃

先決條件：

建立開發環境

在我們開始之前，我們必須設定我們的環境。

• 如果它們不在你的計算機上，請安裝 Node.js 和 npm 。

  通過在終端/控制檯視窗中執行 node -v 和 npm -v，驗證你是否至少執行節點 6.9.x 和 npm 3.xx。較舊的版本會產生錯誤，但較新的版本會很好。

• 使用 npm install -g @angular/cli 全域性安裝 Angular CLI 。

第 1 步：建立一個新專案

開啟終端視窗（或 Windows 中的 Node.js 命令提示符）。

我們使用以下命令建立一個新專案和框架應用程式：

ng new my-app

這裡的 ng 適用於 Angular。我們得到一個像這樣的檔案結構。

https://i.stack.imgur.com/0crAT.jpg

https://i.stack.imgur.com/zEtsK.jpg

有很多檔案。我們現在不必擔心所有這些問題。

第 2 步：提供應用程式

我們使用以下命令啟動應用程式：

ng serve

我們可以使用標誌 -open（或簡稱 -o），它將自動在 http://localhost:4200/上開啟我們的瀏覽器

ng serve --open

導航瀏覽器到地址 http://localhost:4200/。它看起來像這樣：

https://i.stack.imgur.com/Ssupw.jpg

第 3 步：編輯我們的第一個 Angular 元件

CLI 為我們建立了預設的 Angular 元件。這是根元件，它名為 app-root。人們可以在 ./src/app/app.component.ts 找到它。

開啟元件檔案並將標題屬性從 Welcome to app!! 更改為 Hello World。瀏覽器會自動使用修訂後的標題重新載入。

原始程式碼：注意 title = 'app';

https://i.stack.imgur.com/fVVWw.jpg

修改後的程式碼：改變了 title 的值。

https://i.stack.imgur.com/ycTba.jpg

同樣，./src/app/app.component.html 也有變化。

原始 HTML

https://i.stack.imgur.com/gwEFE.jpg

修改過的 HTML

https://i.stack.imgur.com/Sgpwj.jpg

請注意，將顯示 ./src/app/app.component.ts 中 title 的值。完成更改後，瀏覽器會自動重新載入。它看起來像這樣。

https://i.stack.imgur.com/4MWP9.jpg

為了找到更多的話題，請訪問此連結這裡 。