建立 Home 元件

本教學課程示範如何為你的 Angular 應用程式建立新的元件。

你將學到什麼

你的應用程式將會有一個新元件：Home。

Angular 元件概念預覽

Angular 應用程式圍繞著元件打造，元件是 Angular 的基本組成單位。 元件包含程式碼、HTML 版面配置與 CSS 樣式資訊，提供應用程式中某個元素的功能與外觀。 在 Angular 中，元件可以包含其他元件。應用程式的功能與外觀可以被拆分、劃分到不同的元件中。

在 Angular 中，元件有定義其屬性的中繼資料。 當你建立 Home 時，你會用到下列屬性：

  • selector：描述 Angular 在範本中如何參照這個元件。
  • imports：描述元件的相依關係。
  • template：描述元件的 HTML 標記與版面配置。
  • styleUrl：指定元件所使用的 CSS 檔案 URL。

  1. 建立 Home

    在這個步驟中，你會為應用程式建立一個新元件。

    在 IDE 的 Terminal 窗格中：

    1. 在你的專案目錄中，進入 first-app 目錄。

    2. 執行下列指令，建立新的 Home

      ng generate component home

    3. 執行下列指令，建置並提供你的應用程式。

      NOTE: 這個步驟只適用於你的本機環境！

      ng serve

    4. 開啟瀏覽器，前往 http://localhost:4200 找到應用程式。

    5. 確認應用程式建置時沒有錯誤。

      HELPFUL: 畫面應該和上一課一樣，因為雖然你加入了新元件，但你還沒有把它放進應用程式的任何範本裡。

    6. 讓 ng serve 繼續執行，同時進行接下來的步驟。

  2. 將新元件加入應用程式的版面配置

    在這個步驟中，你會將新元件 Home 加入應用程式的根元件 App，讓它顯示在應用程式的版面配置中。

    在 IDE 的 Edit 窗格中：

    1. 在編輯器中開啟 app.ts。

    2. 在 app.ts 中，將這一行加入檔案層級的 imports，匯入 Home。

      在 src/app/app.ts 中匯入 Home

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrl: './app.css',
})
export class App {
  title = 'homes';
}

    3. 在 app.ts 的 @Component 中，更新 imports 陣列屬性，加入 Home。

      取代 src/app/app.ts 中的內容

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrl: './app.css',
})
export class App {
  title = 'homes';
}

    4. 在 app.ts 的 @Component 中，更新 template 屬性，加入下列 HTML 程式碼。

      取代 src/app/app.ts 中的內容

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrl: './app.css',
})
export class App {
  title = 'homes';
}

    5. 儲存你對 app.ts 的變更。

    6. 如果 ng serve 正在執行，應用程式應該會自動更新。 如果 ng serve 沒有在執行，請重新啟動它。 應用程式中的 Hello world 應該會變成來自 Home 的 home works!。

    7. 在瀏覽器中檢查執行中的應用程式，確認應用程式已經更新。

    顯示「home works!」文字的頁面瀏覽器畫面

  3. 為 Home 加入功能

    在這個步驟中，你會為 Home 加入功能。

    在上一個步驟中，你把預設的 Home 加入應用程式的範本，讓它的預設 HTML 出現在應用程式中。 在這個步驟中，你會加入一個搜尋篩選器與按鈕，之後的課程會用到它。 目前 Home 就只有這些內容。 請注意，這個步驟只是把搜尋元素加入版面配置，還沒有加入任何功能。

    如果你是從全新的 Angular 專案開始，而不是下載起始專案 （ng new）：請將下列全域樣式加入 src/styles.css，讓搜尋按鈕與輸入框邊框能夠顯示：

    :root {
  --primary-color: #605dc8;
  --secondary-color: #8b89e6;
  --accent-color: #e8e7fa;
  --shadow-color: #e8e8e8;
}

button.primary {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

    在 IDE 的 Edit 窗格中：

    1. 在 first-app 目錄中，在編輯器裡開啟 home.ts。

    2. 在 home.ts 的 @Component 中，用下列程式碼更新 template 屬性。

      取代 src/app/home/home.ts 中的內容

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

@Component({
  selector: 'app-home',
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city" />
        <button class="primary" type="button">Search</button>
      </form>
    </section>
  `,
  styleUrl: './home.css',
})
export class Home {}

    3. 接著，在編輯器中開啟 home.css，用這些樣式更新內容。

      NOTE: 在瀏覽器中，這些樣式可以放在 src/app/home/home.ts 的 styles 陣列裡。

      取代 src/app/home/home.css 中的內容

      .results {
  display: grid;
  column-gap: 14px;
  row-gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 400px));
  margin-top: 50px;
  justify-content: space-around;
}

input[type="text"] {
  border: solid 1px var(--primary-color);
  padding: 10px;
  border-radius: 8px;
  margin-right: 4px;
  display: inline-block;
  width: 30%;
}

button {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

@media (min-width: 500px) and (max-width: 768px) {
  .results {
      grid-template-columns: repeat(2, 1fr);
  }
  input[type="text"] {
      width: 70%;
  }   
}

@media (max-width: 499px) {
  .results {
      grid-template-columns: 1fr;
  }    
}

    4. 確認應用程式建置時沒有錯誤。你應該能在應用程式中找到篩選查詢框與按鈕，而且它們都有套用樣式。繼續下一步之前，請先修正任何錯誤。

    homes-app 的瀏覽器畫面，顯示標誌、篩選文字輸入框與搜尋按鈕

SUMMARY: 在這一課中，你為應用程式建立了一個新元件，並為它加上篩選編輯控制項與按鈕。

如需本課所涵蓋主題的更多資訊，請造訪：