应用的“外壳”
安装 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 --openng serve 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。
--open 标志会打开浏览器，并访问 http://localhost:4200/。
你会发现本应用正运行在浏览器中。
Angular 组件
你所看到的这个页面就是应用的外壳。 这个外壳是被一个名叫 AppComponent 的 Angular 组件控制的。
组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。
修改应用标题
用你最喜欢的编辑器或 IDE 打开这个项目，并访问 src/app 目录。
你会在这里看到 AppComponent 壳的三个实现文件：
app.component.ts— 组件的类代码，这是用 TypeScript 写的。app.component.html— 组件的模板，这是用 HTML 写的。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>{}</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 组件来显示数据。
- 你使用双花括号插值表达式显示了应用标题。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
