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

2022-07-19 09:24 更新

應(yīng)用的外殼

首先,使用 Angular CLI 來(lái)創(chuàng)建最初的應(yīng)用程序。在本教程中,你將修改并擴(kuò)展這個(gè)入門級(jí)的應(yīng)用程序,以創(chuàng)建出《英雄之旅》應(yīng)用。

在教程的這個(gè)部分,你將完成下列工作:

  1. 設(shè)置開(kāi)發(fā)環(huán)境。
  2. 創(chuàng)建新的工作區(qū),并初始化應(yīng)用項(xiàng)目。
  3. 啟動(dòng)開(kāi)發(fā)服務(wù)器。
  4. 修改此應(yīng)用。

要查看本頁(yè)所講的范例程序,請(qǐng)參閱現(xiàn)場(chǎng)演練 / 下載范例。

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

要想搭建開(kāi)發(fā)環(huán)境,請(qǐng)遵循搭建本地環(huán)境中的步驟進(jìn)行操作。

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

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

要想創(chuàng)建一個(gè)新的工作區(qū)和一個(gè)初始應(yīng)用項(xiàng)目,需要:

  1. 確保你現(xiàn)在沒(méi)有位于 Angular 工作區(qū)的文件夾中。比如,如果你之前已經(jīng)創(chuàng)建過(guò) "快速上手" 工作區(qū),請(qǐng)回到其父目錄中。
  2. 運(yùn)行 CLI 命令 ?ng new?,空間名請(qǐng)使用 ?angular-tour-of-heroes?,如下所示:
  3. ng new angular-tour-of-heroes
  4. ?ng new? 命令會(huì)提示你輸入要在初始應(yīng)用項(xiàng)目中包含哪些特性,請(qǐng)按 Enter 或 Return 鍵接受其默認(rèn)值。

Angular CLI 會(huì)安裝必要的 Angular ?npm ?包和其它依賴項(xiàng)。這可能需要幾分鐘。

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

  • 新的工作區(qū),其根目錄名叫 ?angular-tour-of-heroes?。
  • 一個(gè)最初的骨架應(yīng)用項(xiàng)目,位于 ?src/app? 子目錄下。
  • 相關(guān)的配置文件。

初始應(yīng)用項(xiàng)目是一個(gè)簡(jiǎn)單的 "歡迎" 應(yīng)用,隨時(shí)可以運(yùn)行它。

啟動(dòng)應(yīng)用服務(wù)器

進(jìn)入工作區(qū)目錄,并啟動(dòng)這個(gè)應(yīng)用。

cd angular-tour-of-heroes
ng serve --open
?ng serve? 命令會(huì)構(gòu)建本應(yīng)用、啟動(dòng)開(kāi)發(fā)服務(wù)器、監(jiān)聽(tīng)源文件,并且當(dāng)那些文件發(fā)生變化時(shí)重新構(gòu)建本應(yīng)用。
?--open? 標(biāo)志會(huì)打開(kāi)瀏覽器,并訪問(wèn) ?http://localhost:4200/?。

你會(huì)發(fā)現(xiàn)本應(yīng)用正運(yùn)行在瀏覽器中。

Angular 組件

你所看到的這個(gè)頁(yè)面就是應(yīng)用的外殼。這個(gè)外殼是被一個(gè)名叫 ?AppComponent ?的 Angular 組件控制的。

組件是 Angular 應(yīng)用中的基本構(gòu)造塊。它們?cè)谄聊簧巷@示數(shù)據(jù),監(jiān)聽(tīng)用戶輸入,并且根據(jù)這些輸入執(zhí)行相應(yīng)的動(dòng)作。

修改應(yīng)用標(biāo)題

用你最喜歡的編輯器或 IDE 打開(kāi)這個(gè)項(xiàng)目,并訪問(wèn) ?src/app? 目錄,來(lái)對(duì)這個(gè)起始應(yīng)用做一些修改。

你會(huì)在這里看到 ?AppComponent ?殼的三個(gè)實(shí)現(xiàn)文件:

文件

詳情

app.component.ts

組件的類代碼,這是用 TypeScript 寫的。

app.component.html

組件的模板,這是用 HTML 寫的。

app.component.css

組件的私有 CSS 樣式。

更改應(yīng)用標(biāo)題

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

title = 'Tour of Heroes';

打開(kāi)組件的模板文件 ?app.component.html? 并清空 Angular CLI 自動(dòng)生成的默認(rèn)模板。改為下列 HTML 內(nèi)容。

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

雙花括號(hào)語(yǔ)法是 Angular 的插值綁定語(yǔ)法。這個(gè)插值綁定的意思是把組件的 ?title ?屬性的值綁定到 HTML 中的 ?h1 ?標(biāo)記中。

瀏覽器自動(dòng)刷新,并且顯示出了新的應(yīng)用標(biāo)題。

添加應(yīng)用樣式

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

打開(kāi) ?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;
}

查看最終代碼

下面是本頁(yè)所提到的源代碼。

  • 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;
    }

小結(jié)

  • 你使用 Angular CLI 創(chuàng)建了初始的應(yīng)用結(jié)構(gòu)
  • 你學(xué)會(huì)了使用 Angular 組件來(lái)顯示數(shù)據(jù)
  • 你使用雙花括號(hào)插值顯示了應(yīng)用標(biāo)題


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)