From 23984f8caf0556f1f3f5c1beed51a154a999f89a Mon Sep 17 00:00:00 2001 From: Zhimin YE Date: Thu, 3 Nov 2016 15:52:05 +0000 Subject: [PATCH] fix few compiling errors(live examples) --- public/_includes/_hero-home.jade | 18 ++-- public/docs/ts/latest/guide/architecture.jade | 2 +- public/docs/ts/latest/guide/pipes.jade | 24 ++--- .../docs/ts/latest/guide/template-syntax.jade | 54 +++++------ public/docs/ts/latest/tutorial/toh-pt6.jade | 94 +++++++++---------- 5 files changed, 96 insertions(+), 96 deletions(-) diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index 6261d7506b..ded8a78114 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -1,12 +1,12 @@ header(class="background-sky l-relative") - .hero.background-superhero-paper.is-large - img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg') - h1.text-headline #{title}
#{subtitle} - a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧！ + .hero.background-superhero-paper.is-large + img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg') + h1.text-headline #{title}
#{subtitle} + a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧！ - announcement-bar - .announcement-bar-slide.clearfix - img(src="/resources/images/logos/anglebrackets/devintersection.png" width="64") - p 参加11月14-16号的DEVintersection Amsterdam! - a(href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button md-button") Register now + announcement-bar + .announcement-bar-slide.clearfix + img(src="/resources/images/logos/anglebrackets/devintersection.png" width="64") + p 参加11月14-16号的DEVintersection Amsterdam! + a(href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button md-button") 立即注册！ diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index 514c4bc037..0bc47b0348 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -84,7 +84,7 @@ figure .l-sub-section p The code referenced on this page is available as a . - p 本章所引用的代码可以从这个#[+liveExampleLink2('在线例子')]。 + p 本章所引用的代码可以从这个在线例子。 .l-main-section :marked diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade index 7c7ed4816c..b5692f3c13 100644 --- a/public/docs/ts/latest/guide/pipes.jade +++ b/public/docs/ts/latest/guide/pipes.jade @@ -148,7 +148,7 @@ block includes 当我们点击按钮的时候，显示的日志会在"**04/15/1988**"和"**Friday, April 15, 1988**"之间切换。 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 .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='.') 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 Two things to note: @@ -261,7 +261,7 @@ figure.image-display header Remember the declarations #{_array}! header 别忘了declarations数组！ - + :marked Angular reports an error if we neglect to list our custom pipe. 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='.') 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 a#change-detection @@ -392,7 +392,7 @@ a#change-detection 这个*飞行英雄*的例子用检查框和其它显示内容扩展了原有代码，来帮我们体验这些效果。 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 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`。 下面是完整的实现： +makeTabs( - 'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts', - 'impure, pure', - 'FlyingHeroesImpurePipe, FlyingHeroesPipe')(format='.') +'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts', +'impure, pure', +'FlyingHeroesImpurePipe, FlyingHeroesPipe')(format='.') :marked We inherit from `FlyingHeroesPipe` to prove the point that nothing changed internally. @@ -541,7 +541,7 @@ block pure-change p. 唯一的重大改动就是管道。 - 我们可以在#[+liveExampleLink('在线例子')]中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。 + 我们可以在在线例子中确认，当我们输入新的英雄甚至修改#[code heroes]数组时，这个#[i 会飞的英雄]的显示也跟着更新了。 - var _dollar = _docsFor === 'ts' ? '$' : ''; h3#async-pipe The impure #[i AsyncPipe] @@ -626,7 +626,7 @@ h3#async-pipe 非纯管道#[i AsyncPipe] 组件渲染起来是这样的： 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 ### *JsonPipe* @@ -741,8 +741,8 @@ a(id="no-filter-pipe") 虽然不是很明显，但代码最小化方面也存在风险。想象一个用于英雄列表的排序管道。我们可能根据英雄原始属性中的`name`和`planet`进行排序，就像这样： code-example(language="html") - <!-- NOT REAL CODE! --> - <div *ngFor="let hero of heroes | orderBy:'name,planet'"></div> +<!-- NOT REAL CODE! --> +<div *ngFor="let hero of heroes | orderBy:'name,planet'"></div> :marked We identify the sort fields by text strings, expecting the pipe to reference a property value by indexing (e.g., `hero['name']`). diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 9a6d1601df..e6822a848e 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -68,7 +68,7 @@ block includes The demonstrates all of the syntax and code snippets described in this chapter. p. - 这个#[+liveExampleLink2('在线例子')]演示了本章中描述的所有语法和代码片段。 + 这个在线例子演示了本章中描述的所有语法和代码片段。 .l-main-section :marked @@ -1034,7 +1034,7 @@ figure.image-display We can set the value of an attribute directly with an **attribute binding**. 我们可以通过**Attribute绑定**来直接设置Attribute的值。 - + .l-sub-section :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. @@ -1235,7 +1235,7 @@ block style-property-name-dart-diff 事件绑定语法由等号左侧带圆括号的**目标事件**，和右侧一个引号中的[模板语句](#template-statements)组成。 下列事件绑定监听按钮的点击事件。无论什么时候，发生点击时，都会调用组件的`onSave()`方法。 - + +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") :marked @@ -1247,7 +1247,7 @@ block style-property-name-dart-diff identifies the target event. In the following example, the target is the button’s click event. **圆括号中的名称** —— 比如`(click)` —— 标记出了目标事件。在下面这个例子中，目标是按钮的click事件。 - + +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") :marked Some people prefer the `on-` prefix alternative, known as the **canonical form**: @@ -1389,29 +1389,29 @@ block style-property-name-dart-diff 这都是好事。 // - :marked - ### 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. - +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-bubbling')(format=".") - :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. +:marked +### 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. ++makeExample('template-syntax/ts/app/app.component.html', 'event-binding-bubbling')(format=".") +: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. .l-sub-section - :marked - `EventEmitter` events don’t bubble. +:marked + `EventEmitter` events don’t bubble. :marked - 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) - continues or stops with the current element. + 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) + 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). - Clicking the button in the next example triggers a save; - the click doesn't make it to the outer `
` so the div's save handler is not called. + 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; + the click doesn't make it to the outer `
` so the div's save handler is not called. +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-no-propagation')(format=".") :marked - Propagation continues if the statement returns a truthy value. In the next example, the click is heard by both the button - and the outer `
`, causing a double save. + Propagation continues if the statement returns a truthy value. In the next example, the click is heard by both the button + and the outer `
`, causing a double save. +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-propagation')(format=".") #two-way @@ -1557,7 +1557,7 @@ a#ngModel 下面是实际操作中的所有变体形式，包括这个大写版本： 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 :marked @@ -1871,9 +1871,9 @@ block dart-no-truthy-falsey .alert.is-critical :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 We use this variable within the template to access a hero’s properties, @@ -1935,7 +1935,7 @@ block dart-no-truthy-falsey Now set the `NgForTrackBy` directive to that *tracking* function. 现在，把`NgForTrackBy`指令设置为那个*追踪*函数。 - + +makeExample('template-syntax/ts/app/app.component.html', 'NgForTrackBy-2')(format=".") :marked @@ -2055,9 +2055,9 @@ block remember-the-brackets 上面这种情况下，它管理两组`NgSwitchCase`和`NgSwitchDefault`指令，一次是(*)前缀的版本，一次是展开模板后的版本。 我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的： - + 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 ### Expanding `*ngFor` ### 展开`*ngFor` @@ -2297,7 +2297,7 @@ 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 `HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent` because data flows *into* that property from a template binding expression. diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index 34e6e5c43f..d1529a1676 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -29,7 +29,7 @@ block includes Run the for this part. -p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-6')]。 +p 运行这部分的在线例子。 .l-main-section :marked @@ -140,7 +140,7 @@ block http-providers Here is a version of !{_appModuleTsVsMainTs} that performs this trick 这个版本的!{_appModuleTsVsMainTs}就是用来实现这个小花招的： - + +makeExcerpt(_appModuleTsVsMainTs, 'v2') block backend @@ -152,7 +152,7 @@ block backend 导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。 `InMemoryWebApiModule`将`Http`客户端默认的后端服务（这是一个辅助服务，负责与远程服务器对话）替换成了*内存Web API*服务： - + +makeExcerpt(_appModuleTsVsMainTs, 'in-mem-web-api', '') :marked @@ -245,9 +245,9 @@ block get-heroes-details converting that `Observable` to a `Promise` using the `toPromise` operator. *现在*，我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象，回到已经熟悉的地盘。 - + +makeExcerpt('app/hero.service.ts', 'to-promise', '') - + :marked Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ... not out of the box. @@ -263,7 +263,7 @@ block get-heroes-details 有一大票像`toPromise`这样的操作符，会扩展`Observable`，为其添加有用的能力。 如果我们希望得到那些能力，就得自己添加那些操作符。 那很容易，只要从RxJS库中导入它们就可以了，就像这样： - + +makeExcerpt('app/hero.service.ts', 'rxjs', '') :marked @@ -369,7 +369,7 @@ block get-heroes-details 我们已经可以在英雄详情中编辑英雄的名字了。来试试吧。在输入的时候，页头上的英雄名字也会随之更新。 不过当我们点了后退按钮时，这些更新就丢失了。 - + .l-sub-section :marked 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. 最后，我们在`HeroService`类中实现这个`create`方法。 - + +makeExcerpt('app/hero.service.ts', 'create') :marked Refresh the browser and create some new heroes! 刷新浏览器，并创建一些新的英雄！ - + .l-main-section :marked ## Delete a hero @@ -636,14 +636,14 @@ block observables-section-intro The component template is simple — just a text box and a list of matching search results. 组件模板很简单，就是一个输入框和一个相匹配的搜索结果列表。 - + +makeExample('app/hero-search.component.html') :marked We'll also want to add styles for the new component. 我们还要往这个新组件中添加样式。 - + +makeExample('app/hero-search.component.css') :marked @@ -666,7 +666,7 @@ block observables-section-intro Time to create the `HeroSearchComponent` class and metadata. 该创建`HeroSearchComponent`类及其元数据了。 - + +makeExample('app/hero-search.component.ts') :marked @@ -677,7 +677,7 @@ block observables-section-intro Let's focus on the `!{_priv}searchTerms`: 仔细看下这个`searchTerms`： - + +makeExcerpt('app/hero-search.component.ts', 'searchTerms', '') 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`. 每当调用`search`时都会调用`next`来把新的字符串放进该主体的_可观察_流中。 - + :marked #### Initialize the _**heroes**_ property (_**ngOnInit**_) @@ -769,7 +769,7 @@ block observable-transformers 注意，_取消_`HeroSearchService`的可观察对象并不会实际中止（abort）一个未完成的HTTP请求，除非有一天我们支持了这个特性，这个问题我们以后再讨论。 目前我们的做法只是丢弃不希望的结果。 - + :marked * `catch` intercepts a failed observable. 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. 有很多权威人士建议我们这样做。 - + :marked 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. @@ -833,7 +833,7 @@ block observable-transformers and add it to the `!{_declarations}` !{_array}: 最后，从hero-search.component.ts中导入`HeroSearchComponent`并将其添加到`declarations`数组中。 - + +makeExcerpt(declFile, 'search') :marked @@ -933,37 +933,37 @@ block filetree block file-summary +makeTabs( - `toh-6/ts/app/app.component.ts, - toh-6/ts/app/app.module.ts, - toh-6/ts/app/heroes.component.ts, - toh-6/ts/app/heroes.component.html, - toh-6/ts/app/heroes.component.css, - toh-6/ts/app/hero-detail.component.ts, - toh-6/ts/app/hero-detail.component.html, - toh-6/ts/app/hero.service.ts, - toh-6/ts/app/in-memory-data.service.ts`, - ',,,,,,,,', - `app.comp...ts, - app.mod...ts, - heroes.comp...ts, - heroes.comp...html, - heroes.comp...css, - hero-detail.comp...ts, - hero-detail.comp...html, - hero.service.ts, - in-memory-data.service.ts` + `toh-6/ts/app/app.component.ts, + toh - 6 / ts / app / app.module.ts, + toh - 6 / ts / app / heroes.component.ts, + toh - 6 / ts / app / heroes.component.html, + toh - 6 / ts / app / heroes.component.css, + toh - 6 / ts / app / hero - detail.component.ts, + toh - 6 / ts / app / hero - detail.component.html, + toh - 6 / ts / app / hero.service.ts, + toh - 6 / ts / app / in -memory - data.service.ts`, + ',,,,,,,,', + `app.comp...ts, + app.mod...ts, + heroes.comp...ts, + heroes.comp...html, + heroes.comp...css, + hero - detail.comp...ts, + hero - detail.comp...html, + hero.service.ts, + in-memory-data.service.ts` ) +makeTabs( - `toh-6/ts/app/hero-search.service.ts, - toh-6/ts/app/hero-search.component.ts, - toh-6/ts/app/hero-search.component.html, - toh-6/ts/app/hero-search.component.css, - toh-6/ts/app/rxjs-extensions.ts`, - null, - `hero-search.service.ts, - hero-search.component.ts, - hero-search.component.html, - hero-search.component.css, - rxjs-extensions.ts` + `toh-6/ts/app/hero-search.service.ts, + toh - 6 / ts / app / hero - search.component.ts, + toh - 6 / ts / app / hero - search.component.html, + toh - 6 / ts / app / hero - search.component.css, + toh - 6 / ts / app / rxjs - extensions.ts`, + null, + `hero-search.service.ts, + hero - search.component.ts, + hero - search.component.html, + hero - search.component.css, + rxjs - extensions.ts` )