diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade index 8d10abb879..b59dc08ee3 100644 --- a/public/docs/ts/latest/guide/pipes.jade +++ b/public/docs/ts/latest/guide/pipes.jade @@ -32,7 +32,7 @@ p. Try the #[+liveExampleLink2()]. p. - 欢迎来到Angular“管道(Pipe)”的世界!我们可以把这种简单的“显示值”转换器声明在HTML中。 + 欢迎来到Angular“管道(Pipe)”的世界!我们可以把这种简单的“值-显示”转换器声明在HTML中。 试试#[+liveExampleLink2('在线例子')]. .l-main-section diff --git a/public/docs/ts/latest/guide/structural-directives.jade b/public/docs/ts/latest/guide/structural-directives.jade index 54fb395ee6..2440e0cf22 100644 --- a/public/docs/ts/latest/guide/structural-directives.jade +++ b/public/docs/ts/latest/guide/structural-directives.jade @@ -8,38 +8,67 @@ block includes to the application state. In this chapter we'll to look at how Angular manipulates the DOM and how we can do it ourselves in our own directives. + 单页面应用的基本特性之一,就是它要操纵DOM树。不同于以前那种用户每次浏览都重新从服务器取得整个页面的方式, + 单页面应用中,DOM中的各个区域会根据应用程序的状态而出现或消失。 + 在本章中,我们将看看Angular如何操纵DOM树,以及我们该如何在自己的指令中这么做。 + In this chapter we will + + 在本章中,我们将: - [learn what structural directives are](#definition) + - [学习什么是结构型(structural)指令](#definition) - [study *ngIf*](#ngIf) + - [研究*ngIf*](#ngIf) - [discover the <template> element](#template) + - [<template>元素揭秘](#template) - [understand the asterisk (\*) in **ngFor*](#asterisk) + - [理解**ngFor*中的星号(\*)](#asterisk) - [write our own structural directive](#unless) + - [写我们自己的结构型指令](#unless) p Try the #[+liveExampleLink2()]. +p 试试#[+liveExampleLink2('在线例子')]. .l-main-section :marked ## What are structural directives? + ## 什么是结构型指令? There are three kinds of Angular directives: + + Angular指令可分为三种: 1. Components + 1. 组件 1. Attribute directives + 1. 属性型指令 1. Structural directives + 1. 结构型指令 The *Component* is really a directive with a template. It's the most common of the three directives and we write lots of them as we build our application. + *组件*其实就是一个带模板的指令。 + 它是这三种指令中最常用的,我们会写大量的组件来构建应用程序。 + The [*Attribute* directive](attribute-directives.html) changes the appearance or behavior of an element. The built-in [NgStyle](template-syntax.html#ngStyle) directive, for example, can change several element styles at the same time. We can use it to render text bold, italic, and lime green by binding to a component property that requests such a sickening result. + [*属性型*指令](attribute-directives.html)会修改元素的外观或行为。 + 比如,内建指令[NgStyle](template-syntax.html#ngStyle)就能同时修改元素的好几个样式。 + 通过绑定到组件的属性,我们可以把文本渲染成加粗、斜体、灰绿色这种恶心的效果。 + A *Structural* directive changes the DOM layout by adding and removing DOM elements. We've seen three of the built-in structural directives in other chapters: [ngIf](template-syntax.html#ngIf), [ngSwitch](template-syntax.html#ngSwitch) and [ngFor](template-syntax.html#ngFor). + *结构型*指令通过添加和删除DOM元素来改变DOM的布局。 + 我们会在其它章节看到三个内建的结构型指令:[ngIf](template-syntax.html#ngIf)、 + [ngSwitch](template-syntax.html#ngSwitch)以及[ngFor](template-syntax.html#ngFor)。 + +makeExample('structural-directives/ts/app/structural-directives.component.html', 'structural-directives')(format=".") @@ -47,47 +76,71 @@ p Try the #[+liveExampleLink2()]. .l-main-section :marked ## NgIf Case Study + ## NgIf案例分析 Let’s focus on `ngIf`. It's a great example of a structural directive: it takes a boolean and makes an entire chunk of DOM appear or disappear. + 我们重点看下`ngIf`。它是一个很好的结构型指令案例:它接受一个布尔值,并据此让一整块儿DOM树出现或消失。 + +makeExample('structural-directives/ts/app/structural-directives.component.html', 'ngIf')(format=".") :marked The `ngIf` directive does not hide the element. Using browser developer tools we can see that, when the condition is true, the top paragraph is in the DOM and the bottom disused paragraph is completely - absent from the DOM! In its place are empty `