fix: all "back to top" links

This commit is contained in:
Zhicheng Wang 2017-07-30 22:11:36 +08:00
parent bbe6ac9014
commit 6d88fa2342
3 changed files with 418 additions and 91 deletions

View File

@ -251,7 +251,11 @@ supporting classes into their own, dedicated files.
As the app grows, this rule becomes even more important. As the app grows, this rule becomes even more important.
随着应用程序的成长,本法则会变得越来越重要。 随着应用程序的成长,本法则会变得越来越重要。
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 01-02} {@a 01-02}
@ -352,7 +356,11 @@ As the app grows, this rule becomes even more important.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Naming ## Naming
@ -440,7 +448,11 @@ Naming conventions are hugely important to maintainability and readability. This
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-02} {@a 02-02}
@ -559,7 +571,11 @@ Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-03} {@a 02-03}
@ -845,7 +861,11 @@ and reference assets of different types.
</table> </table>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-04} {@a 02-04}
@ -1033,7 +1053,11 @@ As always, strive for consistency.
</table> </table>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-05} {@a 02-05}
@ -1115,7 +1139,11 @@ As always, strive for consistency.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-06} {@a 02-06}
@ -1165,7 +1193,11 @@ As always, strive for consistency.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-07} {@a 02-07}
@ -1356,7 +1388,11 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-09} {@a 02-09}
@ -1474,7 +1510,11 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
</table> </table>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-10} {@a 02-10}
@ -1636,7 +1676,11 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
</table> </table>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-11} {@a 02-11}
@ -1743,7 +1787,11 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
</table> </table>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 02-12} {@a 02-12}
@ -1994,7 +2042,11 @@ A consistent class and file name convention make these modules easy to spot and
</table> </table>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Coding conventions ## Coding conventions
@ -2066,7 +2118,11 @@ By convention, upper camel case indicates a constructable asset.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 03-02} {@a 03-02}
@ -2196,7 +2252,11 @@ It is rarely worth the effort to change them at the risk of breaking existing co
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 03-03} {@a 03-03}
@ -2311,7 +2371,11 @@ discourage the `I` prefix.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 03-04} {@a 03-04}
@ -2399,7 +2463,11 @@ discourage the `I` prefix.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 03-06} {@a 03-06}
@ -2487,7 +2555,11 @@ discourage the `I` prefix.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Application structure and NgModules ## Application structure and NgModules
@ -2513,7 +2585,11 @@ Use the naming conventions for files in this guide.
所有第三方程序包保存到其它目录里,而不是`src`目录。 所有第三方程序包保存到其它目录里,而不是`src`目录。
你不会修改它们,所以不希望它们弄乱我们的应用程序。 你不会修改它们,所以不希望它们弄乱我们的应用程序。
使用本指南介绍的文件命名约定。 使用本指南介绍的文件命名约定。
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-01} {@a 04-01}
@ -2567,7 +2643,11 @@ _can I quickly open and start work in all of the related files for this feature_
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-02} {@a 04-02}
@ -2610,7 +2690,11 @@ A descriptive folder structure makes a world of difference to you and the people
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-03} {@a 04-03}
@ -2691,7 +2775,11 @@ in a single file than as multiple files. Be wary of this loophole.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-04} {@a 04-04}
@ -2770,7 +2858,11 @@ Use a flatter structure until there is an obvious value to creating a new folder
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-05} {@a 04-05}
@ -2827,7 +2919,11 @@ But if something is not obvious or departs from a convention, then spell it out.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-06} {@a 04-06}
@ -3167,7 +3263,11 @@ Whatever you choose, be consistent.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-07} {@a 04-07}
@ -3292,7 +3392,11 @@ and more difficult in a flat structure.
<a href="#file-tree">Refer to this _folder and file structure_ example.</a> <a href="#file-tree">点这里查看目录和文件结构的范例</a> <a href="#file-tree">Refer to this _folder and file structure_ example.</a> <a href="#file-tree">点这里查看目录和文件结构的范例</a>
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-08} {@a 04-08}
@ -3362,7 +3466,11 @@ for example, in `/src/app`.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-09} {@a 04-09}
@ -3509,7 +3617,11 @@ area, folder, and file; for example, `app/heroes/heroes.module.ts` defines `Hero
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-10} {@a 04-10}
@ -3786,7 +3898,11 @@ Yet there is a real danger of that happening if the `SharedModule` provides a se
</code-tabs> </code-tabs>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-11} {@a 04-11}
@ -4152,7 +4268,11 @@ Yet there is a real danger of that happening accidentally if the `CoreModule` pr
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-12} {@a 04-12}
@ -4220,7 +4340,11 @@ Only the root `AppModule` should import the `CoreModule`.
</code-tabs> </code-tabs>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-13} {@a 04-13}
@ -4263,7 +4387,11 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 04-14} {@a 04-14}
@ -4300,7 +4428,11 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Components ## Components
@ -4362,7 +4494,11 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
</code-tabs> </code-tabs>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 05-03} {@a 05-03}
@ -4441,7 +4577,11 @@ Developers place components on the page as they would native HTML elements and w
</code-tabs> </code-tabs>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 05-04} {@a 05-04}
@ -4583,7 +4723,11 @@ Angular的TypeScript语言服务即将到来可以帮助那些编辑器在
</code-tabs> </code-tabs>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 05-12} {@a 05-12}
@ -4687,7 +4831,11 @@ Put it on the line above when doing so is clearly more readable.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 05-13} {@a 05-13}
@ -4769,7 +4917,11 @@ and the directive name doesn't describe the property.
</code-tabs> </code-tabs>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 05-14} {@a 05-14}
@ -4832,7 +4984,11 @@ helps instantly identify which members of the component serve which purpose.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 05-15} {@a 05-15}
@ -4933,7 +5089,11 @@ helps instantly identify which members of the component serve which purpose.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 05-16} {@a 05-16}
@ -5022,7 +5182,11 @@ helps instantly identify which members of the component serve which purpose.
</code-tabs> </code-tabs>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 05-17} {@a 05-17}
@ -5084,7 +5248,11 @@ helps instantly identify which members of the component serve which purpose.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Directives ## Directives
@ -5150,7 +5318,11 @@ helps instantly identify which members of the component serve which purpose.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 06-03} {@a 06-03}
@ -5235,7 +5407,11 @@ Compare with the less preferred `host` metadata alternative.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Services ## Services
@ -5296,7 +5472,11 @@ Compare with the less preferred `host` metadata alternative.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 07-02} {@a 07-02}
@ -5359,7 +5539,11 @@ Compare with the less preferred `host` metadata alternative.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 07-03} {@a 07-03}
@ -5447,7 +5631,11 @@ that instance is shared and available to all child components of that top level
</code-tabs> </code-tabs>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a 07-04} {@a 07-04}
@ -5510,7 +5698,11 @@ dependencies based on the declared types of that service's constructor parameter
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Data Services ## Data Services
@ -5598,7 +5790,11 @@ easier to test the consumers with mock service implementations.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Lifecycle hooks ## Lifecycle hooks
@ -5656,7 +5852,11 @@ signatures. use those signatures to flag spelling and syntax mistakes.
</code-example> </code-example>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
## Appendix ## Appendix
@ -5699,7 +5899,11 @@ Useful tools and tips for Angular.
</div> </div>
<a href="#toc" class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc" class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>
{@a A-02} {@a A-02}
@ -5760,4 +5964,7 @@ Useful tools and tips for Angular.
</div> </div>
<a href="#toc"class='to-top'>Back to top</a><a href="#toc" class='to-top'>回到顶部</a>
<a href="#toc"class='to-top'>Back to top</a>
<a href="#toc" class='to-top'>回到顶部</a>

View File

@ -358,7 +358,10 @@ it returns the same object *reference* when called twice in a row.
在单独的一次事件循环中,被依赖的值不应该改变。 在单独的一次事件循环中,被依赖的值不应该改变。
如果幂等的表达式返回一个字符串或数字,连续调用它两次,也应该返回相同的字符串或数字。 如果幂等的表达式返回一个字符串或数字,连续调用它两次,也应该返回相同的字符串或数字。
如果幂等的表达式返回一个对象(包括`Date`或`Array`),连续调用它两次,也应该返回同一个对象的*引用*。 如果幂等的表达式返回一个对象(包括`Date`或`Array`),连续调用它两次,也应该返回同一个对象的*引用*。
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -485,10 +488,7 @@ you're ready to learn about the varieties of data binding syntax beyond interpol
现在,对模板表达式和语句有了一点感觉了吧。 现在,对模板表达式和语句有了一点感觉了吧。
除插值表达式外,还有各种各样的数据绑定语法,是学习它们是时候了。 除插值表达式外,还有各种各样的数据绑定语法,是学习它们是时候了。
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1181,7 +1181,10 @@ The following table summarizes:
With this broad view in mind, you're ready to look at binding types in detail. With this broad view in mind, you're ready to look at binding types in detail.
放开眼界,我们来看看每种绑定类型的具体情况。 放开眼界,我们来看看每种绑定类型的具体情况。
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1503,7 +1506,11 @@ content harmlessly.
<a href="#top-of-page">back to top</a> <a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<a href="# top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1623,7 +1630,10 @@ attribute 绑定的主要用例之一是设置 ARIA attribute译注ARIA指
<code-example path="template-syntax/src/app/app.component.html" region="attrib-binding-aria" title="src/app/app.component.html" linenums="false"> <code-example path="template-syntax/src/app/app.component.html" region="attrib-binding-aria" title="src/app/app.component.html" linenums="false">
</code-example> </code-example>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1683,7 +1693,10 @@ the [NgClass directive](guide/template-syntax#ngClass) is usually preferred when
</div> </div>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1736,7 +1749,10 @@ Note that a _style property_ name can be written in either
</div> </div>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2064,7 +2080,9 @@ However, no native HTML element follows the `x` value and `xChange` event patter
可惜,原生 HTML 元素不遵循`x`值和`xChange`事件的模式。 可惜,原生 HTML 元素不遵循`x`值和`xChange`事件的模式。
Fortunately, the Angular [_NgModel_](guide/template-syntax#ngModel) directive is a bridge that enables two-way binding to form elements. Fortunately, the Angular [_NgModel_](guide/template-syntax#ngModel) directive is a bridge that enables two-way binding to form elements.
幸运的是Angular 以 [_NgModel_](guide/template-syntax#ngModel) 指令为桥梁,允许在表单元素上使用双向数据绑定。<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
幸运的是Angular 以 [_NgModel_](guide/template-syntax#ngModel) 指令为桥梁,允许在表单元素上使用双向数据绑定。
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2142,7 +2160,10 @@ This section is an introduction to the most commonly used attribute directives:
* [`NgModel`](guide/template-syntax#ngModel) - two-way data binding to an HTML form element * [`NgModel`](guide/template-syntax#ngModel) - two-way data binding to an HTML form element
[`NgModel`](guide/template-syntax#ngModel) - 双向绑定到HTML表单元素 [`NgModel`](guide/template-syntax#ngModel) - 双向绑定到HTML表单元素
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2203,7 +2224,10 @@ It's up to you to call `setCurrentClassess()`, both initially and when the depen
</div> </div>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2260,7 +2284,10 @@ It's up to you to call `setCurrentStyles()`, both initially and when the depende
</div> </div>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2571,7 +2598,10 @@ described below.
</div> </div>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2853,7 +2883,10 @@ For example, you could replace the `<confused-hero>` switch case with the follow
<code-example path="template-syntax/src/app/app.component.html" region="NgSwitch-div" title="src/app/app.component.html" linenums="false"> <code-example path="template-syntax/src/app/app.component.html" region="NgSwitch-div" title="src/app/app.component.html" linenums="false">
</code-example> </code-example>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2971,7 +3004,10 @@ This example declares the `fax` variable as `ref-fax` instead of `#fax`.
<code-example path="template-syntax/src/app/app.component.html" region="ref-fax" title="src/app/app.component.html" linenums="false"> <code-example path="template-syntax/src/app/app.component.html" region="ref-fax" title="src/app/app.component.html" linenums="false">
</code-example> </code-example>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -3205,7 +3241,10 @@ the directive property name on the *left* and the public alias on the *right*:
</div> </div>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -3286,7 +3325,10 @@ The generated output would look something like this
"rate": 325 } "rate": 325 }
</code-example> </code-example>
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -3439,7 +3481,10 @@ Rather it tells the TypeScript type checker to suspend strict null checks for a
You'll need this template operator when you turn on strict null checks. It's optional otherwise. You'll need this template operator when you turn on strict null checks. It's optional otherwise.
<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>

