应用的“外壳”

安装 Angular CLI 命令行工具

如果还没有安装 Angular CLI，请执行：

content_copynpm install -g @angular/cli

创建新应用

使用 CLI 命令创建一个名叫 angular-tour-of-heroes 的新项目。

content_copyng new angular-tour-of-heroes

这样 Angular CLI 就创建了一个带默认应用及其支持文件的新项目。

你可以使用 ng add 命令往新项目中添加一些预先打包好的功能。 ng add 命令会通过应用来自特定 NPM 包中的图纸（schematic）来转换此项目。 要了解更多，参见 Angular CLI 文档。

比如 Angular Material 就为一些典型布局提供了图纸。参见 Angular Material 文档。

启动应用服务器

进入项目目录，并启动这个应用。

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

ng serve 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。

--open 标志会打开浏览器，并访问 http://localhost:4200/。

你会发现本应用正运行在浏览器中。

Angular 组件

你所看到的这个页面就是应用的外壳。 这个外壳是被一个名叫 AppComponent 的 Angular 组件控制的。

组件是 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' （英雄指南）。

app.component.ts (class title property)

content_copytitle = 'Tour of Heroes';

打开组件的模板文件 app.component.html 并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容：

app.component.html (template)

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

双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。

浏览器自动刷新，并且显示出了新的应用标题。

添加应用样式

大多数应用都会努力让整个应用保持一致的外观。 因此，CLI 会生成一个空白的 styles.css 文件。 你可以把全应用级别的样式放进去。

下面是这个英雄指南范例应用中 styles.css 文件的片段。

src/styles.css (excerpt)

content_copy/* 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[text], button {  color: #888;  font-family: Cambria, Georgia;}/* everywhere else */* {  font-family: Arial, Helvetica, sans-serif;}

查看最终代码

本教程的源文件以及英雄指南的完整全局样式可以在 在线例子 / 下载范例 中看到。

下面是本页所提到的源代码：

src/app/app.component.ts

src/app/app.component.html

src/styles.css (excerpt)

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

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

小结

• 你使用 Angular CLI 创建了初始的应用结构。
• 你学会了使用 Angular 组件来显示数据。
• 你使用双花括号插值表达式显示了应用标题。