fix few compiling errors(live examples)

This commit is contained in:
Zhimin YE 2016-11-03 15:52:05 +00:00
parent 4578087fa5
commit 23984f8caf
5 changed files with 96 additions and 96 deletions

View File

@ -1,12 +1,12 @@
header(class="background-sky l-relative") header(class="background-sky l-relative")
.hero.background-superhero-paper.is-large .hero.background-superhero-paper.is-large
img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg') img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
h1.text-headline #{title}<br>#{subtitle} h1.text-headline #{title}<br>#{subtitle}
a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧! a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧!
announcement-bar announcement-bar
.announcement-bar-slide.clearfix .announcement-bar-slide.clearfix
img(src="/resources/images/logos/anglebrackets/devintersection.png" width="64") img(src="/resources/images/logos/anglebrackets/devintersection.png" width="64")
p 参加11月14-16号的<strong>DEVintersection Amsterdam</strong>! p 参加11月14-16号的<strong>DEVintersection Amsterdam</strong>!
a(href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button md-button") Register now a(href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button md-button") 立即注册!

View File

@ -84,7 +84,7 @@ figure
.l-sub-section .l-sub-section
p The code referenced on this page is available as a <live-example></live-example>. p The code referenced on this page is available as a <live-example></live-example>.
p 本章所引用的代码可以从这个#[+liveExampleLink2('在线例子')] p 本章所引用的代码可以从这个<live-example>在线例子</live-example>
.l-main-section .l-main-section
:marked :marked

View File