View File

@ -49,7 +49,11 @@ The sample application and all tests in this guide are available as live example
<live-example plnkr="bag-specs" embedded-style>其它规约汇总</live-example> <live-example plnkr="bag-specs" embedded-style>其它规约汇总</live-example>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -319,7 +323,11 @@ But first you should write a dummy test to verify that your test environment is
and to lock in a few basic testing skills. and to lock in a few basic testing skills.
但首先,我们要先随便写一个测试来验证测试环境是否已经就绪了,并掌握一些基础的测试技术。 但首先,我们要先随便写一个测试来验证测试环境是否已经就绪了,并掌握一些基础的测试技术。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -559,7 +567,11 @@ All of the tests in this guide are available as [live examples](guide/testing#li
你还可以在plunker的<live-example plnkr="1st-specs" title="First spec" embedded-style></live-example>中试运行这个测试。 你还可以在plunker的<live-example plnkr="1st-specs" title="First spec" embedded-style></live-example>中试运行这个测试。
本章的所有测试都有相应的[在线例子](guide/testing#live-examples "Live examples of these tests")。 本章的所有测试都有相应的[在线例子](guide/testing#live-examples "Live examples of these tests")。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -943,7 +955,11 @@ There is no harm in calling `detectChanges()` more often than is strictly necess
</div> </div>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -1193,7 +1209,11 @@ The tests in this guide only call `compileComponents` when necessary.
</div> </div>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -1431,7 +1451,11 @@ The third test checks that the component displays the proper message when there
接下来的测试程序确认当服务返回不同的值时组件的逻辑是否工作正常。 接下来的测试程序确认当服务返回不同的值时组件的逻辑是否工作正常。
第二个测试程序验证变换用户名字的效果。 第二个测试程序验证变换用户名字的效果。
第三个测试程序检查如果用户没有登录,组件是否显示正确消息。 第三个测试程序检查如果用户没有登录,组件是否显示正确消息。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -1779,7 +1803,11 @@ code that involves the `intervalTimer`, as is common when
testing async `Observable` methods. testing async `Observable` methods.
写带有`done`回调的测试函数,虽然比`async`和`fakeAsync`函数笨拙,但是在少数偶然情况下却是很有必要的技巧。比如,当测试涉及`intervalTimer`的代码时,你就没法调用`async`和`fakeAsync`函数,在测试异步`Observable`函数时也一样。 写带有`done`回调的测试函数,虽然比`async`和`fakeAsync`函数笨拙,但是在少数偶然情况下却是很有必要的技巧。比如,当测试涉及`intervalTimer`的代码时,你就没法调用`async`和`fakeAsync`函数,在测试异步`Observable`函数时也一样。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -2197,7 +2225,11 @@ Only the selected event test differs. It confirms that the selected `DashboardHe
really does find its way up through the event binding to the host component. really does find its way up through the event binding to the host component.
只有selected事件的测试不一样。它确保被选择的`DashboardHeroComponent`英雄确实通过事件绑定被传递到宿主组件。 只有selected事件的测试不一样。它确保被选择的`DashboardHeroComponent`英雄确实通过事件绑定被传递到宿主组件。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -2387,7 +2419,11 @@ Do not configure the `TestBed` after calling `inject`.
</div> </div>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
{@a routed-component-w-param} {@a routed-component-w-param}
@ -2625,7 +2661,11 @@ Inspect and download _all_ of the guide's application test code with this <live-
</div> </div>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -2728,7 +2768,11 @@ Here are a few more `HeroDetailComponent` tests to drive the point home.
</code-example> </code-example>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -2870,7 +2914,11 @@ especially when the feature module is small and mostly self-contained, as featur
</div> </div>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -3092,7 +3140,11 @@ for digging into and replacing parts of these other classes.
Explore the options and combinations on your own. Explore the options and combinations on your own.
自己探索这些选项和组合。 自己探索这些选项和组合。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -3335,7 +3387,11 @@ A future guide update will explain how to write such tests with the `RouterTesti
</div> </div>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -3408,7 +3464,11 @@ such as misspelled or misused components and directives.
</div> </div>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -3545,7 +3605,11 @@ and its `defaultColor`.
* `DebugElement.properties` affords access to the artificial custom property that is set by the directive. * `DebugElement.properties` affords access to the artificial custom property that is set by the directive.
`DebugElement.properties`让我们可以访问由指令设置的自定义属性。 `DebugElement.properties`让我们可以访问由指令设置的自定义属性。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -3902,7 +3966,11 @@ Use Angular tests for that.
但是,孤立测试无法确认`ButtonComp`是否与其模板正确的绑定,或者是否有数据绑定。 但是,孤立测试无法确认`ButtonComp`是否与其模板正确的绑定,或者是否有数据绑定。
使用Angular测试来应对它们。 使用Angular测试来应对它们。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<hr/> <hr/>
@ -5206,7 +5274,11 @@ Here's an example of `Renderer` tests from the <live-example plnkr="bag-specs">l
</code-example> </code-example>
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>回到顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>回到顶部</a>
<div class='l' class='hr'> <div class='l' class='hr'>
@ -5408,7 +5480,10 @@ They're installed when you run `npm install`.
这些范例测试是为在Jasmine和karma而写的。 这些范例测试是为在Jasmine和karma而写的。
那两条“捷径”设置会把适当的Jasmine和Karma包添加到`package.json`的`devDependencies`区。 那两条“捷径”设置会把适当的Jasmine和Karma包添加到`package.json`的`devDependencies`区。
当我们运行`npm install`时,它们就会被安装上。 当我们运行`npm install`时,它们就会被安装上。
<a href="#top" class='to-top'>Back to top</a><a href="#top" class='to-top'>返回顶部</a>
<a href="#top" class='to-top'>Back to top</a>
<a href="#top" class='to-top'>返回顶部</a>
<div class='l' class='hr'> <div class='l' class='hr'>