Angular 2 快速指南

Angular 2 - 概述

Angular JS 是一個基於 JavaScript 構建的開源框架。它由 Google 的開發人員構建。該框架用於克服在處理單頁應用程式時遇到的障礙。此外，在構建框架時，測試被視為一個關鍵方面。確保框架易於測試。該框架的初始版本於 2010 年 10 月釋出。

Angular 2 的特性

以下是 Angular 2 的主要特性：

元件 - Angular 的早期版本側重於控制器，但現在已將重點轉移到使用元件而不是控制器。元件有助於將應用程式構建成多個模組。這有助於在一段時間內更好地維護應用程式。
TypeScript - Angular 的新版本基於 TypeScript。它是 JavaScript 的超集，由微軟維護。
服務 - 服務是一組可以由應用程式的不同元件共享的程式碼。因此，例如，如果您有一個從資料庫獲取資料的元件，您可以將其作為共享服務，可以在多個應用程式中使用。

此外，Angular 2 具有更好的事件處理能力、強大的模板以及對移動裝置的更好支援。

Angular 2 的組成部分

Angular 2 具有以下元件：

模組 - 用於將應用程式分解成邏輯程式碼塊。每個程式碼塊或模組都設計為執行單一任務。
元件 - 可用於將模組組合在一起。
模板 - 用於定義 Angular JS 應用程式的檢視。
元資料 - 可用於向 Angular JS 類新增更多資料。
服務 - 用於建立可以在整個應用程式中共享的元件。

我們將在本教程後續章節中詳細討論所有這些元件。

Angular 的官方網站是 https://angular.io/ 該網站包含有關 Angular 2 的所有資訊和文件。

Angular 2 - 環境

要開始使用 Angular 2，您需要安裝以下關鍵元件。

Npm - 稱為節點包管理器，用於處理開源儲存庫。Angular JS 作為框架依賴於其他元件。並且可以使用npm 下載這些依賴項並將它們附加到您的專案中。
Git - 這是一個原始碼軟體，可用於從github angular 網站獲取示例應用程式。
編輯器 - 有許多編輯器可用於 Angular JS 開發，例如 Visual Studio code 和 WebStorm。在本教程中，我們將使用 Visual Studio code，它可以從微軟免費獲得。

npm 安裝

現在讓我們看看安裝 npm 的步驟。npm 的官方網站是 https://www.npmjs.com/

步驟 1 - 轉到網站中的“npm 入門”部分。

步驟 2 - 在下一個螢幕中，根據作業系統選擇要下載的安裝程式。為了進行此練習，請下載 Windows 64 位版本。

步驟 3 - 啟動安裝程式。在初始螢幕中，單擊“下一步”按鈕。

步驟 4 - 在下一個螢幕中，接受許可協議並單擊“下一步”按鈕。

步驟 5 - 在下一個螢幕中，選擇安裝的目標資料夾並單擊“下一步”按鈕。

步驟 6 - 在下一個螢幕中選擇元件並單擊“下一步”按鈕。您可以接受預設安裝的所有元件。

步驟 7 - 在下一個螢幕中，單擊“安裝”按鈕。

步驟 8 - 安裝完成後，單擊“完成”按鈕。

步驟 9 - 要確認安裝，在命令提示符下，您可以發出命令 npm version。您將獲得 npm 的版本號，如以下螢幕截圖所示。

Visual Studio Code 的安裝

以下是 Visual Studio Code 的功能：

與 Visual Studio 的實際版本相比，它是一個輕量級的編輯器。
可用於 Clojure、Java、Objective-C 和許多其他語言的編碼。
內建 Git 擴充套件。
內建 IntelliSense 功能。
更多開發擴充套件。

Visual Studio code 的官方網站是 https://vscode.com.tw/

步驟 1 - 下載完成後，請按照安裝步驟操作。在初始螢幕中，單擊“下一步”按鈕。

步驟 2 - 在下一個螢幕中，接受許可協議並單擊“下一步”按鈕。

步驟 3 - 在下一個螢幕中，選擇安裝的目標位置並單擊“下一步”按鈕。

步驟 4 - 選擇程式快捷方式的名稱並單擊“下一步”按鈕。

步驟 5 - 接受預設設定並單擊“下一步”按鈕。

步驟 6 - 在下一個螢幕中單擊“安裝”按鈕。

步驟 7 - 在最後一個螢幕中，單擊“完成”按鈕以啟動 Visual Studio Code。

安裝 Git

Git 的一些關鍵功能包括：

輕鬆分支和合並程式碼。
提供在 Git 中使用多種程式碼流技術的可能性。
與其他 SCM 工具相比，Git 非常快。
提供更好的資料保證。
免費且開源。

Git 的官方網站是 https://git-scm.tw/

步驟 1 - 下載完成後，請按照安裝步驟操作。在初始螢幕中，單擊“下一步”按鈕。

步驟 2 - 選擇需要安裝的元件。您可以接受預設元件。

步驟 3 - 在下一步中，選擇程式快捷方式名稱並單擊“下一步”按鈕。

步驟 4 - 接受預設 SSH 可執行檔案並單擊“下一步”按鈕。

步驟 5 - 接受“以 Windows 樣式簽出，以 Unix 樣式提交結尾”的預設設定並單擊“下一步”按鈕。

步驟 6 - 現在，接受終端模擬器的預設設定並單擊“下一步”按鈕。

步驟 7 - 接受預設設定並單擊“下一步”按鈕。

步驟 8 - 您可以跳過實驗選項並單擊“安裝”按鈕。

步驟 9 - 在最後一個螢幕中，單擊“完成”按鈕以完成安裝。

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 包管理器啟動一個輕量級 Web 伺服器並啟動您的 Angular 應用程式。

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

部署

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

在本例中，它將在 Windows 上使用 Visual Studio Code 進行。現在讓我們看看兩個部署選項。

在 Windows 上的 NGNIX 伺服器上部署

請注意，您可以使用任何平臺上的任何 Web 伺服器來託管 Angular JS 應用程式。在本例中，我們將以 NGNIX 為例，它是一個流行的 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 - 接下來，安裝可用於執行 Angular 2 應用程式的 lite server。您可以透過發出以下命令來執行此操作 -

sudo npm install �save-dev lite-server

完成後，您將看到完成狀態。您無需擔心警告。

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

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

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

發出以下命令 -

sudo npm start

完成後，您將看到 URL。

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

在 Ubuntu 上部署 nginx

注意 - 您可以使用任何平臺上的任何 Web 伺服器來託管 Angular JS 應用程式。在本例中，我們將以 NGNIX 為例，它是一個流行的 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 應用程式。

Angular 2 - 模組