@ -148,7 +148,7 @@ block includes
当我们点击按钮的时候,显示的日志会在"**<samp>04/15/1988</samp>**"和"**<samp>Friday, April 15, 1988</samp>**"之间切换。 当我们点击按钮的时候,显示的日志会在"**<samp>04/15/1988</samp>**"和"**<samp>Friday, April 15, 1988</samp>**"之间切换。
figure.image-display figure.image-display
img(src='/resources/images/devguide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle") img(src='/resources/images/devguide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle")
:marked :marked
.l-sub-section .l-sub-section
@ -243,7 +243,7 @@ figure.image-display
现在,我们需要一个组件来演示这个管道。 现在,我们需要一个组件来演示这个管道。
+makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')(format='.') +makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')(format='.')
figure.image-display figure.image-display
img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster") img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster")
:marked :marked
Two things to note: Two things to note:
@ -261,7 +261,7 @@ figure.image-display
header Remember the declarations #{_array}! header Remember the declarations #{_array}!
header 别忘了declarations数组 header 别忘了declarations数组
:marked :marked
Angular reports an error if we neglect to list our custom pipe. Angular reports an error if we neglect to list our custom pipe.
We didn't list the `DatePipe` in our previous example because all We didn't list the `DatePipe` in our previous example because all
@ -292,7 +292,7 @@ figure.image-display
+makeExample('pipes/ts/app/power-boost-calculator.component.ts', null, '/app/power-boost-calculator.component.ts')(format='.') +makeExample('pipes/ts/app/power-boost-calculator.component.ts', null, '/app/power-boost-calculator.component.ts')(format='.')
figure.image-display figure.image-display
img(src='/resources/images/devguide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator") img(src='/resources/images/devguide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator")
.l-main-section .l-main-section
a#change-detection a#change-detection
@ -392,7 +392,7 @@ a#change-detection
这个*飞行英雄*的例子用检查框和其它显示内容扩展了原有代码,来帮我们体验这些效果。 这个*飞行英雄*的例子用检查框和其它显示内容扩展了原有代码,来帮我们体验这些效果。
figure.image-display figure.image-display
img(src='/resources/images/devguide/pipes/flying-heroes-anim.gif' alt="Flying Heroes") img(src='/resources/images/devguide/pipes/flying-heroes-anim.gif' alt="Flying Heroes")
:marked :marked
Replacing the #{_array} is an efficient way to signal to Angular that it should update the display. Replacing the #{_array} is an efficient way to signal to Angular that it should update the display.
@ -510,9 +510,9 @@ block pure-change
我们把`FlyingHeroesPipe`换成了`FlyingHeroesImpurePipe`。 我们把`FlyingHeroesPipe`换成了`FlyingHeroesImpurePipe`。
下面是完整的实现: 下面是完整的实现:
+makeTabs( +makeTabs(
'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts', 'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts',
'impure, pure', 'impure, pure',
'FlyingHeroesImpurePipe, FlyingHeroesPipe')(format='.') 'FlyingHeroesImpurePipe, FlyingHeroesPipe')(format='.')
:marked :marked
We inherit from `FlyingHeroesPipe` to prove the point that nothing changed internally. We inherit from `FlyingHeroesPipe` to prove the point that nothing changed internally.
@ -541,7 +541,7 @@ block pure-change
p. p.
唯一的重大改动就是管道。 唯一的重大改动就是管道。
我们可以在#[+liveExampleLink('在线例子')]中确认,当我们输入新的英雄甚至修改#[code heroes]数组时,这个#[i 会飞的英雄]的显示也跟着更新了。 我们可以在<live-example>在线例子</live-example>中确认,当我们输入新的英雄甚至修改#[code heroes]数组时,这个#[i 会飞的英雄]的显示也跟着更新了。
- var _dollar = _docsFor === 'ts' ? '$' : ''; - var _dollar = _docsFor === 'ts' ? '$' : '';
h3#async-pipe The impure #[i AsyncPipe] h3#async-pipe The impure #[i AsyncPipe]
@ -626,7 +626,7 @@ h3#async-pipe 非纯管道#[i AsyncPipe]
组件渲染起来是这样的: 组件渲染起来是这样的:
figure.image-display figure.image-display
img(src='/resources/images/devguide/pipes/hero-list.png' alt="Hero List") img(src='/resources/images/devguide/pipes/hero-list.png' alt="Hero List")
:marked :marked
### *JsonPipe* ### *JsonPipe*
@ -741,8 +741,8 @@ a(id="no-filter-pipe")
虽然不是很明显,但代码最小化方面也存在风险。想象一个用于英雄列表的排序管道。我们可能根据英雄原始属性中的`name`和`planet`进行排序,就像这样: 虽然不是很明显,但代码最小化方面也存在风险。想象一个用于英雄列表的排序管道。我们可能根据英雄原始属性中的`name`和`planet`进行排序,就像这样:
code-example(language="html") code-example(language="html")
&lt;!-- NOT REAL CODE! --> &lt;!-- NOT REAL CODE! -->
&lt;div *ngFor="let hero of heroes | orderBy:'name,planet'">&lt;/div> &lt;div *ngFor="let hero of heroes | orderBy:'name,planet'">&lt;/div>
:marked :marked
We identify the sort fields by text strings, expecting the pipe to reference a property value by indexing We identify the sort fields by text strings, expecting the pipe to reference a property value by indexing
(e.g., `hero['name']`). (e.g., `hero['name']`).

View File

@ -68,7 +68,7 @@ block includes
The <live-example></live-example> The <live-example></live-example>
demonstrates all of the syntax and code snippets described in this chapter. demonstrates all of the syntax and code snippets described in this chapter.
p. p.
这个#[+liveExampleLink2('在线例子')]演示了本章中描述的所有语法和代码片段。 这个<live-example>在线例子</live-example>演示了本章中描述的所有语法和代码片段。
.l-main-section .l-main-section
:marked :marked
@ -1034,7 +1034,7 @@ figure.image-display
We can set the value of an attribute directly with an **attribute binding**. We can set the value of an attribute directly with an **attribute binding**.
我们可以通过**Attribute绑定**来直接设置Attribute的值。 我们可以通过**Attribute绑定**来直接设置Attribute的值。
.l-sub-section .l-sub-section
:marked :marked
This is the only exception to the rule that a binding sets a target property. This is the only binding that creates and sets an attribute. This is the only exception to the rule that a binding sets a target property. This is the only binding that creates and sets an attribute.
@ -1235,7 +1235,7 @@ block style-property-name-dart-diff
事件绑定语法由等号左侧带圆括号的**目标事件**,和右侧一个引号中的[模板语句](#template-statements)组成。 事件绑定语法由等号左侧带圆括号的**目标事件**,和右侧一个引号中的[模板语句](#template-statements)组成。
下列事件绑定监听按钮的点击事件。无论什么时候,发生点击时,都会调用组件的`onSave()`方法。 下列事件绑定监听按钮的点击事件。无论什么时候,发生点击时,都会调用组件的`onSave()`方法。
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
:marked :marked
@ -1247,7 +1247,7 @@ block style-property-name-dart-diff
identifies the target event. In the following example, the target is the buttons click event. identifies the target event. In the following example, the target is the buttons click event.
**圆括号中的名称** —— 比如`(click)` —— 标记出了目标事件。在下面这个例子中目标是按钮的click事件。 **圆括号中的名称** —— 比如`(click)` —— 标记出了目标事件。在下面这个例子中目标是按钮的click事件。
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
:marked :marked
Some people prefer the `on-` prefix alternative, known as the **canonical form**: Some people prefer the `on-` prefix alternative, known as the **canonical form**:
@ -1389,29 +1389,29 @@ block style-property-name-dart-diff
这都是好事。 这都是好事。
// //
:marked :marked
### Event bubbling and propagation [TODO: reinstate this section when it becomes true] ### Event bubbling and propagation [TODO: reinstate this section when it becomes true]
Angular invokes the event-handling statement if the event is raised by the current element or one of its child elements. Angular invokes the event-handling statement if the event is raised by the current element or one of its child elements.
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-bubbling')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-bubbling')(format=".")
:marked :marked
Many DOM events, both [native](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers ) and [custom](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events ), bubble up their ancestor tree of DOM elements until an event handler along the way prevents further propagation. Many DOM events, both [native](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers ) and [custom](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events ), bubble up their ancestor tree of DOM elements until an event handler along the way prevents further propagation.
.l-sub-section .l-sub-section
:marked :marked
`EventEmitter` events dont bubble. `EventEmitter` events dont bubble.
:marked :marked
The result of an event binding statement determines whether The result of an event binding statement determines whether
[event propagation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation) [event propagation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation)
continues or stops with the current element. continues or stops with the current element.
Event propagation stops if the binding statement returns a falsey value (as does a method with no return value). Event propagation stops if the binding statement returns a falsey value (as does a method with no return value).
Clicking the button in the next example triggers a save; Clicking the button in the next example triggers a save;
the click doesn't make it to the outer `<div>` so the div's save handler is not called. the click doesn't make it to the outer `<div>` so the div's save handler is not called.
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-no-propagation')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-no-propagation')(format=".")
:marked :marked
Propagation continues if the statement returns a truthy value. In the next example, the click is heard by both the button Propagation continues if the statement returns a truthy value. In the next example, the click is heard by both the button
and the outer `<div>`, causing a double save. and the outer `<div>`, causing a double save.
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-propagation')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-propagation')(format=".")
#two-way #two-way
@ -1557,7 +1557,7 @@ a#ngModel
下面是实际操作中的所有变体形式,包括这个大写版本: 下面是实际操作中的所有变体形式,包括这个大写版本:
figure.image-display figure.image-display
img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations") img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations")
.l-main-section .l-main-section
:marked :marked
@ -1871,9 +1871,9 @@ block dart-no-truthy-falsey
.alert.is-critical .alert.is-critical
:marked :marked
A template input variable is **not** the same as a [template reference variable](#ref-vars)! A template input variable is **not** the same as a [template reference variable](#ref-vars)!
模板输入变量和[模板引用变量](#ref-vars)**不是**一回事! 模板输入变量和[模板引用变量](#ref-vars)**不是**一回事!
:marked :marked
We use this variable within the template to access a heros properties, We use this variable within the template to access a heros properties,
@ -1935,7 +1935,7 @@ block dart-no-truthy-falsey
Now set the `NgForTrackBy` directive to that *tracking* function. Now set the `NgForTrackBy` directive to that *tracking* function.
现在,把`NgForTrackBy`指令设置为那个*追踪*函数。 现在,把`NgForTrackBy`指令设置为那个*追踪*函数。
+makeExample('template-syntax/ts/app/app.component.html', 'NgForTrackBy-2')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'NgForTrackBy-2')(format=".")
:marked :marked
@ -2055,9 +2055,9 @@ block remember-the-brackets
上面这种情况下,它管理两组`NgSwitchCase`和`NgSwitchDefault`指令,一次是(*)前缀的版本,一次是展开模板后的版本。 上面这种情况下,它管理两组`NgSwitchCase`和`NgSwitchDefault`指令,一次是(*)前缀的版本,一次是展开模板后的版本。
我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的: 我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的:
figure.image-display figure.image-display
img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch") img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch")
:marked :marked
### Expanding `*ngFor` ### Expanding `*ngFor`
### 展开`*ngFor` ### 展开`*ngFor`
@ -2297,7 +2297,7 @@ figure.image-display
_输入_和_输出_这两个词是从目标指令的视角来说的。 _输入_和_输出_这两个词是从目标指令的视角来说的。
figure.image-display figure.image-display
img(src='/resources/images/devguide/template-syntax/input-output.png' alt="输入和输出") img(src='/resources/images/devguide/template-syntax/input-output.png' alt="输入和输出")
:marked :marked
`HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent` `HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent`
because data flows *into* that property from a template binding expression. because data flows *into* that property from a template binding expression.

