iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 翻译了 应用的壳 一章

Browse Source
This commit is contained in:
Zhicheng Wang 2018-03-08 13:09:40 +08:00
parent d24f7c74f2
commit 09d93793ff
1 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
aio/content/tutorial/toh-pt0.md
View File

@ -1,9 +1,15 @@
# The Application Shell # The Application Shell
# 应用的“外壳”
## Install the Angular CLI ## Install the Angular CLI
## 安装 Angular CLI 命令行工具
Install the [Angular CLI](https://github.com/angular/angular-cli), if you haven't already done so. 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"> <code-example language="sh" class="code-shell">
npm install -g @angular/cli npm install -g @angular/cli
@ -12,8 +18,12 @@
## Create a new application ## Create a new application
## 创建新应用
Create a new project named `angular-tour-of-heroes` with this CLI command. 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"> <code-example language="sh" class="code-shell">
ng new angular-tour-of-heroes ng new angular-tour-of-heroes
@ -22,10 +32,16 @@ Create a new project named `angular-tour-of-heroes` with this CLI command.
The Angular CLI generated a new project with a default application and supporting files. The Angular CLI generated a new project with a default application and supporting files.
这样 Angular CLI 就创建了一个带默认应用及其支持文件的新项目。
## Serve the application ## Serve the application
## 启动应用服务器
Go to the project directory and launch the application. Go to the project directory and launch the application.
进入项目目录，并启动这个应用。
<code-example language="sh" class="code-shell"> <code-example language="sh" class="code-shell">
cd angular-tour-of-heroes cd angular-tour-of-heroes
@ -38,34 +54,62 @@ Go to the project directory and launch the application.
The `ng serve` command builds the app, starts the development server, 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. 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/`. The `--open` flag opens a browser to `http://localhost:4200/`.
`--open` 标志会打开浏览器，并访问 `http://localhost:4200/`。
</div> </div>
You should see the app running in your browser. You should see the app running in your browser.
你会发现本应用正运行在浏览器中。
## Angular components ## Angular components
## Angular 组件
The page you see is the _application shell_. The page you see is the _application shell_.
The shell is controlled by an Angular **component** named `AppComponent`. The shell is controlled by an Angular **component** named `AppComponent`.
你所看到的这个页面就是*应用的外壳*。
这个外壳是被一个名叫 `AppComponent` 的 Angular 组件控制的。
_Components_ are the fundamental building blocks of Angular applications. _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. They display data on the screen, listen for user input, and take action based on that input.
*组件*是 Angular 应用中的基本构造块。
它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。
## Change the application title ## Change the application title
## 修改应用标题
Open the project in your favorite editor or IDE and navigate to the `src/app` folder. 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: You'll find the implementation of the shell `AppComponent` distributed over three files:
你会在这里看到 `AppComponent` 壳的三个实现文件：
1. `app.component.ts`&mdash; the component class code, written in TypeScript. 1. `app.component.ts`&mdash; the component class code, written in TypeScript.
`app.component.ts`&mdash; 组件的类代码，这是用 TypeScript 写的。
1. `app.component.html`&mdash; the component template, written in HTML. 1. `app.component.html`&mdash; the component template, written in HTML.
`app.component.html`&mdash; 组件的模板，这是用 HTML 写的。
1. `app.component.css`&mdash; the component's private CSS styles. 1. `app.component.css`&mdash; the component's private CSS styles.
`app.component.ts`&mdash; 组件的私有 CSS 样式。
Open the component class file (`app.component.ts`) and change the value of the `title` property to 'Tour of Heroes'. 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 path="toh-pt0/src/app/app.component.ts" region="set-title" title="app.component.ts (class title property)" linenums="false">
</code-example> </code-example>
@ -74,6 +118,8 @@ Open the component template file (`app.component.html`) and
delete the default template generated by the Angular CLI. delete the default template generated by the Angular CLI.
Replace it with the following line of HTML. Replace it with the following line of HTML.
打开组件的模板文件 `app.component.html` 并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容：
<code-example path="toh-pt0/src/app/app.component.html" <code-example path="toh-pt0/src/app/app.component.html"
title="app.component.html (template)" linenums="false"> title="app.component.html (template)" linenums="false">
@ -83,29 +129,48 @@ The double curly braces are Angular's *interpolation binding* syntax.
This interpolation binding presents the component's `title` property value This interpolation binding presents the component's `title` property value
inside the HTML header tag. inside the HTML header tag.
双花括号语法是 Angular 的*插值绑定*语法。
这个插值绑定的意思是把组件的 `title` 属性的值绑定到 HTML 中的 header 标记中。
The browser refreshes and displays the new application title. The browser refreshes and displays the new application title.
浏览器自动刷新，并且显示出了新的应用标题。
{@a app-wide-styles} {@a app-wide-styles}
## Add application styles ## Add application styles
## 添加应用样式
Most apps strive for a consistent look across the application. Most apps strive for a consistent look across the application.
The CLI generated an empty `styles.css` for this purpose. The CLI generated an empty `styles.css` for this purpose.
Put your application-wide styles there. Put your application-wide styles there.
大多数应用都会努力让整个应用保持一致的外观。
因此，CLI 会生成一个空白的 `styles.css` 文件。
你可以把全应用级别的样式放进去。
Here's an excerpt from the `styles.css` for the _Tour of Heroes_ sample app. 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 path="toh-pt0/src/styles.1.css" title="src/styles.css (excerpt)">
</code-example> </code-example>
## Final code review ## Final code review
## 最终的代码
The source code for this tutorial and the complete _Tour of Heroes_ global styles The source code for this tutorial and the complete _Tour of Heroes_ global styles
are available in the <live-example></live-example>. are available in the <live-example></live-example>.
本教程的源文件以及*英雄指南*的完整全局样式可以在 <live-example></live-example> 中看到。
Here are the code files discussed on this page. Here are the code files discussed on this page.
下面是本页所提到的源代码：
<code-tabs> <code-tabs>
<code-pane title="src/app/app.component.ts" path="toh-pt0/src/app/app.component.ts"> <code-pane title="src/app/app.component.ts" path="toh-pt0/src/app/app.component.ts">
@ -127,6 +192,12 @@ Here are the code files discussed on this page.
* You created the initial application structure using the Angular CLI. * You created the initial application structure using the Angular CLI.
你使用 Angular CLI 创建了初始的应用结构。
* You learned that Angular components display data. * You learned that Angular components display data.
你学会了使用 Angular 组件来显示数据。
* You used the double curly braces of interpolation to display the app title. * You used the double curly braces of interpolation to display the app title.
你使用双花括号插值表达式显示了应用标题。