你首先需要使用 Angular CLI 來創建一個初始化的應用。隨后，你將對你已經初始化的應用進行修改來讓你構建出 Tour of Heroes app（英雄指南） 這個應用。
在教程的本部分，你需要完成下面的操作：
設置的你的環境。
創建一個新的工作區（workspace）和初始化應用項目。
啟動應用服務器。
對應用進行修改。
希望對你的開發環境進行設置，請參考下面的鏈接中的指南：Getting started：
先決條件
安裝 Angular CLI
你不需要按照?Getting started?頁面中說明的內容從頭到尾的進行一次，你只需要完成上面提示的 2 個部分就可以將環境設置好了。
繼續下一步來創建《英雄指南》的工作區并且將這個應用初始化。
Angular 的工作區就是你開發應用所在的上下文環境。一個工作區包含一個或多個項目所需的文件。每個項目都是一組由應用、庫或端到端（e2e）測試組成的文件集合。 在本教程中，你將創建一個新的工作區。
希望創建一個新工作區并且初始一個應用項目，你需要：
確保你現在沒有位于 Angular 工作區的文件夾中。例如，在前面的教程中，你已經創建了 Getting Started workspace（開始使用工作區），請回到上級目錄中。
運行 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/。
你會發現，這個應用已經啟動了，并且可以通過瀏覽器進行訪問了。
你所看到的這個頁面就是application shell（應用的外殼）。 這個外殼是被一個名叫?AppComponent?的 Angular?組件（component）控制的。
Components（組件）??是 Angular 應用中的基本構造塊。 它們在屏幕上顯示數據，監聽用戶輸入，并且根據這些輸入執行相應的動作。
用你喜歡的編輯器或 IDE 打開這個項目，并訪問?src/app?目錄，來對這個起始應用做一些修改。
你會在這里看到?AppComponent?外殼的三個實現文件：
app.component.ts—?組件的類代碼，這是用 TypeScript 寫的。
app.component.html—?組件的模板，這是用 HTML 寫的。
app.component.css—??組件的私有 CSS 樣式。
打開組件的類文件 (app.component.ts)，并把?title?屬性的值修改為 'Tour of Heroes' （英雄指南）。
title?=?'Tour?of?Heroes';
打開組件的模板文件?app.component.html?并清空 Angular CLI 自動生成的默認模板。改為下列 HTML 內容：
<h2>{{title}}</h2>雙花括號語法是 Angular 的插值綁定語法。 這個插值綁定的意思是把組件的?title?屬性的值綁定到 HTML 中的?h2?標記
瀏覽器自動刷新，并且顯示出了新的應用標題。
大多數應用都會努力讓整個應用保持一致的外觀。 因此，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:?#888;??font-family: Cambria, Georgia;}/* 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
<h2>{{title}}</h2> |
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:?#888;??font-family: Cambria, Georgia;}/* everywhere else */* {??font-family:?Arial,?Helvetica,?sans-serif;} |
你使用 Angular CLI 創建了初始的應用結構。
你學會了使用 Angular 組件來顯示數據。
你使用雙花括號插值表達式顯示了應用標題。
?
https://www.cwiki.us/display/AngularZH/The+Application+Shell
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
