应用的“外壳”

安装 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 壳的三个实现文件：

app.component.ts— 组件的类代码，这是用 TypeScript 写的。

打开组件的类文件 (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 创建了初始的应用结构。