diff --git a/aio/content/tutorial/toh-pt0.md b/aio/content/tutorial/toh-pt0.md index c26514e3d6..78c21556aa 100644 --- a/aio/content/tutorial/toh-pt0.md +++ b/aio/content/tutorial/toh-pt0.md @@ -1,8 +1,14 @@ # 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),请执行: @@ -12,8 +18,12 @@ ## Create a new application +## 创建新应用 + Create a new project named `angular-tour-of-heroes` with this CLI command. +使用 CLI 命令创建一个名叫 `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. +这样 Angular CLI 就创建了一个带默认应用及其支持文件的新项目。 + ## Serve the application +## 启动应用服务器 + Go to the project directory and launch the application. +进入项目目录,并启动这个应用。 + 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, 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/`。 + 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' (英雄指南)。 + @@ -74,6 +118,8 @@ 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 内容: + @@ -83,29 +129,48 @@ 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 中的 header 标记中。 + 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` 文件的片段。 + ## Final code review +## 最终的代码 + The source code for this tutorial and the complete _Tour of Heroes_ global styles are available in the . +本教程的源文件以及*英雄指南*的完整全局样式可以在 中看到。 + Here are the code files discussed on this page. +下面是本页所提到的源代码: + @@ -127,6 +192,12 @@ Here are the code files discussed on this page. * 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. + + 你使用双花括号插值表达式显示了应用标题。