模組用於在 Angular JS 中為您的應用程式設定邏輯邊界。因此，與其將所有內容都編碼到一個應用程式中，不如將其構建成單獨的模組以分離應用程式的功能。讓我們檢查新增到演示應用程式的程式碼。

在 Visual Studio Code 中，轉到 app 資料夾中的 app.module.ts 資料夾。這稱為根模組類。

app.module.ts 檔案中將存在以下程式碼。

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

讓我們詳細瞭解每一行程式碼。

import 語句用於從現有模組匯入功能。因此，前 3 個語句用於將 NgModule、BrowserModule 和 AppComponent 模組匯入到此模組中。
NgModule 裝飾器用於稍後定義匯入、宣告和引導選項。
BrowserModule 是任何基於 Web 的 Angular 應用程式預設所需的。
bootstrap 選項告訴 Angular 在應用程式中引導哪個元件。

模組由以下部分組成 -

Bootstrap 陣列 - 用於告訴 Angular JS 需要載入哪些元件，以便可以在應用程式中訪問其功能。將元件包含在 bootstrap 陣列中後，需要宣告它們，以便可以在 Angular JS 應用程式中的其他元件中使用它們。
Export 陣列 - 用於匯出元件、指令和管道，然後可以在其他模組中使用它們。
Import 陣列 - 與 Export 陣列類似，Import 陣列可用於從其他 Angular JS 模組匯入功能。

Angular 2 - 架構

以下螢幕截圖顯示了 Angular 2 應用程式的結構。每個應用程式都由元件組成。每個元件都是應用程式功能的邏輯邊界。您需要擁有分層的服務，這些服務用於在元件之間共享功能。

以下是元件的結構。元件由以下部分組成 -

類 - 這就像一個包含屬性和方法的 C++ 或 Java 類。
元資料 - 用於裝飾類並擴充套件類功能。
模板 - 用於定義在應用程式中顯示的 HTML 檢視。

以下是一個元件示例。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   appTitle: string = 'Welcome';
}

每個應用程式都由模組組成。每個 Angular 2 應用程式都需要一個 Angular 根模組。然後，每個 Angular 根模組可以有多個元件來分離功能。

以下是一個根模組的示例。

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { }

每個應用程式都由功能模組組成，其中每個模組都具有應用程式的單獨功能。然後，每個 Angular 功能模組可以有多個元件來分離功能。

Angular 2 - 元件

元件是 Angular JS 應用程式的邏輯程式碼塊。元件包含以下內容 -

模板 - 用於呈現應用程式的檢視。這包含需要在應用程式中呈現的 HTML。此部分還包括繫結和指令。
類 - 這就像在任何語言（如 C）中定義的類。它包含屬性和方法。它包含用於支援檢視的程式碼。它在 TypeScript 中定義。
元資料 - 這是為 Angular 類定義的額外資料。它使用裝飾器定義。

現在讓我們轉到 app.component.ts 檔案並建立我們的第一個 Angular 元件。

讓我們將以下程式碼新增到檔案中，並詳細檢視每個方面。

類

類裝飾器。類在 TypeScript 中定義。類在 TypeScript 中通常具有以下語法。

語法

class classname {
   Propertyname: PropertyType = Value
}

引數

類名 - 要賦予類的名稱。
屬性名 - 要賦予屬性的名稱。
屬性型別 - 由於 TypeScript 是強型別的，因此您需要為屬性指定型別。
值 - 要賦予屬性的值。

示例

export class AppComponent {
   appTitle: string = 'Welcome';
}

在示例中，需要注意以下幾點 -

我們正在定義一個名為 AppComponent 的類。
export 關鍵字用於使元件可以在 Angular JS 應用程式中的其他模組中使用。
appTitle 是屬性的名稱。
屬性被賦予字串型別。
屬性被賦予值“Welcome”。

模板

這是需要在應用程式中呈現的檢視。

語法

Template: '
   <HTML code>
   class properties
'

引數

HTML 程式碼 - 這是需要在應用程式中呈現的 HTML 程式碼。
類屬性 - 這些是可以在模板中引用的類的屬性。

示例

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

在示例中，需要注意以下幾點 -

我們正在定義將在我們的應用程式中呈現的 HTML 程式碼
我們還引用了類中的 appTitle 屬性。

元資料

用於使用其他資訊裝飾 Angular JS 類。

讓我們看一下包含我們的類、模板和元資料的完整程式碼。

示例

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

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

在上面的示例中，需要注意以下幾點 -

我們使用 import 關鍵字從 angular/core 模組匯入“Component”裝飾器。
然後我們使用裝飾器來定義一個元件。
該元件有一個名為“my-app”的選擇器。這只不過是我們自定義的 html 標籤，可以在我們的主 html 頁面中使用。

現在，讓我們轉到程式碼中的 index.html 檔案。

讓我們確保 body 標籤現在包含對元件中自定義標籤的引用。因此，在上述情況下，我們需要確保 body 標籤包含以下程式碼 -

<body>
   <my-app></my-app>
</body>

輸出

現在，如果我們轉到瀏覽器並檢視輸出，我們會看到輸出按元件中的方式呈現。

Angular 2 - 模板

在關於元件的章節中，我們已經看到了以下模板的示例。

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

這稱為**內聯模板**。還有其他方法可以定義模板，可以透過 templateURL 命令來完成。在元件中使用它的最簡單方法如下。

語法

templateURL:
viewname.component.html

引數

**viewname** - 這是應用程式元件模組的名稱。

在 viewname 之後，需要將元件新增到檔名中。

以下是定義內聯模板的步驟。

**步驟 1** - 建立一個名為 app.component.html 的檔案。這將包含檢視的 html 程式碼。

**步驟 2** - 在上面建立的檔案中新增以下程式碼。

<div>{{appTitle}} Tutorialspoint </div>

這定義了一個簡單的 div 標籤，並引用了 app.component 類中的 appTitle 屬性。

**步驟 3** - 在 app.component.ts 檔案中，新增以下程式碼。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

從上面的程式碼中，唯一可以注意到的變化來自 templateURL，它提供了到位於 app 資料夾中的 app.component.html 檔案的連結。

**步驟 4** - 在瀏覽器中執行程式碼，您將獲得以下輸出。

從輸出中可以看出，模板檔案 (app.component.html) 檔案正在被相應地呼叫。

Angular 2 - 指令

**指令**是一種自定義 HTML 元素，用於擴充套件 HTML 的功能。Angular 2 具有以下作為 BrowserModule 模組的一部分呼叫的指令。

ngif
ngFor

如果您檢視 app.module.ts 檔案，您將看到以下程式碼和定義的 BrowserModule 模組。透過定義此模組，您將能夠訪問這兩個指令。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

