Angular 英雄之旅-創(chuàng)建項目

應用的外殼

首先，使用 Angular CLI 來創(chuàng)建最初的應用程序。在本教程中，你將修改并擴展這個入門級的應用程序，以創(chuàng)建出《英雄之旅》應用。

在教程的這個部分，你將完成下列工作：

1. 設置開發(fā)環(huán)境。
2. 創(chuàng)建新的工作區(qū)，并初始化應用項目。
3. 啟動開發(fā)服務器。
4. 修改此應用。

要查看本頁所講的范例程序，請參閱現(xiàn)場演練 / 下載范例。

搭建開發(fā)環(huán)境

要想搭建開發(fā)環(huán)境，請遵循搭建本地環(huán)境中的步驟進行操作。

創(chuàng)建新的工作區(qū)和一個初始應用

Angular 的工作區(qū)就是你開發(fā)應用所在的上下文環(huán)境。一個工作區(qū)包含一個或多個項目所需的文件。每個項目都是一組由應用、庫或端到端（e2e）測試組成的文件集合。在本教程中，你將創(chuàng)建一個新的工作區(qū)。

要想創(chuàng)建一個新的工作區(qū)和一個初始應用項目，需要：

1. 確保你現(xiàn)在沒有位于 Angular 工作區(qū)的文件夾中。比如，如果你之前已經創(chuàng)建過 "快速上手" 工作區(qū)，請回到其父目錄中。
2. 運行 CLI 命令 ?ng new?，空間名請使用 ?angular-tour-of-heroes?，如下所示：

ng new angular-tour-of-heroes

3. ?ng new? 命令會提示你輸入要在初始應用項目中包含哪些特性，請按 Enter 或 Return 鍵接受其默認值。

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

它還會創(chuàng)建下列工作區(qū)和初始項目的文件：

• 新的工作區(qū)，其根目錄名叫 ?angular-tour-of-heroes?。
• 一個最初的骨架應用項目，位于 ?src/app? 子目錄下。
• 相關的配置文件。

初始應用項目是一個簡單的 "歡迎" 應用，隨時可以運行它。

啟動應用服務器

進入工作區(qū)目錄，并啟動這個應用。

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

?ng serve? 命令會構建本應用、啟動開發(fā)服務器、監(jiān)聽源文件，并且當那些文件發(fā)生變化時重新構建本應用。
?--open? 標志會打開瀏覽器，并訪問 ?http://localhost:4200/?。

你會發(fā)現(xiàn)本應用正運行在瀏覽器中。

Angular 組件

你所看到的這個頁面就是應用的外殼。這個外殼是被一個名叫 ?AppComponent ?的 Angular 組件控制的。

組件是 Angular 應用中的基本構造塊。它們在屏幕上顯示數(shù)據(jù)，監(jiān)聽用戶輸入，并且根據(jù)這些輸入執(zhí)行相應的動作。

修改應用標題

用你最喜歡的編輯器或 IDE 打開這個項目，并訪問 ?src/app? 目錄，來對這個起始應用做一些修改。

你會在這里看到 ?AppComponent ?殼的三個實現(xiàn)文件：

更改應用標題

打開組件的類文件 (?app.component.ts?)，并把 ?title ?屬性的值修改為 'Tour of Heroes'（英雄之旅）。

title = 'Tour of Heroes';

打開組件的模板文件 ?app.component.html? 并清空 Angular CLI 自動生成的默認模板。改為下列 HTML 內容。

<h1>{{title}}</h1>

雙花括號語法是 Angular 的插值綁定語法。這個插值綁定的意思是把組件的 ?title ?屬性的值綁定到 HTML 中的 ?h1 ?標記中。

瀏覽器自動刷新，并且顯示出了新的應用標題。

添加應用樣式

大多數(shù)應用都會努力讓整個應用保持一致的外觀。因此，CLI 會生成一個空白的 ?styles.css? 文件。你可以把全應用級別的樣式放進去。

打開 ?src/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: #333;
  font-family: Cambria, Georgia, serif;
}
button {
  background-color: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: black;
  font-size: 1.2rem;
  padding: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
button:hover {
  background-color: black;
  color: white;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

查看最終代碼

下面是本頁所提到的源代碼。

• src/app/app.component.ts

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

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

• src/app/app.component.html

<h1>{{title}}</h1>

• src/styles.css (excerpt)

/* 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: #333;
  font-family: Cambria, Georgia, serif;
}
button {
  background-color: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: black;
  font-size: 1.2rem;
  padding: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
button:hover {
  background-color: black;
  color: white;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

小結

• 你使用 Angular CLI 創(chuàng)建了初始的應用結構
• 你學會了使用 Angular 組件來顯示數(shù)據(jù)
• 你使用雙花括號插值顯示了應用標題