Angular 2 - Hello World

---

---

有多種方法可以開始你的第一個 Angular JS 應用程式。

• 一種方法是從頭開始做所有事情，這是最困難的，而且不是首選方法。由於許多依賴關係，這種設定變得很困難。

• 另一種方法是使用 Angular Github 上的快速入門。這包含了開始所需的必要程式碼。這通常是所有開發人員選擇的方式，這也是我們將用於 Hello World 應用程式的方式。

• 最後一種方法是使用 Angular CLI。我們將在單獨的章節中詳細討論這一點。

以下是透過 github 啟動示例應用程式並執行的步驟。

步驟 1 - 訪問 github url - https://github.com/angular/quickstart

步驟 2 - 轉到你的命令提示符，建立一個專案目錄。這可以是一個空目錄。在我們的示例中，我們建立了一個名為 Project 的目錄。

步驟 3 - 接下來，在命令提示符中，轉到此目錄併發出以下命令以克隆本地系統上的 github 儲存庫。你可以透過發出以下命令來執行此操作 -

git clone https://github.com/angular/quickstart Demo 

這將在你的本地機器上建立一個示例 Angular JS 應用程式。

步驟 4 - 在 Visual Studio code 中開啟程式碼。

步驟 5 - 轉到命令提示符，並在你的專案資料夾中再次發出以下命令 -

npm install 

這將安裝 Angular JS 應用程式執行所需的所有必要軟體包。

完成後，你應該會看到一個帶有所有已安裝依賴項的樹狀結構。

步驟 6 - 轉到資料夾 Demo → src → app → app.component.ts。找到以下程式碼行 -

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

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

並將 Angular 關鍵字替換為 World，如下所示 -

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

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

在為 Angular 2 應用程式建立專案時，還會建立其他檔案。目前，你不需要關心其他程式碼檔案，因為這些檔案都包含在你的 Angular 2 應用程式中，並且對於 Hello World 應用程式不需要更改。

我們將在後續章節中詳細討論這些檔案。

注意 - Visual Studio Code 將自動編譯所有檔案併為所有 typescript 檔案建立 JavaScript 檔案。

步驟 7 - 現在轉到你的命令提示符併發出命令 npm start。這將導致 Node 包管理器啟動一個 lite web 伺服器並啟動你的 Angular 應用程式。

Angular JS 應用程式現在將在瀏覽器中啟動，你將在瀏覽器中看到“Hello World”，如下面的螢幕截圖所示。

部署

本主題重點介紹上述 Hello world 應用程式的部署。由於這是一個 Angular JS 應用程式，因此它可以部署到任何平臺。你的開發可以在任何平臺上進行。

在這種情況下，它將使用 Visual Studio code 在 Windows 上進行。現在讓我們看看兩個部署選項。

在 Windows 上的 NGNIX 伺服器上部署

請注意，你可以在任何平臺上使用任何 Web 伺服器來託管 Angular JS 應用程式。在這種情況下，我們將以 NGNIX 為例，NGINX 是一款流行的 Web 伺服器。

步驟 1 - 從以下網址下載 NGNIX Web 伺服器 http://nginx.org/en/download.html

步驟 2 - 解壓縮下載的 zip 檔案後，執行 nginx exe 元件，這將使 Web 伺服器在後臺執行。然後你將能夠在 url 中訪問主頁 – https://

步驟 3 - 在 Windows 資源管理器中轉到 Angular JS 專案資料夾。

步驟 4 - 複製 Project → Demo → node-modules 資料夾。

步驟 5 - 複製 Project → Demo → src 資料夾中的所有內容。

步驟 6 - 將所有內容複製到 nginx/html 資料夾。

現在轉到 URL – https://，你實際上會看到 hello world 應用程式，如下面的螢幕截圖所示。

在 Ubuntu 上設定

現在讓我們看看如何在 Ubuntu 伺服器上託管相同的 hello world 應用程式。

步驟 1 - 在你的 Ubuntu 伺服器上發出以下命令以安裝 nginx。

