Angular 應用的外殼

你首先須要使用 Angular CLI 來建立一個初始化的應用。隨後，你將對你已經初始化的應用進行修改來讓你構建出 Tour of Heroes app（英雄指南） 這個應用。

在教程的本部分，你須要完成下面的操做：

1. 設置的你的環境。
2. 建立一個新的工做區（workspace）和初始化應用項目。
3. 啓動應用服務器。
4. 對應用進行修改。

設置你的環境

但願對你的開發環境進行設置，請參考下面的連接中的指南：Getting started：

• 先決條件
• 安裝 Angular CLI

你不須要按照 Getting started 頁面中說明的內容從頭至尾的進行一次，你只須要完成上面提示的 2 個部分就能夠將環境設置好了。

繼續下一步來建立《英雄指南》的工做區而且將這個應用初始化。

建立一個新工做區而且初始化應用

Angular 的工做區就是你開發應用所在的上下文環境。一個工做區包含一個或多個項目所需的文件。每一個項目都是一組由應用、庫或端到端（e2e）測試組成的文件集合。 在本教程中，你將建立一個新的工做區。

但願建立一個新工做區而且初始一個應用項目，你須要：

1. 確保你如今沒有位於 Angular 工做區的文件夾中。例如，在前面的教程中，你已經建立了 Getting Started workspace（開始使用工做區），請回到上級目錄中。
2. 運行 CLI 命令  ng new 而後提供空間的名字  angular-tour-of-heroes， 完整的命令以下顯示：
   ng new angular-tour-of-heroes
3. 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/。

你會發現，這個應用已經啓動了，而且能夠經過瀏覽器進行訪問了。

Angular 組件

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

Components（組件）  是 Angular 應用中的基本構造塊。 它們在屏幕上顯示數據，監聽用戶輸入，而且根據這些輸入執行相應的動做。

對應用進行修改

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

你會在這裏看到 AppComponent 外殼的三個實現文件：

1. app.component.ts— 組件的類代碼，這是用 TypeScript 寫的。
2. app.component.html— 組件的模板，這是用 HTML 寫的。
3. app.component.css—  組件的私有 CSS 樣式。

修改應用的標題

打開組件的類文件 (app.component.ts)，並把 title 屬性的值修改成 'Tour of Heroes' （英雄指南）。

title = 'Tour of Heroes';

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

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

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

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

添加應用樣式

大多數應用都會努力讓整個應用保持一致的外觀。 所以，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

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

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