应用的外壳link

Create a new projectlink

首先，使用 Angular CLI 来创建最初的应用程序。 在本教程中，你将修改并扩展这个入门级的应用程序，以创建出《英雄之旅》应用。

You begin by creating an initial application using the Angular CLI. Throughout this tutorial, you’ll modify and extend that starter application to create the Tour of Heroes app.

在教程的这个部分，你将完成下列工作：

In this part of the tutorial, you'll do the following:

1. 设置开发环境。

   Set up your environment.

2. 创建新的工作区，并初始化应用项目。

   Create a new workspace and initial app project.

3. 启动开发服务器。

   Serve the application.

4. 修改此应用。

   Make changes to the application.

搭建开发环境link

Set up your environmentlink

要想搭建开发环境，请遵循搭建本地环境中的步骤进行操作。

To set up your development environment, follow the instructions in Local Environment Setup.

创建新的工作区和一个初始应用link

Create a new workspace and an initial applicationlink

Angular 的工作区就是你开发应用所在的上下文环境。一个工作区包含一个或多个项目所需的文件。 每个项目都是一组由应用、库或端到端（e2e）测试组成的文件集合。 在本教程中，你将创建一个新的工作区。

You develop apps in the context of an Angular workspace. A workspace contains the files for one or more projects. A project is the set of files that comprise an app, a library, or end-to-end (e2e) tests. For this tutorial, you will create a new workspace.

要想创建一个新的工作区和一个初始应用项目，需要：

To create a new workspace and an initial app project:

1. 确保你现在没有位于 Angular 工作区的文件夹中。例如，如果你之前已经创建过 "快速上手" 工作区，请回到其父目录中。

   Ensure that you are not already in an Angular workspace folder. For example, if you have previously created the Getting Started workspace, change to the parent of that folder.

2. 运行 CLI 命令 ng new，空间名请使用 angular-tour-of-heroes，如下所示：

   Run the CLI command ng new and provide the name angular-tour-of-heroes, as shown here:

      
        content_copy
      
      ng new angular-tour-of-heroes
    

3. ng new 命令会提示你输入要在初始应用项目中包含哪些特性，请按 Enter 或 Return 键接受其默认值。

   The ng new command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.

Angular CLI 会安装必要的 Angular npm 包和其它依赖项。这可能需要几分钟。

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

它还会创建下列工作区和初始项目的文件：

It also creates the following workspace and starter project files:

• 新的工作区，其根目录名叫 angular-tour-of-heroes。

  A new workspace, with a root folder named angular-tour-of-heroes.

• 一个最初的骨架应用项目，同样叫做 angular-tour-of-heroes（位于 src 子目录下）。

  An initial skeleton app project, also called angular-tour-of-heroes (in the src subfolder).

• 一个端到端测试项目（位于 e2e 子目录下）。

  An end-to-end test project (in the e2e subfolder).

• 相关的配置文件。

  Related configuration files.

初始应用项目是一个简单的 "欢迎" 应用，随时可以运行它。

The initial app project contains a simple Welcome app, ready to run.

启动应用服务器link

Serve the applicationlink

进入工作区目录，并启动这个应用。

Go to the workspace directory and launch the application.

      
        content_copy
      
      cd angular-tour-of-heroes
ng serve --open
    

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

You should see the app running in your browser.

Angular 组件link

Angular componentslink

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

The page you see is the application shell. The shell is controlled by an Angular component named AppComponent.

组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。

Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.

修改应用标题link

Make changes to the applicationlink

用你最喜欢的编辑器或 IDE 打开这个项目，并访问 src/app 目录，来对这个起始应用做一些修改。

Open the project in your favorite editor or IDE and navigate to the src/app folder to make some changes to the starter app.

你会在这里看到 AppComponent 壳的三个实现文件：

You'll find the implementation of the shell AppComponent distributed over three files:

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

   app.component.ts— the component class code, written in TypeScript.

2. app.component.html— 组件的模板，这是用 HTML 写的。

   app.component.html— the component template, written in HTML.

3. app.component.css— 组件的私有 CSS 样式。

   app.component.css— the component's private CSS styles.

更改应用标题link

Change the application titlelink

打开组件的类文件 (app.component.ts)，并把 title 属性的值修改为 'Tour of Heroes' （英雄之旅）。

Open the component class file (app.component.ts) and change the value of the title property to 'Tour of Heroes'.

      
        content_copy
      
      title = 'Tour of Heroes';
    

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

Open the component template file (app.component.html) and delete the default template generated by the Angular CLI. Replace it with the following line of HTML.

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

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

The double curly braces are Angular's interpolation binding syntax. This interpolation binding presents the component's title property value inside the HTML header tag.

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

The browser refreshes and displays the new application title.

添加应用样式link

Add application styleslink

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

Most apps strive for a consistent look across the application. The CLI generated an empty styles.css for this purpose. Put your application-wide styles there.

打开 src/styles.css 并把下列代码添加到此文件中。

Open src/styles.css and add the code below to the file.

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

查看最终代码link

Final code reviewlink

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

Here are the code files discussed on this page.

      
        content_copy
      
      import { Component } from '@angular/core';

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

小结link

Summarylink

• 你使用 Angular CLI 创建了初始的应用结构。

  You created the initial application structure using the Angular CLI.

• 你学会了使用 Angular 组件来显示数据。

  You learned that Angular components display data.

• 你使用双花括号插值显示了应用标题。

  You used the double curly braces of interpolation to display the app title.