204 lines
6.1 KiB
Markdown
204 lines
6.1 KiB
Markdown
# The Application Shell
|
||
|
||
# 应用的“外壳”
|
||
|
||
## Install the Angular CLI
|
||
|
||
## 安装 Angular CLI 命令行工具
|
||
|
||
Install the [Angular CLI](https://github.com/angular/angular-cli), if you haven't already done so.
|
||
|
||
如果还没有安装 [Angular CLI](https://github.com/angular/angular-cli)，请执行：
|
||
|
||
<code-example language="sh" class="code-shell">
|
||
|
||
npm install -g @angular/cli
|
||
|
||
</code-example>
|
||
|
||
## Create a new application
|
||
|
||
## 创建新应用
|
||
|
||
Create a new project named `angular-tour-of-heroes` with this CLI command.
|
||
|
||
使用 CLI 命令创建一个名叫 `angular-tour-of-heroes` 的新项目。
|
||
|
||
<code-example language="sh" class="code-shell">
|
||
|
||
ng new angular-tour-of-heroes
|
||
|
||
</code-example>
|
||
|
||
The Angular CLI generated a new project with a default application and supporting files.
|
||
|
||
这样 Angular CLI 就创建了一个带默认应用及其支持文件的新项目。
|
||
|
||
## Serve the application
|
||
|
||
## 启动应用服务器
|
||
|
||
Go to the project directory and launch the application.
|
||
|
||
进入项目目录，并启动这个应用。
|
||
|
||
<code-example language="sh" class="code-shell">
|
||
|
||
cd angular-tour-of-heroes
|
||
ng serve --open
|
||
|
||
</code-example>
|
||
|
||
<div class="l-sub-section">
|
||
|
||
The `ng serve` command builds the app, starts the development server,
|
||
watches the source files, and rebuilds the app as you make changes to those files.
|
||
|
||
`ng serve` 命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。
|
||
|
||
The `--open` flag opens a browser to `http://localhost:4200/`.
|
||
|
||
`--open` 标志会打开浏览器，并访问 `http://localhost:4200/`。
|
||
|
||
</div>
|
||
|
||
You should see the app running in your browser.
|
||
|
||
你会发现本应用正运行在浏览器中。
|
||
|
||
## Angular components
|
||
|
||
## Angular 组件
|
||
|
||
The page you see is the _application shell_.
|
||
The shell is controlled by an Angular **component** named `AppComponent`.
|
||
|
||
你所看到的这个页面就是*应用的外壳*。
|
||
这个外壳是被一个名叫 `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.
|
||
|
||
*组件*是 Angular 应用中的基本构造块。
|
||
它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。
|
||
|
||
## Change the application title
|
||
|
||
## 修改应用标题
|
||
|
||
Open the project in your favorite editor or IDE and navigate to the `src/app` folder.
|
||
|
||
用你最喜欢的编辑器或 IDE 打开这个项目，并访问 `src/app` 目录。
|
||
|
||
You'll find the implementation of the shell `AppComponent` distributed over three files:
|
||
|
||
你会在这里看到 `AppComponent` 壳的三个实现文件：
|
||
|
||
1. `app.component.ts`— the component class code, written in TypeScript.
|
||
|
||
`app.component.ts`— 组件的类代码，这是用 TypeScript 写的。
|
||
|
||
1. `app.component.html`— the component template, written in HTML.
|
||
|
||
`app.component.html`— 组件的模板，这是用 HTML 写的。
|
||
|
||
1. `app.component.css`— the component's private CSS styles.
|
||
|
||
`app.component.ts`— 组件的私有 CSS 样式。
|
||
|
||
Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'.
|
||
|
||
打开组件的类文件 (`app.component.ts`)，并把 `title` 属性的值修改为 'Tour of Heroes' （英雄指南）。
|
||
|
||
<code-example path="toh-pt0/src/app/app.component.ts" region="set-title" title="app.component.ts (class title property)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
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.
|
||
|
||
打开组件的模板文件 `app.component.html` 并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容：
|
||
|
||
<code-example path="toh-pt0/src/app/app.component.html"
|
||
title="app.component.html (template)" linenums="false">
|
||
|
||
</code-example>
|
||
|
||
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.
|
||
|
||
双花括号语法是 Angular 的*插值绑定*语法。
|
||
这个插值绑定的意思是把组件的 `title` 属性的值绑定到 HTML 中的 `h1` 标记中。
|
||
|
||
The browser refreshes and displays the new application title.
|
||
|
||
浏览器自动刷新，并且显示出了新的应用标题。
|
||
|
||
{@a app-wide-styles}
|
||
|
||
## Add application styles
|
||
|
||
## 添加应用样式
|
||
|
||
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.
|
||
|
||
大多数应用都会努力让整个应用保持一致的外观。
|
||
因此，CLI 会生成一个空白的 `styles.css` 文件。
|
||
你可以把全应用级别的样式放进去。
|
||
|
||
Here's an excerpt from the `styles.css` for the _Tour of Heroes_ sample app.
|
||
|
||
下面是这个*英雄指南*范例应用中 `styles.css` 文件的片段。
|
||
|
||
<code-example path="toh-pt0/src/styles.1.css" title="src/styles.css (excerpt)">
|
||
|
||
</code-example>
|
||
|
||
## Final code review
|
||
|
||
## 查看最终代码
|
||
|
||
The source code for this tutorial and the complete _Tour of Heroes_ global styles
|
||
are available in the <live-example></live-example>.
|
||
|
||
本教程的源文件以及*英雄指南*的完整全局样式可以在 <live-example></live-example> 中看到。
|
||
|
||
Here are the code files discussed on this page.
|
||
|
||
下面是本页所提到的源代码：
|
||
|
||
<code-tabs>
|
||
|
||
<code-pane title="src/app/app.component.ts" path="toh-pt0/src/app/app.component.ts">
|
||
</code-pane>
|
||
|
||
<code-pane title="src/app/app.component.html" path="toh-pt0/src/app/app.component.html">
|
||
</code-pane>
|
||
|
||
<code-pane
|
||
title="src/styles.css (excerpt)"
|
||
path="toh-pt0/src/styles.1.css">
|
||
</code-pane>
|
||
|
||
</code-tabs>
|
||
|
||
## Summary
|
||
|
||
## 小结
|
||
|
||
* You created the initial application structure using the Angular CLI.
|
||
|
||
你使用 Angular CLI 创建了初始的应用结构。
|
||
|
||
* You learned that Angular components display data.
|
||
|
||
你学会了使用 Angular 组件来显示数据。
|
||
|
||
* You used the double curly braces of interpolation to display the app title.
|
||
|
||
你使用双花括号插值表达式显示了应用标题。
|