apt-get update

上述命令將確保系統上的所有軟體包都是最新的。

完成後，系統應該已更新。

步驟 2 - 現在，透過發出以下命令在 Ubuntu 伺服器上安裝 GIT。

sudo apt-get install git

完成後，GIT 將安裝在系統上。

步驟 3 - 要檢查git版本，請發出以下命令。

sudo git –version

步驟 4 - 安裝npm，它是 Ubuntu 上的節點包管理器。為此，請發出以下命令。

sudo apt-get install npm

完成後，npm將安裝在系統上。

步驟 5 - 要檢查npm版本，請發出以下命令。

sudo npm -version

步驟 6 - 接下來，安裝nodejs。這可以透過以下命令完成。

sudo npm install nodejs

步驟 7 - 要檢視 Node.js 的版本，只需發出以下命令。

sudo nodejs –version

步驟 8 - 建立一個專案資料夾並使用以下 git 命令下載 github 啟動專案。

git clone https://github.com/angular/quickstart Demo

這將下載本地系統上的所有檔案。

你可以瀏覽資料夾以檢視檔案是否已成功從 github 下載。

步驟 9 - 接下來為 npm 發出以下命令。

npm install

這將安裝 Angular JS 應用程式執行所需的所有必要軟體包。

完成後，你將看到所有依賴項都安裝在系統上。

步驟 10 - 轉到資料夾 Demo → src → app → app.component.ts。如果需要，請使用 vim 編輯器。找到以下程式碼行 -

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

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'Angular'; } 

並將 Angular 關鍵字替換為 World，如以下程式碼所示。

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

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'World'; } 

在為 Angular 2 應用程式建立專案時，還會建立其他檔案。目前，你不需要關心其他程式碼檔案，因為它們包含在你的 Angular 2 應用程式中，並且對於 Hello World 應用程式不需要更改。

我們將在後續章節中詳細討論這些檔案。

步驟 11 - 接下來，安裝 lite 伺服器，該伺服器可用於執行 Angular 2 應用程式。你可以透過發出以下命令來執行此操作 -

sudo npm install –save-dev lite-server

完成後，你將看到完成狀態。你不必擔心警告。

步驟 12 - 透過以下命令建立指向節點資料夾的符號連結。這有助於確保節點包管理器可以找到 nodejs 安裝。

sudo ln -s /usr/bin/nodejs /usr/bin/node

步驟 13 - 現在是時候透過 npm start 命令啟動 Angular 2 應用程式了。這將首先構建檔案，然後在之前步驟中安裝的 lite 伺服器中啟動 Angular 應用程式。

發出以下命令 -

sudo npm start

完成後，你將看到 URL。

如果你轉到 URL，你將看到 Angular 2 應用程式正在載入瀏覽器。

在 Ubuntu 上部署 nginx

注意 - 你可以在任何平臺上使用任何 Web 伺服器來託管 Angular JS 應用程式。在這種情況下，我們將以 NGINX 為例，NGINX 是一款流行的 Web 伺服器。

步驟 1 - 在你的 Ubuntu 伺服器上發出以下命令以安裝 nginx 作為 Web 伺服器。

sudo apt-get update

此命令將確保系統上的所有軟體包都是最新的。

完成後，系統應該已更新。

步驟 2 - 現在發出以下命令以安裝nginx。

apt-get install nginx

完成後，nginx 將在後臺執行。

步驟 3 - 執行以下命令以確認nginx服務是否正在執行。

ps –ef | grep nginx

現在預設情況下，nginx 的檔案儲存在 /var/www/html 資料夾中。因此，請提供必要的許可權以將你的 Hello World 檔案複製到此位置。

步驟 4 - 發出以下命令。

sudo chmod 777 /var/www/html

步驟 5 - 使用任何方法將專案檔案複製到 /var/www/html 資料夾。

現在，如果你瀏覽到 URL – http://192.168.1.200/index.html，你將找到 Hello world Angular JS 應用程式。