View File

@ -29,7 +29,7 @@ block includes
Run the <live-example></live-example> for this part. Run the <live-example></live-example> for this part.
p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-6')] p 运行这部分的<live-example>在线例子</live-example>
.l-main-section .l-main-section
:marked :marked
@ -140,7 +140,7 @@ block http-providers
Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick
这个版本的<span ngio-ex>!{_appModuleTsVsMainTs}</span>就是用来实现这个小花招的: 这个版本的<span ngio-ex>!{_appModuleTsVsMainTs}</span>就是用来实现这个小花招的:
+makeExcerpt(_appModuleTsVsMainTs, 'v2') +makeExcerpt(_appModuleTsVsMainTs, 'v2')
block backend block backend
@ -152,7 +152,7 @@ block backend
导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。 导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。
`InMemoryWebApiModule`将`Http`客户端默认的后端服务(这是一个辅助服务,负责与远程服务器对话)替换成了*内存Web API*服务: `InMemoryWebApiModule`将`Http`客户端默认的后端服务(这是一个辅助服务,负责与远程服务器对话)替换成了*内存Web API*服务:
+makeExcerpt(_appModuleTsVsMainTs, 'in-mem-web-api', '') +makeExcerpt(_appModuleTsVsMainTs, 'in-mem-web-api', '')
:marked :marked
@ -245,9 +245,9 @@ block get-heroes-details
converting that `Observable` to a `Promise` using the `toPromise` operator. converting that `Observable` to a `Promise` using the `toPromise` operator.
*现在*,我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象,回到已经熟悉的地盘。 *现在*,我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象,回到已经熟悉的地盘。
+makeExcerpt('app/hero.service.ts', 'to-promise', '') +makeExcerpt('app/hero.service.ts', 'to-promise', '')
:marked :marked
Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ... Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ...
not out of the box. not out of the box.
@ -263,7 +263,7 @@ block get-heroes-details
有一大票像`toPromise`这样的操作符,会扩展`Observable`,为其添加有用的能力。 有一大票像`toPromise`这样的操作符,会扩展`Observable`,为其添加有用的能力。
如果我们希望得到那些能力,就得自己添加那些操作符。 如果我们希望得到那些能力,就得自己添加那些操作符。
那很容易只要从RxJS库中导入它们就可以了就像这样 那很容易只要从RxJS库中导入它们就可以了就像这样
+makeExcerpt('app/hero.service.ts', 'rxjs', '') +makeExcerpt('app/hero.service.ts', 'rxjs', '')
:marked :marked
@ -369,7 +369,7 @@ block get-heroes-details
我们已经可以在英雄详情中编辑英雄的名字了。来试试吧。在输入的时候,页头上的英雄名字也会随之更新。 我们已经可以在英雄详情中编辑英雄的名字了。来试试吧。在输入的时候,页头上的英雄名字也会随之更新。
不过当我们点了后退按钮时,这些更新就丢失了。 不过当我们点了后退按钮时,这些更新就丢失了。
.l-sub-section .l-sub-section
:marked :marked
Updates weren't lost before, what's happening? Updates weren't lost before, what's happening?
@ -464,14 +464,14 @@ block get-heroes-details
Finally, we implement the `create` method in the `HeroService` class. Finally, we implement the `create` method in the `HeroService` class.
最后,我们在`HeroService`类中实现这个`create`方法。 最后,我们在`HeroService`类中实现这个`create`方法。
+makeExcerpt('app/hero.service.ts', 'create') +makeExcerpt('app/hero.service.ts', 'create')
:marked :marked
Refresh the browser and create some new heroes! Refresh the browser and create some new heroes!
刷新浏览器,并创建一些新的英雄! 刷新浏览器,并创建一些新的英雄!
.l-main-section .l-main-section
:marked :marked
## Delete a hero ## Delete a hero
@ -636,14 +636,14 @@ block observables-section-intro
The component template is simple &mdash; just a text box and a list of matching search results. The component template is simple &mdash; just a text box and a list of matching search results.
组件模板很简单,就是一个输入框和一个相匹配的搜索结果列表。 组件模板很简单,就是一个输入框和一个相匹配的搜索结果列表。
+makeExample('app/hero-search.component.html') +makeExample('app/hero-search.component.html')
:marked :marked
We'll also want to add styles for the new component. We'll also want to add styles for the new component.
我们还要往这个新组件中添加样式。 我们还要往这个新组件中添加样式。
+makeExample('app/hero-search.component.css') +makeExample('app/hero-search.component.css')
:marked :marked
@ -666,7 +666,7 @@ block observables-section-intro
Time to create the `HeroSearchComponent` class and metadata. Time to create the `HeroSearchComponent` class and metadata.
该创建`HeroSearchComponent`类及其元数据了。 该创建`HeroSearchComponent`类及其元数据了。
+makeExample('app/hero-search.component.ts') +makeExample('app/hero-search.component.ts')
:marked :marked
@ -677,7 +677,7 @@ block observables-section-intro
Let's focus on the `!{_priv}searchTerms`: Let's focus on the `!{_priv}searchTerms`:
仔细看下这个`searchTerms` 仔细看下这个`searchTerms`
+makeExcerpt('app/hero-search.component.ts', 'searchTerms', '') +makeExcerpt('app/hero-search.component.ts', 'searchTerms', '')
block search-criteria-intro block search-criteria-intro
@ -691,7 +691,7 @@ block search-criteria-intro
Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`. Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`.
每当调用`search`时都会调用`next`来把新的字符串放进该主体的_可观察_流中。 每当调用`search`时都会调用`next`来把新的字符串放进该主体的_可观察_流中。
:marked :marked
<a id="ngoninit"></a> <a id="ngoninit"></a>
#### Initialize the _**heroes**_ property (_**ngOnInit**_) #### Initialize the _**heroes**_ property (_**ngOnInit**_)
@ -769,7 +769,7 @@ block observable-transformers
注意_取消_`HeroSearchService`的可观察对象并不会实际中止abort一个未完成的HTTP请求除非有一天我们支持了这个特性这个问题我们以后再讨论。 注意_取消_`HeroSearchService`的可观察对象并不会实际中止abort一个未完成的HTTP请求除非有一天我们支持了这个特性这个问题我们以后再讨论。
目前我们的做法只是丢弃不希望的结果。 目前我们的做法只是丢弃不希望的结果。
:marked :marked
* `catch` intercepts a failed observable. * `catch` intercepts a failed observable.
Our simple example prints the error to the console; a real life application should do better. Our simple example prints the error to the console; a real life application should do better.
@ -797,7 +797,7 @@ block observable-transformers
Many authorities say we should do just that. Many authorities say we should do just that.
有很多权威人士建议我们这样做。 有很多权威人士建议我们这样做。
:marked :marked
We take a different approach in this example. We take a different approach in this example.
We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file. We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
@ -833,7 +833,7 @@ block observable-transformers
and add it to the `!{_declarations}` !{_array}: and add it to the `!{_declarations}` !{_array}:
最后,从<span ngio-ex>hero-search.component.ts</span>中导入`HeroSearchComponent`并将其添加到`declarations`数组中。 最后,从<span ngio-ex>hero-search.component.ts</span>中导入`HeroSearchComponent`并将其添加到`declarations`数组中。
+makeExcerpt(declFile, 'search') +makeExcerpt(declFile, 'search')
:marked :marked
@ -933,37 +933,37 @@ block filetree
block file-summary block file-summary
+makeTabs( +makeTabs(
`toh-6/ts/app/app.component.ts, `toh-6/ts/app/app.component.ts,
toh-6/ts/app/app.module.ts, toh - 6 / ts / app / app.module.ts,
toh-6/ts/app/heroes.component.ts, toh - 6 / ts / app / heroes.component.ts,
toh-6/ts/app/heroes.component.html, toh - 6 / ts / app / heroes.component.html,
toh-6/ts/app/heroes.component.css, toh - 6 / ts / app / heroes.component.css,
toh-6/ts/app/hero-detail.component.ts, toh - 6 / ts / app / hero - detail.component.ts,
toh-6/ts/app/hero-detail.component.html, toh - 6 / ts / app / hero - detail.component.html,
toh-6/ts/app/hero.service.ts, toh - 6 / ts / app / hero.service.ts,
toh-6/ts/app/in-memory-data.service.ts`, toh - 6 / ts / app / in -memory - data.service.ts`,
',,,,,,,,', ',,,,,,,,',
`app.comp...ts, `app.comp...ts,
app.mod...ts, app.mod...ts,
heroes.comp...ts, heroes.comp...ts,
heroes.comp...html, heroes.comp...html,
heroes.comp...css, heroes.comp...css,
hero-detail.comp...ts, hero - detail.comp...ts,
hero-detail.comp...html, hero - detail.comp...html,
hero.service.ts, hero.service.ts,
in-memory-data.service.ts` in-memory-data.service.ts`
) )
+makeTabs( +makeTabs(
`toh-6/ts/app/hero-search.service.ts, `toh-6/ts/app/hero-search.service.ts,
toh-6/ts/app/hero-search.component.ts, toh - 6 / ts / app / hero - search.component.ts,
toh-6/ts/app/hero-search.component.html, toh - 6 / ts / app / hero - search.component.html,
toh-6/ts/app/hero-search.component.css, toh - 6 / ts / app / hero - search.component.css,
toh-6/ts/app/rxjs-extensions.ts`, toh - 6 / ts / app / rxjs - extensions.ts`,
null, null,
`hero-search.service.ts, `hero-search.service.ts,
hero-search.component.ts, hero - search.component.ts,
hero-search.component.html, hero - search.component.html,
hero-search.component.css, hero - search.component.css,
rxjs-extensions.ts` rxjs - extensions.ts`
) )