parent
da8bf0efb9
commit
d21325fa55
|
@ -450,17 +450,17 @@ include _util-fns
|
|||
render application [views]. Components are usually represented as HTML elements.
|
||||
They are the building blocks of an Angular application and the
|
||||
developer can expect to write a lot of them.
|
||||
[组件](#component): 结合了程序逻辑和一个用来渲染试图的HTML模板[views]。组件一般由HTML元素代表。它们是用来组建Angular应用程序的基本单元,所以可以预料到开发人员会写很多很多组件。
|
||||
1. [组件](#component): 结合了程序逻辑和一个用来渲染试图的HTML模板[views]。组件一般由HTML元素代表。它们是用来组建Angular应用程序的基本单元,所以可以预料到开发人员会写很多很多组件。
|
||||
|
||||
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
|
||||
other HTML elements, attributes, properties, and components. They are usually represented
|
||||
as HTML attributes, hence the name.
|
||||
[特征指令](#attribute-directive):可以监控和修改HTML元素、元素特征、属性和组件等的行为。它们一般有HTML元素特征(名)来体现。
|
||||
1. [特征指令](#attribute-directive):可以监控和修改HTML元素、元素特征、属性和组件等的行为。它们一般有HTML元素特征(名)来体现。
|
||||
|
||||
1. [Structural Directives](#structural-directive), a directive responsible for
|
||||
shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
|
||||
elements and their children.
|
||||
[结构型指令](#structural-directive):负责塑造或重塑HTML布局。一般都是通过添加、删除或者操作HTML元素和他的子级元素来实现的。
|
||||
1. [结构型指令](#structural-directive):负责塑造或重塑HTML布局。一般都是通过添加、删除或者操作HTML元素和他的子级元素来实现的。
|
||||
// #enddocregion d2
|
||||
|
||||
// #docregion e1
|
||||
|
|
|
@ -152,32 +152,55 @@ table(width="100%")
|
|||
These snippets are excerpts from a sample application that accompanies the chapter.
|
||||
|
||||
每个章节中都包含一些能在我们自己的应用中复用的代码片段。
|
||||
这些片段摘抄自本章附带的范例应用。
|
||||
这些片段节选自该章节附带的范例应用。
|
||||
|
||||
Look for a link to a running version of that sample near the top of each page
|
||||
such as this [live example](/resources/live-examples/architecture/ts/plnkr.html) from the [Architecture](architecture.html) chapter.
|
||||
|
||||
在每页靠近顶部的地方可以看到一个链接,指向这个范例的运行版本,比如[架构](architecture.html)一章中的[鲜活范例](/resources/live-examples/architecture/ts/plnkr.html)。
|
||||
|
||||
The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
|
||||
|
||||
这个链接启动一个基于浏览器的代码编辑器,在这里,我们可以调试、修改、保存和下载这些代码。
|
||||
|
||||
A few early chapters are written as tutorials and are clearly marked as such.
|
||||
Most chapters are *not* tutorials.
|
||||
They highlight key points in code rather than explain each step necessary to build the sample.
|
||||
We can always get the full source by way of the live link.
|
||||
|
||||
少量早期的章节是作为教程来写的,并且被清晰地标注出来。
|
||||
但大部分章节都不是教程。
|
||||
他们的目的是展示代码中的关键点,而不是解释构建这个范例所需的每一个步骤。
|
||||
我们总能从鲜活范例的链接找到完整的源代码。
|
||||
|
||||
## References
|
||||
## 参考资料
|
||||
|
||||
The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
|
||||
|
||||
[小抄](cheatsheet.html)列出了Angular在常见场景下的语法。
|
||||
|
||||
The [Glossary](glossary.html) defines terms that Angular developers should know.
|
||||
|
||||
[词汇表](glossary.html)定义了Angular开发者所需要知道的词汇。
|
||||
|
||||
The [API Guide](../api/) is the authority on every public-facing member of the Angular libraries.
|
||||
|
||||
[API指南](../api/)是关于Angular库中每一个公开成员的权威指南。
|
||||
|
||||
# Feedback
|
||||
# 提供反馈
|
||||
|
||||
We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner.
|
||||
|
||||
我们欢迎您的反馈!请点击Banner右上角的图标,给我们留言。
|
||||
|
||||
Post *documentation* issues and pull requests on the
|
||||
[angular.io](https://github.com/angular/angular.io) github repository.
|
||||
|
||||
要发 *文档方面* 的问题和Pull Requests,请来Github上的[angular.io](https://github.com/angular/angular.io)仓库。
|
||||
|
||||
Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
|
||||
|
||||
要发 *Angular 2本身* 的问题,请来Github上的[angular](https://github.com/angular/angular)仓库。
|
||||
// #enddocregion the-rest
|
||||
|
|
|
@ -18,15 +18,14 @@ a(id="top")
|
|||
# Table of Contents
|
||||
# 目录
|
||||
1. [Jasmine Testing 101](#jasmine-101)
|
||||
- setup to run Jasmine tests in the browser
|
||||
- basic Jasmine testing skills
|
||||
- write simple Jasmine tests in TypeScript
|
||||
- debug a test in the browser
|
||||
|
||||
1. [Jasmine测试101](#jasmine-101)
|
||||
- setup to run Jasmine tests in the browser
|
||||
- 设置浏览器来运行Jasmine测试
|
||||
- basic Jasmine testing skills
|
||||
- 基础Jasmine测试技能
|
||||
- write simple Jasmine tests in TypeScript
|
||||
- 实用TypeScript来编写简单的Jasmine测试
|
||||
- debug a test in the browser
|
||||
- 在浏览器里调试测试
|
||||
|
||||
1. [The Application Under Test](#aut)
|
||||
|
@ -34,25 +33,23 @@ a(id="top")
|
|||
1. [被测试的应用程序](#aut)
|
||||
|
||||
1. [First app test](#first-app-tests)
|
||||
- test a simple application interface outside of Angular
|
||||
- where to put the test file
|
||||
- load a test file with systemJS
|
||||
|
||||
1. [第一个应用程序测试](#first-app-tests)
|
||||
- test a simple application interface outside of Angular
|
||||
- 在Angular之外,测试一个简单的应用程序接口
|
||||
- where to put the test file
|
||||
- 测试文件存放到哪儿
|
||||
- load a test file with systemJS
|
||||
- 使用systemJS调用一个测试文件
|
||||
|
||||
1. [Pipe driven development](#pipe-testing)
|
||||
- create a test before creating a class
|
||||
- load multiple test files in our test harness, using system.js
|
||||
- add the Angular 2 library to our test harness
|
||||
- watch the new test fail, and fix it
|
||||
|
||||
1. [测试驱动开发一个管道](#pipe-testing)
|
||||
- create a test before creating a class
|
||||
- 在新建类之前,新建一个测试
|
||||
- load multiple test files in our test harness, using system.js
|
||||
- 使用system.js,加载多个测试文件到我们的测试套装里
|
||||
- add the Angular 2 library to our test harness
|
||||
- 添加Angular 2的类库到我们的测试套装里
|
||||
- watch the new test fail, and fix it
|
||||
- 看着新测试失败,然后修复它
|
||||
|
||||
1. Test an Asynchronous Service (forthcoming)
|
||||
|
|
|
@ -728,12 +728,13 @@ code-example(format="").
|
|||
npm start
|
||||
:marked
|
||||
That command runs two parallel node processes
|
||||
1. The TypeScript compiler in watch mode
|
||||
1. A static server called **lite-server** that loads `index.html` in a browser
|
||||
and refreshes the browser when application files change
|
||||
|
||||
此命令会运行两个并行的node进程:
|
||||
|
||||
1. The TypeScript compiler in watch mode
|
||||
1. TypeScript编译器,运行在监视(watch)模式
|
||||
1. A static server called **lite-server** that loads `index.html` in a browser
|
||||
and refreshes the browser when application files change
|
||||
1. 一个名叫 **lite-server** 的静态服务器,它把`index.html`加载到浏览器中
|
||||
这样,当应用的文件发生变化时,它会自动刷新浏览器。
|
||||
|
||||
|
|
|
@ -90,9 +90,7 @@ code-example(format="." language="bash").
|
|||
Second, we can't easily share that list of heroes with other components and views.
|
||||
|
||||
目前,`AppComponent`显示的是自己定义的一个mock英雄数据。
|
||||
我们的改进点至少有两个:
|
||||
1. 定义英雄数据不应该是这个组件的任务。
|
||||
2. 要想把这个英雄列表数据共享给其它组件和视图可不容易。
|
||||
我们的改进点至少有两个:1. 定义英雄数据不应该是这个组件的任务。2. 要想把这个英雄列表数据共享给其它组件和视图可不容易。
|
||||
|
||||
We can refactor this hero data acquisition business to a single service that provides heroes and
|
||||
share that service with all components that need heroes.
|
||||
|
@ -270,11 +268,11 @@ code-example(format="." language="bash").
|
|||
### 注入 *HeroService*
|
||||
|
||||
Two lines replace the one line of *new*:
|
||||
1. we add a constructor.
|
||||
1. we add to the component's `providers` metadata
|
||||
|
||||
用两行代码代替用`new`时的一行:
|
||||
1. we add a constructor.
|
||||
1. 添加一个构造函数
|
||||
1. we add to the component's `providers` metadata
|
||||
1. 添加组件的`providers`元数据
|
||||
|
||||
Here's the constructor:
|
||||
|
|
|
@ -558,13 +558,13 @@ code-example(format="." language="bash").
|
|||
|
||||
Although we display the details of a selected hero at the bottom of the `HeroesComponent`,
|
||||
we don't yet *navigate* to the `HeroDetailComponent` in the three ways specified in our requirements:
|
||||
1. from the *Dashboard* to a selected hero.
|
||||
1. from the *Heroes* list to a selected hero.
|
||||
1. from a "deep link" URL pasted into the browser address bar.
|
||||
|
||||
虽然我们在`HeroesComponent`组件的底部显示了所选英雄的详情,但我们还从没有 *导航* 到`HeroDetailComponent`组件,不管用我们需求中指定的三种方式中的哪一种:
|
||||
1. from the *Dashboard* to a selected hero.
|
||||
1. 从 *仪表盘(Dashboard)* 导航到一个选定的英雄。
|
||||
1. from the *Heroes* list to a selected hero.
|
||||
1. 从 *英雄列表(Heroes)* 导航到一个选定的英雄。
|
||||
1. from a "deep link" URL pasted into the browser address bar.
|
||||
1. 把一个指向他的"深链接"URL粘贴到浏览器的地址栏。
|
||||
|
||||
Adding a `'HeroDetail'` route seem an obvious place to start.
|
||||
|
@ -802,11 +802,11 @@ code-example(format='').
|
|||
+makeExample('toh-5/ts/app/dashboard.component.ts','goto-detail', 'app/dashboard.component.ts (gotoDetail)')(format=".")
|
||||
:marked
|
||||
The `gotoDetail` method navigates in two steps:
|
||||
1. set a route *link parameters array*
|
||||
1. pass the array to the router's navigate method.
|
||||
|
||||
`gotoDetail`方法分两步完成导航:
|
||||
1. set a route *link parameters array*
|
||||
1. 生成路由的 *链接参数数组*
|
||||
1. pass the array to the router's navigate method.
|
||||
1. 把这个数组传给路由器的navigate方法。
|
||||
|
||||
We wrote *link parameters arrays* in the `AppComponent` for the navigation links.
|
||||
|
@ -916,13 +916,13 @@ figure.image-display
|
|||
要想在HTML和CSS的噪音中找出组件的工作逻辑太难了。
|
||||
|
||||
Let's migrate the template and the styles to their own files before we make any more changes:
|
||||
1. *Cut-and-paste* the template contents into a new `heroes.component.html` file.
|
||||
1. *Cut-and-paste* the styles contents into a new `heroes.component.css` file.
|
||||
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
|
||||
|
||||
在做更多修改之前,我们先把模板和样式移到它们自己的文件中去:
|
||||
1. *Cut-and-paste* the template contents into a new `heroes.component.html` file.
|
||||
1. *剪切并粘贴* 模板内容到新的`heroes.component.html`文件。
|
||||
1. *Cut-and-paste* the styles contents into a new `heroes.component.css` file.
|
||||
1. *剪切并粘贴* 样式内容到新的`heroes.component.css`文件。
|
||||
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
|
||||
1. *设置* 组件元数据的`templateUrl`和`styleUrls`属性,来分别引用这两个文件。
|
||||
|
||||
The revised component data looks like this:
|
||||
|
@ -931,14 +931,14 @@ figure.image-display
|
|||
+makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (修改过的元数据)')(format=".")
|
||||
:marked
|
||||
Now we can see what's going on as we update the component class along the same lines as the dashboard:
|
||||
1. Import the `router`
|
||||
1. Inject the `router` in the constructor (along with the `HeroService`)
|
||||
1. Implement the `gotoDetail` method by calling the `router.navigate` method
|
||||
with a two-part 'HeroDetail' *link parameters array*.
|
||||
|
||||
现在,我们一下就明白该怎么像仪表盘中那样更新组件类了:
|
||||
1. Import the `router`
|
||||
1. 导入`router`
|
||||
1. Inject the `router` in the constructor (along with the `HeroService`)
|
||||
1. 把`router`注入到构造函数中(就像`HeroService`那样)
|
||||
1. Implement the `gotoDetail` method by calling the `router.navigate` method
|
||||
with a two-part 'HeroDetail' *link parameters array*.
|
||||
1. 实现`gotoDetail`方法:以`HeroDetail`和 *链接参数数组* 为参数调用`router.navigate`方法。
|
||||
|
||||
Here's the revised component class:
|
||||
|
@ -1130,19 +1130,18 @@ figure.image-display
|
|||
### The Road Behind
|
||||
### 走过的路
|
||||
We travelled a great distance in this chapter.
|
||||
- We added the Angular *Component Router* to navigate among different components.
|
||||
- We learned how to create router links to represent navigation menu items
|
||||
- We used router parameters to navigate to the details of user selected hero
|
||||
- We shared the `HeroService` among multiple components
|
||||
- We moved HTML and CSS out of the component file and into their own files.
|
||||
- We added the `uppercase` pipe to format data
|
||||
|
||||
在本章中,我们往前走了很远:
|
||||
- We added the Angular *Component Router* to navigate among different components.
|
||||
- 我们添加了Angular *组件路由器* 在各个不同的组件之间导航。
|
||||
- We learned how to create router links to represent navigation menu items
|
||||
- 我们学会了如何创建路由链接来表示导航栏的菜单项。
|
||||
- We used router parameters to navigate to the details of user selected hero
|
||||
- 我们使用路由参数来导航到用户所选的英雄详情。
|
||||
- We shared the `HeroService` among multiple components
|
||||
- 我们在多个组件之间共享了`HeroService`服务。
|
||||
- We moved HTML and CSS out of the component file and into their own files.
|
||||
- 我们把HTML和CSS从组件中移出来,放到它们自己的文件中去。
|
||||
- We added the `uppercase` pipe to format data
|
||||
- 我们添加了一个`uppercase`管道,来格式化数据。
|
||||
|
||||
### The Road Ahead
|
||||
|
|
Loading…
Reference in New Issue