現在讓我們詳細瞭解每個指令。

ngIf

**ngif** 元素用於在表示式計算結果為 true 時將元素新增到 HTML 程式碼中，否則它不會將元素新增到 HTML 程式碼中。

語法

*ngIf = 'expression'

如果表示式計算結果為 true，則新增相應的元素，否則不新增元素。

現在讓我們來看一個如何使用 *ngif 指令的示例。

**步驟 1** - 首先向名為 appStatus 的類新增一個屬性。這將是布林型別。讓我們將此值保留為 true。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

**步驟 2** - 現在在 app.component.html 檔案中，新增以下程式碼。

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

在上面的程式碼中，我們現在有了 *ngIf 指令。在指令中，我們正在評估 appStatus 屬性的值。由於屬性的值應計算結果為 true，這意味著 div 標籤應顯示在瀏覽器中。

新增上述程式碼後，我們將在瀏覽器中獲得以下輸出。

輸出

ngFor

**ngFor** 元素用於根據 For 迴圈的條件新增元素。

語法

*ngFor = 'let variable of variablelist'

變數是一個臨時變數，用於在**variablelist**中顯示值。

現在讓我們來看一個如何使用 *ngFor 指令的示例。

**步驟 1** - 首先向名為 appList 的類新增一個屬性。這將是可用於定義任何型別陣列的型別。

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

因此，我們正在將 appList 定義為一個具有 2 個元素的陣列。每個元素都有 2 個子屬性：ID 和 Name。

**步驟 2** - 在 app.component.html 中，定義以下程式碼。

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

在上面的程式碼中，我們現在使用 ngFor 指令迭代 appList 陣列。然後我們定義一個列表，其中每個列表項是陣列的 ID 和 name 引數。

新增上述程式碼後，我們將在瀏覽器中獲得以下輸出。

輸出

Angular 2 - 元資料

元資料用於修飾類，以便它可以配置類的預期行為。以下是元資料的不同部分。

**註釋** - 這些是類級別的裝飾器。這是一個數組，一個示例同時包含 @Component 和 @Routes 裝飾器。

以下是一個示例程式碼，它存在於 app.component.ts 檔案中。

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
})

component 裝飾器用於在 app.component.ts 檔案中將類宣告為元件。

**Design:paramtypes** - 這些僅用於建構函式，並且僅應用於 Typescript。
**propMetadata** - 這是應用於類屬性的元資料。

以下是一個示例程式碼。

export class AppComponent {
   @Environment(�test�)
   appTitle: string = 'Welcome';
}

這裡，@Environment 是應用於屬性 appTitle 的元資料，給定的值為“test”。

**引數** - 這是由建構函式級別的裝飾器設定的。

以下是一個示例程式碼。

export class AppComponent {
   constructor(@Environment(�test� private appTitle:string) { }
}

在上面的示例中，元資料應用於建構函式的引數。

Angular 2 - 資料繫結

雙向繫結是 Angular JS 中的一項功能，但從 Angular 2.x 開始已從 Angular 中移除。但是現在，由於 Angular 2 中類的事件，我們可以繫結到 AngularJS 類中的屬性。

假設您有一個具有類名稱、具有型別和值的屬性的類。

export class className {
   property: propertytype = value;
}

然後您可以將 html 標籤的屬性繫結到類的屬性。

<html tag htmlproperty = 'property'>

然後將屬性的值分配給 html 的 htmlproperty。

讓我們來看一個如何實現資料繫結的示例。在我們的示例中，我們將檢視顯示影像，其中影像源將來自我們類中的屬性。以下是實現此目的的步驟。

**步驟 1** - 下載任意 2 張影像。對於此示例，我們將下載下面顯示的一些簡單影像。

**步驟 2** - 將這些影像儲存在 app 目錄中名為**Images**的資料夾中。如果 Images 資料夾不存在，請建立它。

**步驟 3** - 在 app.component.ts 中新增以下內容，如下所示。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "url": 'app/Images/One.jpg'
   },

   {
      "ID": "2",
      "url": 'app/Images/Two.jpg'
   } ];
}

**步驟 4** - 在 app.component.html 中新增以下內容，如下所示。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

在上面的 app.component.html 檔案中，我們正在訪問類中屬性的影像。

輸出

上述程式的輸出應如下所示 -

Angular 2 - 使用 HTTP 的 CRUD 操作

我們將在本章中研究的基本 CRUD 操作是從 Web 服務中讀取資料，使用 Angular 2。

示例

在此示例中，我們將定義一個數據源，它是一個簡單的產品**json**檔案。接下來，我們將定義一個服務，該服務將用於從**json**檔案中讀取資料。然後接下來，我們將在我們的主要 app.component.ts 檔案中使用此服務。

**步驟 1** - 首先讓我們在 Visual Studio Code 中定義我們的 product.json 檔案。

在 products.json 檔案中，輸入以下文字。這將是從 Angular JS 應用程式中獲取的資料。

[{
   "ProductID": 1,
   "ProductName": "ProductA"
},

{
   "ProductID": 2,
   "ProductName": "ProductB"
}]

**步驟 2** - 定義一個介面，它將是類定義，用於儲存來自 products.json 檔案的資訊。建立一個名為 products.ts 的檔案。

**步驟 3** - 在檔案中插入以下程式碼。

export interface IProduct {
   ProductID: number;
   ProductName: string;
}

上述介面將 ProductID 和 ProductName 定義為介面的屬性。

**步驟 4** - 在 app.module.ts 檔案中包含以下程式碼 -

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HttpModule } from '@angular/http';

