教程：英雄之旅

的英雄之旅教程涵蓋角的基本面。

在本教程中，您將構建一個應用程序，幫助人員管理機構管理其穩定的英雄。

這個基本應用程序具有許多您希望在數據驅動的應用程序中找到的功能。它獲取并顯示英雄列表，編輯選定英雄的細節，并在不同的英雄數據視圖之間導航。

在本教程結束時，您將能夠執行以下操作：

使用內置的Angular指令來顯示和隱藏元素并顯示英雄數據列表。

創建角度組件以顯示英雄詳細信息并顯示一組英雄。

對只讀數據使用單向數據綁定。

添加可編輯字段以使用雙向數據綁定更新模型。

將組件方法綁定到用戶事件，例如擊鍵和單擊。

允許用戶從主列表中選擇英雄，并在詳細信息視圖中編輯該英雄。

使用管道格式化數據。

創建一個共享服務來組裝英雄。

使用路由在不同視圖及其組件之間導航。

你將學習足夠的Angular來開始并獲得Angular可以做任何你需要做的事情的信心。

完成所有教程步驟后，最終應用程序將如下所示?實例/?下載示例。

你將建立什么

以下是本教程引導的視覺概念，從“儀表板”視圖和最英雄的英雄開始：

您可以單擊儀表板上方的兩個鏈接（“儀表板”和“英雄”）在此儀表板視圖和英雄視圖之間導航。

如果單擊儀表板英雄“Magneta”，路由器將打開“英雄詳細信息”視圖，您可以在其中更改英雄的名稱。

單擊“返回”按鈕可返回儀表板。頂部的鏈接將您帶到任一主視圖。如果單擊“英雄”，應用程序將顯示“英雄”主列表視圖。

單擊其他英雄名稱時，列表下方的只讀迷你詳細信息將反映新選項。

您可以單擊“查看詳細信息”按鈕以深入查看所選英雄的可編輯詳細信息。

下圖捕獲了所有導航選項。

這是應用程序的實際應用：

Application Shell

首先，使用Angular CLI創建初始應用程序。在本教程中，您將修改并擴展該入門應用程序以創建Tour of Heroes應用程序。

在本教程的這一部分中，您將執行以下操作：

設置您的環境。

創建一個新工作區和初始應用程序項目。

提供申請。

對應用程序進行更改。

設置環境

要設置開發環境，請按照“?入門”中的說明進行操作：

先決條件

安裝Angular CLI

注意：您無需完成整個“入門”。完成“入門”的上述兩個部分后，即可設置您的環境。繼續下面創建Tour of Heroes工作區和一個初始應用程序項目。

創建新工作區和初始應用程序

您可以在Angular?工作區的上下文中開發應用程序。工作空間包含一個或多個項目的文件。項目是包含應用程序，庫或端到端（e2e）測試的文件集。在本教程中，您將創建一個新工作區。

要創建新工作區和初始應用程序項目：

確保您不在Angular工作區文件夾中。例如，如果您之前已創建“入門”工作區，請更改為該文件夾的父級。

運行CLI命令ng new并提供名稱angular-tour-of-heroes，如下所示：

ng?new?angular-tour-of-heroes

該ng new命令會提示您輸入有關要包含在初始應用程序項目中的功能的信息。按Enter或Return鍵接受默認值。

Angular CLI安裝必要的Angular?npm包和其他依賴項。這可能需要幾分鐘。

它還會創建以下工作空間和入門項目文件：

一個新工作區，其根文件夾名為angular-tour-of-heroes。

一個初始骨架應用程序項目，也稱為angular-tour-of-heroes（在src子文件夾中）。

端到端測試項目（在e2e子文件夾中）。

相關配置文件。

初始應用程序項目包含一個簡單的歡迎應用程序，可以運行。

提供應用程序

轉到工作區目錄并啟動應用程序。

cd?angular-tour-of-heroes ng?serve?--open

該ng serve命令構建應用程序，啟動開發服務器，監視源文件，并在對這些文件進行更改時重建應用程序。

該--open標志打開瀏覽器http://localhost:4200/。

您應該會在瀏覽器中看到該應用正在運行

角度組件

您看到的頁面是應用程序shell。shell由名為的Angular?組件控制AppComponent。

組件是Angular應用程序的基本構建塊。它們在屏幕上顯示數據，監聽用戶輸入，并根據該輸入采取措施。

更改應用程序

在您喜歡的編輯器或IDE中打開項目，然后導航到該src/app文件夾以對啟動器應用程序進行一些更改。

你會發現shell的實現AppComponent分布在三個文件中：

app.component.ts- 用TypeScript編寫的組件類代碼。

app.component.html- 用HTML編寫的組件模板。

