From a2d6add5fe69893f585524a2bc5f890a8ebe69c1 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sun, 8 May 2016 21:00:15 +0800 Subject: [PATCH 01/12] =?UTF-8?q?=E7=BF=BB=E8=AF=91=E4=BA=86=E5=A4=A7?= =?UTF-8?q?=E9=83=A8=E5=88=86=E2=80=9C=E6=A8=A1=E6=9D=BF=E8=AF=AD=E6=B3=95?= =?UTF-8?q?=E2=80=9D=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/_includes/_side-nav.jade | 1 - .../ts/latest/guide/dependency-injection.jade | 5 +- .../docs/ts/latest/guide/template-syntax.jade | 683 +++++++++++++++++- 3 files changed, 669 insertions(+), 20 deletions(-) diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade index 6e9bd4797a..2abdb30872 100644 --- a/public/docs/_includes/_side-nav.jade +++ b/public/docs/_includes/_side-nav.jade @@ -104,7 +104,6 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle} .nav-blocks - a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API参考 script. diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade index 06f8a72215..28683976de 100644 --- a/public/docs/ts/latest/guide/dependency-injection.jade +++ b/public/docs/ts/latest/guide/dependency-injection.jade @@ -9,7 +9,7 @@ include ../_util-fns **依赖注入** 是一个很重要的程序设计模式。 Angular有自己的依赖注入框架,离开了它,我们几乎没法构建Angular应用。 - 它使用的是如此广泛,以至于几乎每个人都会把它简称为 _DI_ 。 + 它使用得非常广泛,以至于几乎每个人都会把它简称为 _DI_ 。 In this chapter we'll learn what DI is and why we want it. Then we'll learn [how to use it](#angular-di) in an Angular app. @@ -1401,5 +1401,4 @@ p. 在`forwardRef()`方法的帮助下,我们实际上也可以先定义组件。 它的原理解释在[这个博客中](http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html)。 但是为什么要先给自己找麻烦呢? - 还是通过在独立的文件中定义组件和服务,完全消除此问题吧。 - \ No newline at end of file + 还是通过在独立的文件中定义组件和服务,完全避免此问题吧。 diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 8933106cb7..81351ccc7f 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -3,67 +3,104 @@ include ../_util-fns // #docregion intro :marked Our Angular application manages what the user sees and does through the interaction of a Component class instance (the *component*) and its user-facing template. + + 我们的Angular应用管理着用户之所见,并通过组件类的实例以及组件面向用户的模板来与用户交互。 Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller/viewmodel, and the template represents the view. + + 从使用模型-视图-控制器(MVC)或模型-视图-视图模型(MVVM)的经验中,很多用户都熟悉了组件/模板这两个概念。 + 在Angular中,组件扮演着控制器部分或视图模型部分,模板则用来表示视图部分。 Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax: + + 我们来看看写视图的模板都需要什么。我们将覆盖模板语法中的下列基本元素: * [HTML](#html) * [Interpolation](#interpolation) + * [插值表达式](#interpolation) * [Template expressions](#template-expressions) + * [模板表达式](#template-expressions) * [Template statements](#template-statements) + * [模板语句](#template-statements) * [Binding syntax](#binding-syntax) + * [绑定语法](#binding-syntax) * [Property binding](#property-binding) + * [属性绑定](#property-binding) * [Attribute, class, and style bindings](#other-bindings) + * [元素属性、class和style绑定](#other-bindings) * [Event binding](#event-binding) + * [事件绑定](#event-binding) * [Two-way data binding with `NgModel`](#ngModel) + * [使用`NgModel`进行双向数据绑定](#ngModel) * [Built-in directives](#directives) + * [内置指令](#directives) * [NgClass](#ngClass) * [NgStyle](#ngStyle) * [NgIf](#ngIf) * [NgSwitch](#ngSwitch) * [NgFor](#ngFor) * [* and <template>](#star-template) + * [* 和 <模板>](#star-template) * [Template reference variables](#ref-vars) + * [模板引用变量](#ref-vars) * [Input and output properties](#inputs-outputs) + * [输入输出属性](#inputs-outputs) * [Template expression operators](#expression-operators) + * [模板表达式操作符](#expression-operators) * [pipe](#pipe) * ["safe navigation operator" (?.)](#safe-navigation-operator) + * ["安全导航操作符" (?.)](#safe-navigation-operator) // #enddocregion intro .l-sub-section :marked The [live example](/resources/live-examples/template-syntax/ts/plnkr.html) demonstrates all of the syntax and code snippets described in this chapter. + 这个[鲜活范例](/resources/live-examples/template-syntax/ts/plnkr.html)演示了本章中描述的所有语法和代码片段。 // #docregion html-1 .l-main-section :marked ## HTML HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application had a template that was pure HTML: + + HTML是Angular模板的“语言”。我们的[QuickStart](../quickstart.html)应用就有一个模板是纯HTML的: // #enddocregion html-1 +makeExample('template-syntax/ts/app/app.component.html', 'my-first-app')(format=".") // #docregion html-2 :marked Almost all HTML syntax is valid template syntax. The `