首先，使用 Angular CLI 来创建最初的应用程序。在本教程中，你将修改并扩展这个入门级的应用程序，以创建出《英雄之旅》应用。
在教程的这个部分，你将完成下列工作：
要想搭建开发环境，请遵循搭建本地环境中的步骤进行操作。
Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。每个项目都是一组由应用、库或端到端（e2e）测试组成的文件集合。在本教程中，你将创建一个新的工作区。
要想创建一个新的工作区和一个初始应用项目，需要：
ng new，空间名请使用 angular-tour-of-heroes，如下所示：ng new angular-tour-of-heroes
ng new 命令会提示你输入要在初始应用项目中包含哪些特性，请按 Enter 或 Return 键接受其默认值。 Angular CLI 会安装必要的 Angular npm 包和其它依赖项。这可能需要几分钟。
它还会创建下列工作区和初始项目的文件：
angular-tour-of-heroes。src/app 子目录下。初始应用项目是一个简单的 "欢迎" 应用，随时可以运行它。
进入工作区目录，并启动这个应用。
cd angular-tour-of-heroes
ng serve --open
ng serve 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。
--open 标志会打开浏览器，并访问 http://localhost:4200/。
你会发现本应用正运行在浏览器中。
你所看到的这个页面就是应用的外壳。这个外壳是被一个名叫 AppComponent 的 Angular 组件控制的。
组件是 Angular 应用中的基本构造块。它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。
用你最喜欢的编辑器或 IDE 打开这个项目，并访问 src/app 目录，来对这个起始应用做一些修改。
你会在这里看到 AppComponent 壳的三个实现文件：
文件 | 详情 |
|---|---|
| 组件的类代码，这是用 TypeScript 写的。 |
| 组件的模板，这是用 HTML 写的。 |
| 组件的私有 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: #333;
font-family: Cambria, Georgia, serif;
}
button {
background-color: #eee;
border: none;
border-radius: 4px;
cursor: pointer;
color: black;
font-size: 1.2rem;
padding: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
}
button:hover {
background-color: black;
color: white;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
下面是本页所提到的源代码。
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 (excerpt) /* 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: #333;
font-family: Cambria, Georgia, serif;
}
button {
background-color: #eee;
border: none;
border-radius: 4px;
cursor: pointer;
color: black;
font-size: 1.2rem;
padding: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
}
button:hover {
background-color: black;
color: white;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}