app.component.css- 組件的私有CSS樣式。

更改應用程序標題

打開組件類文件（app.component.ts）并將title屬性的值更改為“英雄之旅”。

title?=?'Tour?of?Heroes';

打開組件模板文件（app.component.html）并刪除Angular CLI生成的默認模板。將其替換為以下HTML行。

{{title}}

雙花括號是Angular的插值綁定語法。此插值綁定title在HTML標頭標記內顯示組件的屬性值。

瀏覽器刷新并顯示新的應用程序標題。

添加應用程序樣式

大多數應用都力求在整個應用中保持一致的外觀。styles.css為此，CLI生成了一個空。將應用程序范圍的樣式放在那里。

以下是英雄styles.css之旅示例應用程序的摘錄。

/*?Application-wide?Styles?*/h1?{??color:?#369;??font-family:?Arial,?Helvetica,?sans-serif;??font-size:?250%;}h2,?h3?{??color:?#444;??font-family:?Arial,?Helvetica,?sans-serif;??font-weight:?lighter;}body?{??margin:?2em;}body,?input[type="text"],?button?{??color:?#888;??font-family:?Cambria,?Georgia;}/*?everywhere?else?*/*?{??font-family:?Arial,?Helvetica,?sans-serif;}

最終代碼審查

本教程的源代碼和完整的英雄之旅全局樣式可在實例/?下載示例。

以下是此頁面上討論的代碼文件。

SRC /應用程序/ app.component.ts

SRC /應用程序/ app.component.html

src / styles.css（摘錄）

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

{{title}}

//==== /*?Application-wide?Styles?*/ h1?{ ??color:?#369; ??font-family:?Arial,?Helvetica,?sans-serif; ??font-size:?250%; } h2,?h3?{ ??color:?#444; ??font-family:?Arial,?Helvetica,?sans-serif; ??font-weight:?lighter; } body?{ ??margin:?2em; } body,?input[type="text"],?button?{ ??color:?#888; ??font-family:?Cambria,?Georgia; } /*?everywhere?else?*/ *?{ ??font-family:?Arial,?Helvetica,?sans-serif; }

摘要

您使用Angular CLI創建了初始應用程序結構。

您了解到Angular組件顯示數據。

您使用插值的雙花括號來顯示應用程序標題。

英雄編輯

該應用程序現在有一個基本的標題。接下來，您將創建一個新組件來顯示英雄信息并將該組件放在應用程序shell中。

創建英雄組件

使用Angular CLI，生成一個名為的新組件heroes。

ng?generate?component?heroes

CLI創建一個新文件夾，src/app/heroes/并生成三個文件?HeroesComponent。

在HeroesComponent類文件如下：

import?{?Component,?OnInit?}?from?'@angular/core';@Component({ ??selector:?'app-heroes', ??templateUrl:?'./heroes.component.html', ??styleUrls:?['./heroes.component.css']})export?class?HeroesComponent?implements?OnInit?{ ??constructor()?{?} ??ngOnInit()?{ ??}}

您始終Component從Angular核心庫導入符號并使用注釋組件類。@Component

@Component?是一個裝飾器函數，它指定組件的Angular元數據。

CLI生成了三個元數據屬性：

selector- 組件的CSS元素選擇器

templateUrl- 組件模板文件的位置。

styleUrls- 組件的私有CSS樣式的位置。

在CSS元素選擇，?'app-heroes'是相匹配的標識父組件模板內此組件的HTML元素的名稱。

這ngOnInit是一個生命周期的鉤子。ngOnInit創建組件后不久就會進行Angular調用。這是放置初始化邏輯的好地方。

總是export組件類，所以你可以import在其他地方......就像在AppModule。

添加英雄屬性

為名為“Windstorm”的英雄添加一個hero屬性HeroesComponent。

hero?=?'Windstorm';

顯示英雄

打開heroes.component.html模板文件。刪除Angular CLI生成的默認文本，并將其替換為綁定到新hero屬性的數據。

{{hero}}

使用UppercasePipe?格式化

hero.name像這樣修改綁定。

{{hero.name?|?uppercase}}?Details

瀏覽器刷新，現在英雄的名字以大寫字母顯示。

uppercase插值綁定中的單詞，在管道運算符（|）之后，激活內置函數UppercasePipe。

管道是格式化字符串，貨幣金額，日期和其他顯示數據的好方法。角船有幾個內置管道，你可以自己創建。

編輯英雄

用戶應該能夠在文本框中編輯英雄名稱。

文本框應顯示英雄的name屬性，并在用戶鍵入時更新該屬性。這意味著數據從組件類流出到屏幕，從屏幕返回到類。

要自動化該數據流，請在表單元素和hero.name屬性之間設置雙向數據綁定。

雙向綁定

重構HeroesComponent模板中的詳細信息區域，使其如下所示：

[（ngModel）]是Angular的雙向數據綁定語法。

在這里，它將hero.name屬性綁定到HTML文本框，以便數據可以在兩個方向上流動：從hero.name屬性到文本框，從文本框返回到hero.name。

缺少的FormsModule

請注意，添加后應用程序停止工作。[(ngModel)]

要查看錯誤，請打開瀏覽器開發工具，然后在控制臺中查找消息

Template?parse?errors:Can't?bind?to?'ngModel'?since?it?isn't?a?known?property?of?'input'.

雖然ngModel是有效的Angular指令，但默認情況下不可用。

它屬于可選項FormsModule，您必須選擇使用它。

AppModule

Angular需要知道應用程序的各個部分是如何組合在一起的，以及應用程序需要的其他文件和庫。此信息稱為元數據

某些元數據位于您添加到組件類的裝飾器中。其他關鍵元數據在裝飾器中。@Component@NgModule

最重要的裝飾器注釋頂級AppModule類。@NgModule

Angular CLI?AppModule在src/app/app.module.ts創建項目時生成了一個類。這是您選擇加入的地方FormsModule。

導入FormsModule

打開AppModule（app.module.ts）并FormsModule從@angular/forms庫中導入符號。

import?{?FormsModule?}?from?'@angular/forms';?//?<--?NgModel?lives?here

然后添加FormsModule到元數據的數組，其中包含應用程序所需的外部模塊列表。@NgModuleimports

imports:?[ ??BrowserModule, ??FormsModule],

當瀏覽器刷新時，應用程序應該再次運行。您可以編輯英雄的名稱，并查看

文本框上方立即反映的更改。

聲明HeroesComponent

每個組件必須在一個?NgModule中聲明。

你沒有申報HeroesComponent。那么為什么應用程序有效呢？

它起作用是因為Angular CLI?HeroesComponent在AppModule生成該組件時聲明了。

打開src/app/app.module.ts并找到HeroesComponent頂部附近的進口。

import?{?HeroesComponent?}?from?'./heroes/heroes.component';

的HeroesComponent是在中聲明陣列。?@NgModule.declarations

declarations:?[ ??AppComponent, ??HeroesComponent],

請注意，AppModule?聲明兩個應用程序組件，AppComponent和HeroesComponent。

最終代碼審閱

你的應用應該是這樣的?實例/?下載示例。以下是此頁面上討論的代碼文件。

SRC /應用/英雄/ heroes.component.ts

SRC /應用/英雄/ heroes.component.html

SRC /應用程序/ app.module.ts

SRC /應用程序/ app.component.ts

SRC /應用程序/ app.component.html

SRC /應用程序/ hero.ts

略

摘要

您使用CLI創建了第二個HeroesComponent。

您HeroesComponent通過將其添加到AppComponentshell?來顯示。

您應用了UppercasePipe格式化名稱。

您使用了與ngModel指令的雙向數據綁定。

你了解了這個AppModule。

你進口FormsModule的AppModule，這樣就會角度認識和應用的ngModel指令。

您了解了聲明組件的重要性，AppModule?并了解CLI為您聲明了它。

顯示英雄列表

在此頁面中，您將展開英雄之旅應用程序以顯示英雄列表，并允許用戶選擇英雄并顯示英雄的詳細信息。

創建模擬英雄

你需要一些英雄來展示。

最終，您將從遠程數據服務器獲取它們。現在，你將創建一些模擬英雄并假裝他們來自服務器。

創建在文件夾中調用mock-heroes.ts的src/app/文件。將HEROES常量定義為十個英雄的數組并將其導出。該文件應如下所示。

import?{?Hero?}?from?'./hero';export?const?HEROES:?Hero[]?=?[ ??{?id:?11,?name:?'Mr.?Nice'?}, ??{?id:?12,?name:?'Narco'?}, ??{?id:?13,?name:?'Bombasto'?}, ??{?id:?14,?name:?'Celeritas'?}, ??{?id:?15,?name:?'Magneta'?}, ??{?id:?16,?name:?'RubberMan'?}, ??{?id:?17,?name:?'Dynama'?}, ??{?id:?18,?name:?'Dr?IQ'?}, ??{?id:?19,?name:?'Magma'?}, ??{?id:?20,?name:?'Tornado'?}];

顯示英雄

你將要在頂部顯示英雄列表HeroesComponent。

打開HeroesComponent類文件并導入模擬HEROES。

華為云輸入內容檢測有問題，轉載比較費勁

原文：https://angular.io/tutorial

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。