@NgModule ({
   imports:      [ BrowserModule,HttpModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

**步驟 5** - 在 Visual Studio Code 中定義 products.service.ts 檔案

**步驟 6** - 在檔案中插入以下程式碼。

import { Injectable } from '@angular/core';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import { IProduct } from './product';

@Injectable()
export class ProductService {
   private _producturl='app/products.json';
   constructor(private _http: Http){}
   
   getproducts(): Observable<IProduct[]> {
      return this._http.get(this._producturl)
      .map((response: Response) => <IProduct[]> response.json())
      .do(data => console.log(JSON.stringify(data)));
   }
}

關於上述程式，需要說明以下幾點。

import {Http, Response} from '@angular/http' 語句用於確保可以使用 http 函式從 products.json 檔案中獲取資料。
以下語句用於使用 Reactive 框架，該框架可用於建立 Observable 變數。Observable 框架用於檢測 http 響應中的任何更改，然後可以將其傳送回主應用程式。

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

類中的語句 private _producturl = 'app/products.json' 用於指定資料來源的位置。如果需要，它還可以指定 Web 服務的位置。
接下來，我們定義一個 Http 型別的變數，它將用於獲取來自資料來源的響應。
從資料來源獲取資料後，我們使用 JSON.stringify(data) 命令將資料傳送到瀏覽器的控制檯。

**步驟 7** - 現在在 app.component.ts 檔案中，放置以下程式碼。

import { Component } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './products.service';
import { appService } from './app.service';
import { Http , Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component ({
   selector: 'my-app',
   template: '<div>Hello</div>',
   providers: [ProductService]
})

export   class   AppComponent  {
   iproducts: IProduct[];
   constructor(private _product: ProductService) {
   }
   
   ngOnInit() : void {
      this._product.getproducts()
      .subscribe(iproducts => this.iproducts = iproducts);
   }
}

這裡，程式碼中的主要內容是 subscribe 選項，它用於偵聽 Observable getproducts() 函式以偵聽來自資料來源的資料。

現在儲存所有程式碼並使用**npm**執行應用程式。轉到瀏覽器，我們將看到以下輸出。

在控制檯中，我們將看到從 products.json 檔案中檢索到的資料。

Angular 2 - 錯誤處理

Angular 2 應用程式可以選擇錯誤處理。這是透過包含 ReactJS catch 庫，然後使用 catch 函式來完成的。

讓我們看看錯誤處理所需的程式碼。此程式碼可以新增到使用 http 進行 CRUD 操作的章節頂部。

在 product.service.ts 檔案中，輸入以下程式碼 -

import { Injectable } from '@angular/core'; 
import { Http , Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/catch'; 
import { IProduct } from './product';  

@Injectable() 
export class ProductService { 
   private _producturl = 'app/products.json'; 
   constructor(private _http: Http){}  

   getproducts(): Observable<IProduct[]> { 
      return this._http.get(this._producturl) 
      .map((response: Response) => <IProduct[]> response.json()) 
      .do(data => console.log(JSON.stringify(data))) 
      .catch(this.handleError); 
   }  
   
   private handleError(error: Response) { 
      console.error(error); 
      return Observable.throw(error.json().error()); 
   } 
}

catch 函式包含到 Error Handler 函式的連結。
在錯誤處理程式函式中，我們將錯誤傳送到控制檯。我們還將錯誤拋回到主程式，以便執行可以繼續。

現在，每當您遇到錯誤時，它將被重定向到瀏覽器的錯誤控制檯。

Angular 2 - 路由

路由有助於根據使用者在主頁上選擇的選項將使用者引導到不同的頁面。因此，根據他們選擇的選項，將向用戶呈現所需的 Angular 元件。

讓我們看看在 Angular 2 應用程式中如何實現路由的必要步驟。

**步驟 1** - 在 index.html 檔案中新增基本引用標籤。

<!DOCTYPE html>
<html>
   <head>
      <base href = "/">
      <title>Angular QuickStart</title>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      
      <base href = "/">
      <link rel = "stylesheet" href = "styles.css">

      <!-- Polyfill(s) for older browsers -->
      <script src = "node_modules/core-js/client/shim.min.js"></script>
      <script src = "node_modules/zone.js/dist/zone.js"></script>
      <script src = "node_modules/systemjs/dist/system.src.js"></script>
      <script src = "systemjs.config.js"></script>

      <script>
         System.import('main.js').catch(function(err){ console.error(err); });
      </script>
   </head>

   <body>
      <my-app></my-app>
   </body>
</html>

**步驟 2** - 為應用程式建立兩個路由。為此，建立 2 個名為**Inventory.component.ts**和**product.component.ts**的檔案

**步驟 3** - 將以下程式碼放在 product.component.ts 檔案中。

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

@Component ({
   selector: 'my-app',
   template: 'Products',
})
export   class   Appproduct  {
}

**步驟 4** - 將以下程式碼放在 Inventory.component.ts 檔案中。

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

@Component ({
   selector: 'my-app',
   template: 'Inventory',
})
export class AppInventory  {
}

這兩個元件都沒有做任何花哨的事情，它們只是根據元件呈現關鍵字。因此，對於 Inventory 元件，它將向用戶顯示 Inventory 關鍵字。對於產品元件，它將向用戶顯示產品關鍵字。

**步驟 5** - 在 app.module.ts 檔案中，新增以下程式碼 -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { Appproduct } from './product.component';
import { AppInventory } from './Inventory.component';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
   { path: 'Product', component: Appproduct },
   { path: 'Inventory', component: AppInventory },
];

@NgModule ({
   imports: [ BrowserModule,
   RouterModule.forRoot(appRoutes)],
   declarations: [ AppComponent,Appproduct,AppInventory],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

關於上述程式，需要說明以下幾點 -

appRoutes 包含 2 個路由，一個是 Appproduct 元件，另一個是 AppInventory 元件。
確保宣告這兩個元件。
RouterModule.forRoot 確保將路由新增到應用程式中。

**步驟 6** - 在 app.component.ts 檔案中，新增以下程式碼。

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

@Component ({
   selector: 'my-app',
   template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`
})
export class AppComponent  { }

關於上述程式，需要說明以下幾點 -

<router-outlet></router-outlet> 是根據使用者選擇的選項呈現元件的佔位符。

現在，儲存所有程式碼並使用 npm 執行應用程式。轉到瀏覽器，您將看到以下輸出。

現在，如果您單擊 Inventory 連結，您將獲得以下輸出。

新增錯誤路由

在路由中，還可以新增錯誤路由。如果使用者轉到應用程式中不存在的頁面，則可能會發生這種情況。

讓我們看看如何實現這一點。

**步驟 1** - 將 PageNotFound 元件新增為 NotFound.component.ts，如下所示 -

**步驟 2** - 將以下程式碼新增到新檔案中。

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

@Component ({  
   selector: 'my-app',  
   template: 'Not Found', 
})  
export class PageNotFoundComponent {  
}

**步驟 3** - 將以下程式碼新增到 app.module.ts 檔案中。

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Appproduct } from './product.component' 
import { AppInventory } from  './Inventory.component' 
import { PageNotFoundComponent } from  './NotFound.component' 
import { RouterModule, Routes } from '@angular/router';  

const appRoutes: Routes = [ 
   { path: 'Product', component: Appproduct }, 
   { path: 'Inventory', component: AppInventory }, 
   { path: '**', component: PageNotFoundComponent } 
];  

@NgModule ({ 
   imports: [ BrowserModule, 
   RouterModule.forRoot(appRoutes)], 
   declarations: [ AppComponent,Appproduct,AppInventory,PageNotFoundComponent], 
   bootstrap: [ AppComponent ] 
}) 

export class AppModule {
}

關於上述程式，需要說明以下幾點 -

現在我們增加了一條額外的路由路徑，名為 path: '**'，component: PageNotFoundComponent。因此，** 用於匹配任何不符合預設路由的路徑。這些路徑將被重定向到 PageNotFoundComponent 元件。

現在，儲存所有程式碼並使用 npm 執行應用程式。訪問瀏覽器，您將看到以下輸出。現在，當您訪問任何錯誤的連結時，您將獲得以下輸出。

Angular 2 - 導航

在 Angular 2 中，也可以執行手動導航。以下是步驟。

步驟 1 - 將以下程式碼新增到 Inventory.component.ts 檔案中。

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

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

關於上述程式，需要說明以下幾點 -

宣告一個 html 標籤，該標籤具有與點選事件關聯的 onBack 函式。因此，當用戶點選此標籤時，他們將被重定向回 Products 頁面。
在 onBack 函式中，使用 router.navigate 導航到所需的頁面。

步驟 2 - 現在，儲存所有程式碼並使用 npm 執行應用程式。訪問瀏覽器，您將看到以下輸出。

步驟 3 - 點選 Inventory 連結。

步驟 4 - 點選“返回產品”連結，您將獲得以下輸出，該輸出將帶您返回 Products 頁面。

Angular 2 - 表單

Angular 2 還可以設計表單，這些表單可以使用ngModel指令進行雙向繫結。讓我們看看如何實現這一點。

步驟 1 - 建立一個模型，即產品模型。建立一個名為products.ts的檔案。

步驟 2 - 將以下程式碼放入檔案中。

export class Product { 
   constructor ( 
      public productid: number, 
      public productname: string 
   ) {  } 
}

這是一個簡單的類，它有兩個屬性，productid 和 productname。

步驟 3 - 建立一個名為 product-form.component.ts 的產品表單元件，並新增以下程式碼 -

import { Component } from '@angular/core';
import { Product } from './products';

@Component ({
   selector: 'product-form',
   templateUrl: './product-form.component.html'
})

export class ProductFormComponent {
   model = new Product(1,'ProductA');
}

關於上述程式，需要注意以下幾點。

建立一個 Product 類的物件，並向 productid 和 productname 新增值。
使用 templateUrl 指定 product-form.component.html 的位置，該檔案將呈現元件。

步驟 4 - 建立實際的表單。建立一個名為 product-form.component.html 的檔案，並放置以下程式碼。

<div class = "container">
   <h1>Product Form</h1>
   <form>
      <div class = "form-group">
         <label for = "productid">ID</label>
         <input type = "text" class = "form-control" id = "productid" required
            [(ngModel)] = "model.productid" name = "id">
      </div>
      
      <div class = "form-group">
         <label for = "name">Name</label>
         <input type = "text" class = "form-control" id = "name"
            [(ngModel)] = "model.productname" name = "name">
      </div>
   </form>
</div>

關於上述程式，需要注意以下幾點。

ngModel指令用於將產品的物件繫結到表單上的各個元素。

步驟 5 - 將以下程式碼放入 app.component.ts 檔案中。

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

@Component ({
   selector: 'my-app',
   template: '<product-form></product-form>'
})
export class AppComponent { }

步驟 6 - 將以下程式碼放入 app.module.ts 檔案中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ProductFormComponent } from './product-form.component';

@NgModule ({
   imports: [ BrowserModule,FormsModule],
   declarations: [ AppComponent,ProductFormComponent],
   bootstrap: [ AppComponent ]
})
export class AppModule { }

步驟 7 - 儲存所有程式碼並使用 npm 執行應用程式。訪問瀏覽器，您將看到以下輸出。

Angular 2 - CLI

命令列介面 (CLI) 可用於建立 Angular JS 應用程式。它還有助於為應用程式建立單元測試和端到端測試。

Angular CLI 的官方網站是 https://cli.angular.io/

如果您點選“開始使用”選項，您將被重定向到 CLI 的 github 儲存庫 https://github.com/angular/angular-cli

現在讓我們看看我們可以使用 Angular CLI 做的一些事情。

安裝 CLI

注意 - 請確保系統上已安裝 Python。Python 可以從以下網站下載 https://python.club.tw/

第一步是安裝 CLI。我們可以使用以下命令執行此操作 -

npm install �g angular-cli

現在，在任何目錄中建立一個名為 angularCLI 的新資料夾，併發出上述命令。

完成後，CLI 將被安裝。

建立專案

可以使用以下命令建立 Angular JS 專案。

語法

ng new Project_name

引數

Project_name - 這是需要建立的專案的名稱。

輸出

無。

示例

讓我們執行以下命令來建立一個新專案。

ng new demo2

它將自動建立檔案並開始下載必要的 npm 包。

現在在 Visual Studio 程式碼中，我們可以開啟新建立的專案。

執行專案

要執行專案，您需要發出以下命令 -

ng server

正在執行的應用程式的預設埠號為 4200。您可以瀏覽到該埠並檢視正在執行的應用程式。

Angular 2 - 依賴注入

依賴注入是在執行時新增元件功能的能力。讓我們來看一個示例以及實現依賴注入的步驟。

步驟 1 - 建立一個單獨的類，該類具有可注入裝飾器。可注入裝飾器允許將此類的功能注入並用於任何 Angular JS 模組。

@Injectable() 
   export class classname {  
}

步驟 2 - 接下來，在您的 appComponent 模組或您要使用服務的模組中，您需要在 @Component 裝飾器中將其定義為提供程式。

@Component ({  
   providers : [classname] 
})

讓我們來看一個如何實現此功能的示例。

步驟 1 - 為服務建立一個名為 app.service.ts 的 ts 檔案。

步驟 2 - 將以下程式碼放入上面建立的檔案中。

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

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

關於上述程式，需要注意以下幾點。

Injectable 裝飾器從 angular/core 模組匯入。
我們正在建立一個名為 appService 的類，該類用 Injectable 裝飾器裝飾。
我們正在建立一個名為 getApp 的簡單函式，該函式返回一個名為“Hello world”的簡單字串。

步驟 3 - 在 app.component.ts 檔案中放置以下程式碼。

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

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

關於上述程式，需要注意以下幾點。

首先，我們在 appComponent 模組中匯入 appService 模組。
然後，我們將服務註冊為此模組中的提供程式。
在建構函式中，我們定義了一個名為 _appService 的變數，型別為 appService，以便可以在 appComponent 模組的任何位置呼叫它。
例如，在 ngOnInit 生命週期鉤子中，我們呼叫了服務的 getApp 函式並將輸出分配給 AppComponent 類的 value 屬性。

儲存所有程式碼更改並重新整理瀏覽器，您將獲得以下輸出。

Angular 2 - 高階配置

在本章中，我們將瞭解 Angular 2 專案的其他配置檔案。

tsconfig.json

此檔案用於提供有關 Angular JS 專案使用的 TypeScript 的選項。

{ 
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
   }
}

以下是關於以上程式碼的一些關鍵要點。

編譯的目標是 es5，這是因為大多數瀏覽器只能理解 ES5 typescript。
sourceMap 選項用於生成對映檔案，這些檔案在除錯時很有用。因此，在開發過程中，最好將此選項保留為 true。
Angular JS 裝飾器需要“emitDecoratorMetadata”: true 和“experimentalDecorators”: true。如果不存在，Angular JS 應用程式將無法編譯。

package.json

此檔案包含有關 Angular 2 專案的資訊。以下是檔案中常見的設定。

{
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation,
      supplemented with testing support",
   
   "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/ -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" 
         --killothers --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
   },

   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "angular-in-memory-web-api": "~0.2.4",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.7.4"
   },

   "devDependencies": {
      "concurrently": "^3.2.0",
      "lite-server": "^2.2.2",
      "typescript": "~2.0.10",
      "canonical-path": "0.0.2",
      "tslint": "^3.15.1",
      "lodash": "^4.16.4",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "@types/node": "^6.0.46",
      "@types/jasmine": "2.5.36"
   },
   "repository": {}
}

關於以上程式碼的一些關鍵要點 -

依賴項有兩種型別，第一種是依賴項，然後是開發依賴項。開發依賴項在開發過程中需要，而其他依賴項則需要執行應用程式。
“build:watch”: “tsc -p src/ -w”命令用於透過查詢 typescript 檔案中的更改在後臺編譯 typescript。

systemjs.config.json

此檔案包含 Angular JS 應用程式所需的系統檔案。這將載入所有必要的指令碼檔案，而無需向 html 頁面新增指令碼標籤。典型檔案將包含以下程式碼。

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config ({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      map: { 
         // our app is within the app folder 
         app: 'app',  
         
         // angular bundles 
         '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
         '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
         '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
         '@angular/platform-browser': 'npm:@angular/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 
            'npm:@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js', 
         '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
         '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
         '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 
            'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename 
         and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   
   }); 
})(this);

關於以上程式碼的一些關鍵要點 -

“npm:”：'node_modules/' 指示專案中所有 npm 模組所在的路徑。
app 的對映：“app”指示載入所有應用程式檔案所在的資料夾。

Angular 2 - 第三方控制元件

Angular 2 允許您使用任何第三方控制元件。一旦您決定要實現的控制元件，您需要執行以下步驟 -

步驟 1 - 使用 npm 命令安裝元件。

例如，我們將透過以下命令安裝 ng2-pagination 第三方控制元件。

npm install ng2-pagination --save

完成後，您將看到該元件已成功安裝。

步驟 2 - 將元件包含在 app.module.ts 檔案中。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {Ng2PaginationModule} from 'ng2-pagination';

@NgModule ({
   imports:      [ BrowserModule,Ng2PaginationModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

步驟 3 - 最後，在您的 app.component.ts 檔案中實現該元件。

import { Component } from '@angular/core';
import {PaginatePipe, PaginationService} from 'ng2-pagination';

@Component ({
   selector: 'my-app',
   template: '
      <ul>
         <li *ngFor = "let item of collection | paginate: {
            itemsPerPage: 5, currentPage: p }"> ... </li>
      </ul>
      <pagination-controls (pageChange) = "p = $event"></pagination-controls>
   '
})
export class AppComponent { }

步驟 4 - 儲存所有程式碼更改並重新整理瀏覽器，您將獲得以下輸出。

在上圖中，您可以看到影像已作為 One.jpg 和 two.jpg 儲存在 Images 資料夾中。

步驟 5 - 將 app.component.ts 檔案的程式碼更改為以下內容。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   
   appList: any[] = [{
      "ID": "1",
      "Name": "One",
      "url": 'app/Images/One.jpg'
   },
   {
      "ID": "2",
      "Name": "Two",
      "url": 'app/Images/two.jpg'
   } ];
}

關於以上程式碼，需要注意以下幾點。

我們正在定義一個名為 appList 的陣列，其型別為 any。這樣它就可以儲存任何型別的元素。
我們正在定義 2 個元素。每個元素都有 3 個屬性，ID、Name 和 url。
每個元素的 URL 是指向 2 張影像的相對路徑。

步驟 6 - 對 app/app.component.html 檔案（即您的模板檔案）進行以下更改。

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
      <img [src] = 'lst.url'> 
   </ul> 
</div>

關於上述程式，需要注意以下幾點 -

ngFor 指令用於遍歷 appList 屬性的所有元素。
對於每個屬性，它使用列表元素顯示影像。
然後，img 標籤的 src 屬性繫結到我們類中 appList 的 url 屬性。

步驟 7 - 儲存所有程式碼更改並重新整理瀏覽器，您將獲得以下輸出。從輸出中，您可以清楚地看到影像已被提取並在輸出中顯示。

Angular 2 - 資料顯示

在 Angular JS 中，在 HTML 表單中顯示類屬性的值非常容易。

讓我們舉一個例子，並更多地瞭解資料顯示。在我們的示例中，我們將檢視如何在 HTML 頁面中顯示我們類中各個屬性的值。

步驟 1 - 將 app.component.ts 檔案的程式碼更改為以下內容。

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

關於以上程式碼，需要注意以下幾點。

我們正在定義一個名為 appList 的陣列，其型別為字串。
我們正在將 3 個字串元素定義為陣列的一部分，它們是 Binding、Display 和 Services。
我們還定義了一個名為 TutorialName 的屬性，其值為 Angular 2。

步驟 2 - 對 app/app.component.html 檔案（即您的模板檔案）進行以下更改。

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

關於以上程式碼，需要注意以下幾點。

我們引用 TutorialName 屬性來告訴“我們 HTML 頁面中的教程名稱是什麼”。
我們使用陣列的索引值在 HTML 頁面中顯示陣列中的 3 個主題。

步驟 3 - 儲存所有程式碼更改並重新整理瀏覽器，您將獲得以下輸出。從輸出中，您可以清楚地看到資料根據類中屬性的值顯示。

另一個簡單的示例，即動態繫結，是使用 input html 標籤。它只是在 html 標籤中鍵入資料時顯示資料。

對 app/app.component.html 檔案（即模板檔案）進行以下更改。

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

關於以上程式碼，需要注意以下幾點。

[value] = 'username' − 用於將表示式 username 繫結到輸入元素的 value 屬性。
(input) = 'expression' − 這是將表示式繫結到輸入元素的 input 事件的宣告方式。
username = $event.target.value − 當 input 事件觸發時執行的表示式。
$event − Angular 在事件繫結中公開的表示式，其值為事件的有效負載。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

現在，在輸入框中輸入一些內容，例如“Tutorialspoint”。輸出將相應更改。

Angular 2 - 處理事件

在 Angular 2 中，也可以非常輕鬆地處理按鈕點選或任何其他型別的事件。事件從 html 頁面觸發，併發送到 Angular JS 類以進行進一步處理。

讓我們來看一個如何實現事件處理的例子。在我們的示例中，我們將檢視顯示一個點選按鈕和一個狀態屬性。最初，狀態屬性將為 true。當點選按鈕時，狀態屬性將變為 false。

步驟 1 - 將 app.component.ts 檔案的程式碼更改為以下內容。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

關於以上程式碼，需要注意以下幾點。

我們正在定義一個名為 status 的布林型別變數，其初始值為 true。
接下來，我們定義了 clicked 函式，該函式將在我們的 html 頁面上點選按鈕時呼叫。在函式中，我們將 Status 屬性的值從 true 更改為 false。

步驟 2 − 對 app/app.component.html 檔案（即模板檔案）進行以下更改。

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

關於以上程式碼，需要注意以下幾點。

我們首先只是顯示類 Status 屬性的值。
然後定義按鈕 html 標籤，其值為 Click。然後，我們確保按鈕的 click 事件觸發到我們類中的 clicked 事件。

步驟 3 − 儲存所有程式碼更改並重新整理瀏覽器，您將獲得以下輸出。

步驟 4 − 點選“Click”按鈕，您將獲得以下輸出。

Angular 2 - 資料轉換

Angular 2 擁有許多可用於轉換資料的過濾器和管道。

lowercase

用於將輸入轉換為全小寫。

語法

Propertyvalue | lowercase

引數

無

結果

屬性值將轉換為小寫。

示例

首先確保 app.component.ts 檔案中存在以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

接下來，確保 app/app.component.html 檔案中存在以下程式碼。

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | lowercase}}<br> 
   The second Topic is {{appList[1] | lowercase}}<br> 
   The third Topic is {{appList[2]| lowercase}}<br> 
</div>

輸出

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

uppercase

用於將輸入轉換為全大寫。

語法

Propertyvalue | uppercase

引數

無。

結果

屬性值將轉換為大寫。

示例

首先確保 app.component.ts 檔案中存在以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   TutorialName: string = 'Angular JS2'; 
   appList: string[] = ["Binding", "Display", "Services"]; 
}

接下來，確保 app/app.component.html 檔案中存在以下程式碼。

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | uppercase }}<br> 
   The second Topic is {{appList[1] | uppercase }}<br> 
   The third Topic is {{appList[2]| uppercase }}<br> 
</div>

輸出

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

slice

用於從輸入字串中切取一部分資料。

語法

Propertyvalue | slice:start:end

引數

start − 切取開始的起始位置。
end − 切取結束的起始位置。

結果

屬性值將根據起始和結束位置進行切取。

示例

首先確保 app.component.ts 檔案中存在以下程式碼

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

接下來，確保 app/app.component.html 檔案中存在以下程式碼。

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{appList[0] | slice:1:2}}<br> 
   The second Topic is {{appList[1] | slice:1:3}}<br> 
   The third Topic is {{appList[2]| slice:2:3}}<br> 
</div>

輸出

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

date

用於將輸入字串轉換為日期格式。

語法

Propertyvalue | date:�dateformat�

引數

dateformat − 輸入字串應轉換成的日期格式。

結果

屬性值將轉換為日期格式。

示例

首先確保 app.component.ts 檔案中存在以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newdate = new Date(2016, 3, 15);
}

接下來，確保 app/app.component.html 檔案中存在以下程式碼。

<div> 
   The date of this Tutorial is {{newdate | date:"MM/dd/yy"}}<br>  
</div>

輸出

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

currency

用於將輸入字串轉換為貨幣格式。

語法

Propertyvalue | currency

引數

無。

結果

屬性值將轉換為貨幣格式。

示例

首先確保 app.component.ts 檔案中存在以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 123; 
}

接下來，確保 app/app.component.html 檔案中存在以下程式碼。

<div> 
   The currency of this Tutorial is {{newValue | currency}}<br>      
</div>

輸出

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

percentage

用於將輸入字串轉換為百分比格式。

語法

Propertyvalue | percent

引數

無

結果

屬性值將轉換為百分比格式。

示例

首先確保 app.component.ts 檔案中存在以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 30; 
}

接下來，確保 app/app.component.html 檔案中存在以下程式碼。

<div>
   The percentage is {{newValue | percent}}<br> 
</div>

輸出

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

百分比管道的另一種變體如下所示。

語法

Propertyvalue | percent: �{minIntegerDigits}.{minFractionDigits}{maxFractionDigits}�

引數

minIntegerDigits − 最小整數位數。
minFractionDigits − 最小小數位數。
maxFractionDigits − 最大小數位數。

結果

屬性值將轉換為百分比格式

示例

首先確保 app.component.ts 檔案中存在以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   newValue: number = 0.3; 
}

接下來，確保 app/app.component.html 檔案中存在以下程式碼。

<div> 
   The percentage is {{newValue | percent:'2.2-5'}}<br>  
</div>

輸出

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

Angular 2 - 自定義管道

Angular 2 還具有建立自定義管道的功能。定義自定義管道的一般方法如下。

import { Pipe, PipeTransform } from '@angular/core';  
@Pipe({name: 'Pipename'}) 

export class Pipeclass implements PipeTransform { 
   transform(parameters): returntype { } 
}

其中，

'Pipename' − 管道的名稱。
Pipeclass − 分配給自定義管道的類的名稱。
Transform − 用於處理管道的函式。
Parameters − 傳遞給管道的引數。
Returntype − 管道的返回型別。

讓我們建立一個將兩個數字相乘的自定義管道。然後，我們將在元件類中使用該管道。

步驟 1 − 首先，建立一個名為 multiplier.pipe.ts 的檔案。

步驟 2 − 將以下程式碼放在上面建立的檔案中。

import { 
   Pipe, 
   PipeTransform 
} from '@angular/core';  

@Pipe ({ 
   name: 'Multiplier' 
}) 

export class MultiplierPipe implements PipeTransform { 
   transform(value: number, multiply: string): number { 
      let mul = parseFloat(multiply); 
      return mul * value 
   } 
}

關於以上程式碼，需要注意以下幾點。

我們首先匯入 Pipe 和 PipeTransform 模組。
然後，我們建立一個名為“Multiplier”的管道。
建立一個名為 MultiplierPipe 的類，該類實現 PipeTransform 模組。
然後，transform 函式將接收 value 和 multiple 引數，並輸出兩個數字的乘積。

步驟 3 − 在 app.component.ts 檔案中，放置以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   template: '<p>Multiplier: {{2 | Multiplier: 10}}</p>' 
}) 
export class AppComponent {  }

注意 − 在我們的模板中，我們使用了新的自定義管道。

步驟 4 − 確保在 app.module.ts 檔案中放置以下程式碼。

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

import {
   BrowserModule
} from '@angular/platform-browser';

import {
   AppComponent
} from './app.component';

import {
   MultiplierPipe
} from './multiplier.pipe'

@NgModule ({
   imports: [BrowserModule],
   declarations: [AppComponent, MultiplierPipe],
   bootstrap: [AppComponent]
})

export class AppModule {}

關於以上程式碼，需要注意以下幾點。

我們需要確保包含 MultiplierPipe 模組。
我們還需要確保它包含在 declarations 部分。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

Angular 2 - 使用者輸入

在 Angular 2 中，您可以使用 HTML 的 DOM 元素結構在執行時更改元素的值。讓我們詳細瞭解一些。

輸入標籤

在 app.component.ts 檔案中放置以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

關於以上程式碼，需要注意以下幾點。

[value] = 'username' − 用於將表示式 username 繫結到輸入元素的 value 屬性。
(input) = 'expression' − 這是將表示式繫結到輸入元素的 input 事件的宣告方式。
username = $event.target.value − 當 input 事件觸發時執行的表示式。
$event − Angular 在事件繫結中公開的表示式，其值為事件的有效負載。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

您現在可以輸入任何內容，相同的輸入將反映在 Input 控制元件旁邊的文字中。

點選輸入

在 app.component.ts 檔案中放置以下程式碼。

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

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

當您點選“Click Me”按鈕時，您將獲得以下輸出。

Angular 2 - 生命週期鉤子

Angular 2 應用程式會經歷一整套流程或生命週期，從啟動到應用程式結束。

下圖顯示了 Angular 2 應用程式生命週期中的整個流程。

以下是每個生命週期鉤子的描述。

ngOnChanges − 當資料繫結屬性的值發生變化時，將呼叫此方法。
ngOnInit − 在 Angular 首次顯示資料繫結屬性後，只要指令/元件初始化就會呼叫此方法。
ngDoCheck − 用於檢測和處理 Angular 無法或不會自行檢測的變化。
ngAfterContentInit − 在 Angular 將外部內容投影到元件檢視後，將呼叫此方法作為響應。
ngAfterContentChecked − 在 Angular 檢查投影到元件的內容後，將呼叫此方法作為響應。
ngAfterViewInit − 在 Angular 初始化元件的檢視和子檢視後，將呼叫此方法作為響應。
ngAfterViewChecked − 在 Angular 檢查元件的檢視和子檢視後，將呼叫此方法作為響應。
ngOnDestroy − 這是在 Angular 銷燬指令/元件之前的清理階段。

以下是如何實現一個生命週期鉤子的示例。在app.component.ts檔案中，放置以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

在上面的程式中，我們呼叫ngOnInit生命週期鉤子，專門說明this.values引數的值應設定為“Hello”。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

Angular 2 - 巢狀容器

在 Angular JS 中，可以將容器巢狀在彼此內部。外部容器稱為父容器，內部容器稱為子容器。讓我們來看一個如何實現此目標的示例。以下是步驟。

步驟 1 − 為子容器建立一個名為child.component.ts的ts檔案。

步驟 2 − 在上述步驟中建立的檔案中，放置以下程式碼。

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

@Component ({ 
   selector: 'child-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class ChildComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

以上程式碼將引數 this.values 的值設定為“Hello”。

步驟 3 − 在 app.component.ts 檔案中，放置以下程式碼。

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

import { 
   ChildComponent 
} from './child.component'; 

@Component ({ 
   selector: 'my-app', 
   template: '<child-app></child-app> ' 
}) 

export class AppComponent { }

在上面的程式碼中，請注意我們現在正在呼叫 import 語句來匯入child.component模組。此外，我們還將child.component中的<child-app>選擇器呼叫到我們的主元件。

步驟 4 − 接下來，我們需要確保子元件也包含在 app.module.ts 檔案中。

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

import { 
   BrowserModule 
} from '@angular/platform-browser';  

import { 
   AppComponent 
} from './app.component';  

import { 
   MultiplierPipe 
} from './multiplier.pipe' 

import { 
   ChildComponent 
} from './child.component';  

@NgModule ({ 
   imports: [BrowserModule], 
   declarations: [AppComponent, MultiplierPipe, ChildComponent], 
   bootstrap: [AppComponent] 
}) 

export class AppModule {}

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

Angular 2 - 服務

當需要向多個模組提供通用功能時，可以使用服務。例如，我們可以擁有一個可以在多個模組之間重用的資料庫功能。因此，您可以建立一個包含資料庫功能的服務。

建立服務時，需要執行以下關鍵步驟。

步驟 1 - 建立一個單獨的類，該類具有可注入裝飾器。可注入裝飾器允許將此類的功能注入並用於任何 Angular JS 模組。

@Injectable() 
   export class classname {  
}

步驟 2 - 接下來，在您的 appComponent 模組或您要使用服務的模組中，您需要在 @Component 裝飾器中將其定義為提供程式。

@Component ({  
   providers : [classname] 
})

讓我們來看一個如何實現此目標的示例。以下是涉及的步驟。

步驟 1 - 為服務建立一個名為 app.service.ts 的 ts 檔案。

步驟 2 - 將以下程式碼放入上面建立的檔案中。

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

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

關於上述程式，需要說明以下幾點。

Injectable 裝飾器從 angular/core 模組匯入。
我們正在建立一個名為 appService 的類，該類用 Injectable 裝飾器裝飾。
我們正在建立一個名為 getApp 的簡單函式，它返回一個名為“Hello world”的簡單字串。

步驟 3 − 在 app.component.ts 檔案中，放置以下程式碼。

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

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
}

關於上述程式，需要說明以下幾點。

首先，我們在 appComponent 模組中匯入 appService 模組。
然後，我們將服務註冊為該模組中的提供程式。
在建構函式中，我們定義了一個名為 _appService 的變數，型別為 appService，以便可以在 appComponent 模組的任何位置呼叫它。
例如，在 ngOnInit 生命週期鉤子中，我們呼叫了服務的 getApp 函式並將輸出分配給 AppComponent 類的 value 屬性。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。

列印頁面