Create a new project

首先,使用 Angular CLI 來建立最初的應用程式。 在本課程中,你將修改並擴充套件這個入門級的應用程式,以創建出《英雄之旅》應用。

You begin by creating an initial application using the Angular CLI. Throughout this tutorial, you’ll modify and extend that starter application to create the Tour of Heroes app.


In this part of the tutorial, you'll do the following:

  1. 設定開發環境。

    Set up your environment.

  2. 建立新的工作區,並初始化應用專案。

    Create a new workspace and initial app project.

  3. 啟動開發伺服器。

    Serve the application.

  4. 修改此應用。

    Make changes to the application.

要檢視本頁所講的範例程式,請參閱現場演練 / 下載範例

For the sample app that this page describes, see the現場演練 / 下載範例.


Set up your environment


To set up your development environment, follow the instructions in Local Environment Setup.


Create a new workspace and an initial application

Angular 的工作區就是你開發應用所在的上下文環境。一個工作區包含一個或多個專案所需的檔案。 每個專案都是一組由應用、函式庫或端到端(e2e)測試組成的檔案集合。 在本課程中,你將建立一個新的工作區。

You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. For this tutorial, you will create a new workspace.


To create a new workspace and an initial app project:

  1. 確保你現在沒有位於 Angular 工作區的資料夾中。例如,如果你之前已經建立過 "快速上手" 工作區,請回到其父目錄中。

    Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder.

  2. 執行 CLI 命令 ng new,空間名請使用 angular-tour-of-heroes,如下所示:

    Run the CLI command ng new and provide the name angular-tour-of-heroes, as shown here:

      ng new angular-tour-of-heroes
  1. ng new 命令會提示你輸入要在初始應用專案中包含哪些特性,請按 Enter 或 Return 鍵接受其預設值。

    The ng new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

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

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.


It also creates the following workspace and starter project files:

  • 新的工作區,其根目錄名叫 angular-tour-of-heroes

    A new workspace, with a root folder named angular-tour-of-heroes.

  • 一個最初的骨架應用專案,同樣叫做 angular-tour-of-heroes(位於 src 子目錄下)。

    An initial skeleton app project, also called angular-tour-of-heroes (in the src subfolder).

  • 一個端到端測試專案(位於 e2e 子目錄下)。

    An end-to-end test project (in the e2e subfolder).

  • 相關的配置檔案。

    Related configuration files.

初始應用專案是一個簡單的 "歡迎" 應用,隨時可以執行它。

The initial app project contains a simple Welcome app, ready to run.


Serve the application


Go to the workspace directory and launch the application.

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

ng serve 命令會建構本應用、啟動開發伺服器、監聽原始檔,並且當那些檔案發生變化時重新建構本應用。

The ng serve command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files.

--open 標誌會開啟瀏覽器,並訪問 http://localhost:4200/

The --open flag opens a browser to http://localhost:4200/.


You should see the app running in your browser.

Angular 元件

Angular components

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

The page you see is the application shell. The shell is controlled by an Angular component named AppComponent.

元件是 Angular 應用中的基本構成要素。 它們在螢幕上顯示資料,監聽使用者輸入,並且根據這些輸入執行相應的動作。

Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.


Make changes to the application

用你最喜歡的編輯器或 IDE 開啟這個專案,並訪問 src/app 目錄,來對這個起始應用做一些修改。

Open the project in your favorite editor or IDE and navigate to the src/app folder to make some changes to the starter app.

你會在這裡看到 AppComponent 殼的三個實現檔案:

You'll find the implementation of the shell AppComponent distributed over three files:

  1. app.component.ts— 元件的類別程式碼,這是用 TypeScript 寫的。

    app.component.ts— the component class code, written in TypeScript.

  2. app.component.html— 元件的範本,這是用 HTML 寫的。

    app.component.html— the component template, written in HTML.

  3. app.component.css— 元件的私有 CSS 樣式。

    app.component.css— the component's private CSS styles.


Change the application title

開啟元件的類別檔案 (app.component.ts),並把 title 屬性的值修改為 'Tour of Heroes' (英雄之旅)。

Open the component class file (app.component.ts) and change the value of the title property to 'Tour of Heroes'.

app.component.ts (class title property)
      title = 'Tour of Heroes';

開啟元件的範本檔案 app.component.html 並清空 Angular CLI 自動產生的預設範本。改為下列 HTML 內容:

Open the component template file (app.component.html) and delete the default template generated by the Angular CLI. Replace it with the following line of HTML.

app.component.html (template)

雙花括號語法是 Angular 的插值繫結語法。 這個插值繫結的意思是把元件的 title 屬性的值繫結到 HTML 中的 h1 標記中。

The double curly braces are Angular's interpolation binding syntax. This interpolation binding presents the component's title property value inside the HTML header tag.


The browser refreshes and displays the new application title.


Add application styles

大多數應用都會努力讓整個應用保持一致的外觀。 因此,CLI 會產生一個空白的 styles.css 檔案。 你可以把全應用級別的樣式放進去。

Most apps strive for a consistent look across the application. The CLI generated an empty styles.css for this purpose. Put your application-wide styles there.

開啟 src/styles.css 並把下列程式碼新增到此檔案中。

Open src/styles.css and add the code below to the file.

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;
/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;


Final code review


Here are the code files discussed on this page.

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

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



  • 你使用 Angular CLI 建立了初始的應用結構。

    You created the initial application structure using the Angular CLI.

  • 你學會了使用 Angular 元件來顯示資料。

    You learned that Angular components display data.

  • 你使用雙花括號插值顯示了應用標題。

    You used the double curly braces of interpolation to display the app title.