iSharkFly-Docs/Angular-Docs-Cn
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

review all "我们" keyword, making the translations more natural.

Browse Source
This commit is contained in:
Rex
2016-06-20 10:59:00 +01:00
parent 52c118ef8a
commit 77cdd8bde8
6 changed files with 174 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
+26 -26
View File
@@ -122,7 +122,7 @@ table(width="100%")
:marked
To filter output in our templates in Angular 1, we use the pipe character (|) and one or more filters.
要在Angular 1中过滤输出，我们使用管道字符(|)以及一个或多个过滤器。
要在Angular 1中过滤输出，使用管道字符(|)以及一个或多个过滤器。
In this example, we filter the `title` property to uppercase.
@@ -140,7 +140,7 @@ table(width="100%")
Many (but not all) of the built-in filters from Angular 1 are
built-in pipes in Angular 2.
在Angular 2中，我们使用相似的语法 —— 用管道字符(|)来过滤输出，但是我们现在直接把它叫做**管道**了。
在Angular 2中，我们使用相似的语法 —— 用管道字符(|)来过滤输出，但是现在直接把它叫做**管道**了。
很多(但不是所有)Angular 1中的内建过滤器也成了Angular 2中的内建管道。
See the heading [Filters / Pipes](#Pipes) below for more information.
@@ -218,7 +218,7 @@ table(width="100%")
many applications bootstrap declaratively with the `ng-app` directive,
giving it the name of the application's module (`movieHunter`).
虽然我们可以从代码中引导Angular 1应用，
虽然可以从代码中引导Angular 1应用，
但很多应用都是通过`ng-app`指令进行声明式引导的，只要给它一个应用模块的名字(`movieHunter`)就可以了。
td
@@ -262,7 +262,7 @@ table(width="100%")
We can specify multiple classes as shown in the second example.
就像第二个例子中展示的，我们可以指定多个CSS类。
就像第二个例子中展示的，可以指定多个CSS类。
td
:marked
@@ -281,7 +281,7 @@ table(width="100%")
We can specify multiple classes as shown in the second example.
就像第二个例子中所展示的那样，我们可以同时指定多个类。
就像第二个例子中所展示的那样，可以同时指定多个类。
Angular 2 also has **class binding**, which is a good way to add or remove a single class
as shown in the third example.
@@ -302,7 +302,7 @@ table(width="100%")
:marked
In Angular 1, the `ng-click` directive allows us to specify custom behavior when an element is clicked.
在Angular 1中，`ng-click`指令能让我们指定当元素被点击时的自定义行为。
在Angular 1中，`ng-click`指令指定当元素被点击时的自定义行为。
In the first example, when the button is clicked, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
@@ -325,14 +325,14 @@ table(width="100%")
Rather, we define one-way binding from the template view to the component using **event binding**.
Angular 1基于事件的指令在Angular 2中已经不存在了。
不过，我们可以使用**事件绑定**来定义从模板视图到组件的单向数据绑定。
不过，可以使用**事件绑定**来定义从模板视图到组件的单向数据绑定。
For event binding, we define the name of the target event within parenthesis and
specify a template statement in quotes to the right of the equals. Angular 2 then
sets up an event handler for the target event. When the event is raised, the handler
executes the template statement.
要使用事件绑定，我们把目标事件的名字放在圆括号中，并且使用等号右侧引号中的模板语句对它赋值。
要使用事件绑定，把目标事件的名字放在圆括号中，并且使用等号右侧引号中的模板语句对它赋值。
然后Angular 2为这个目标时间设置事件处理器。当事件被触发时，这个处理器就会执行模板语句。
In the first example, when the button is clicked, the `toggleImage()` method in the associated component is executed.
@@ -403,7 +403,7 @@ table(width="100%")
In Angular 2, we use property binding; there is no built-in *hide* directive.
See [ng-show](#ng-show) for more information.
在Angular 2中，并没有一个内建的*hide*指令，我们可以改用属性绑定。
在Angular 2中，并没有一个内建的*hide*指令，可以改用属性绑定。
参见[ng-show](#ng-show)了解更多。
tr(style=top)
@@ -441,7 +441,7 @@ table(width="100%")
In Angular 2, we use property binding; there is no built-in *href* directive.
We place the element's `href` property in square brackets and set it to a quoted template expression.
在Angular 2中，并没有内建的*href*指令，我们改用属性绑定。
在Angular 2中，并没有内建的*href*指令，改用属性绑定。
我们把元素的`href`属性放在方括号中，并把它设成一个引号中的模板表达式。
For more information on property binding see [Template Syntax](../guide/template-syntax.html#property-binding).
@@ -593,8 +593,8 @@ table(width="100%")
In Angular 2, we use property binding; there is no built-in *show* directive.
For hiding and showing elements, we bind to the HTML `hidden` property.
在Angular 2中，并没有内建的*show*指令，我们可以改用属性绑定。
要隐藏或显示一个元素，我们绑定到它的`hidden`属性就可以了。
在Angular 2中，并没有内建的*show*指令，可以改用属性绑定。
要隐藏或显示一个元素，绑定到它的`hidden`属性就可以了。
To conditionally display an element, place the element's `hidden` property in square brackets and
set it to a quoted template expression that evaluates to the *opposite* of *show*.
@@ -633,8 +633,8 @@ table(width="100%")
In Angular 2, we use property binding; there is no built-in *src* directive.
We place the `src` property in square brackets and set it to a quoted template expression.
在Angular 2中，并没有一个内建的*src*指令，我们可以使用属性绑定。
我们把`src`属性放到方括号中，并且把它设为一个引号中的绑定表达式。
在Angular 2中，并没有一个内建的*src*指令，可以使用属性绑定。
把`src`属性放到方括号中，并且把它设为一个引号中的绑定表达式。
For more information on property binding see [Template Syntax](../guide/template-syntax.html#property-binding).
@@ -733,9 +733,9 @@ table(width="100%")
If that method returns `true`, we see "Excellent choice!".
If that methods returns `false`, we see "No movie, sorry!".
在这个例子中，如果`favoriteHero`没有设置，则`ngSwitch`的值是`null`，并且我们会看到
在这个例子中，如果`favoriteHero`没有设置，则`ngSwitch`的值是`null`，我们会看到
`*ngSwitchDefault`中的段落“Please enter ...”。
如果`favoriteHero`被设置了，它就会通过调用一个组件方法来检查他是否电影中的英雄。
如果`favoriteHero`被设置了，它就会通过调用一个组件方法来检查电影英雄。
如果该方法返回`true`，我们就会看到“Excellent choice!”。
如果该方法返回`false`，我们就会看到“No movie, sorry!”。
@@ -763,7 +763,7 @@ a(id="filters-pipes")
Many of the built-in filters in Angular 1 have corresponding pipes in Angular 2.
For more information on pipes see [Pipes](../guide/pipes.html).
Angular 2中的**管道**为我们的模板提供了格式化和数据转换功能，类似于Angular 1中的**过滤器**。
Angular 2中的**管道**为模板提供了格式化和数据转换功能，类似于Angular 1中的**过滤器**。
Angular 1中的很多内建过滤器在Angular 2中都有对应的管道。
要了解管道的更多信息，参见[Pipes](../guide/pipes.html)。
@@ -882,7 +882,7 @@ table(width="100%")
`SlicePipe`做同样的事，但是*两个参数的顺序是相反的*，以便于JavaScript中的`slice`方法保持一致。
第一个参数是起始索引号，第二个参数是限制的数量。
和Angular 1中一样，如果我们改用组件中的代码实现此操作，性能将会提升。
和Angular 1中一样，如果们改用组件中的代码实现此操作，性能将会提升。
tr(style=top)
td
@@ -1000,7 +1000,7 @@ table(width="100%")
In Angular 1, we often defined an immediately invoked function expression (or IIFE) around our controller code.
This kept our controller code out of the global namespace.
在Angular 1中，我们通常会定义一个立即调用的函数表达式(IIFE)来包裹我们的控制器代码。
在Angular 1中，我们通常会定义一个立即调用的函数表达式(IIFE)来包裹控制器代码。
这样让控制器代码不会污染全局命名空间。
td
@@ -1010,7 +1010,7 @@ table(width="100%")
We don't need to worry about this in Angular 2 because we use ES 2015 modules
and modules handle the namespacing for us.
在Angular 2中我们不用担心这个问题，因为我们使用ES 2015的模块，模块会替我们处理命名空间问题。
在Angular 2中我们不用担心这个问题，因为使用ES 2015的模块，模块会替我们处理命名空间问题。
For more information on modules see [Architecture Overview](../guide/architecture.html#module).
@@ -1030,7 +1030,7 @@ table(width="100%")
controllers, services, and other code. The second argument defines the list
of other modules that this module depends upon.
在Angular 1中，我们定义一个Angular模块，它将对我们的控制器、服务和其他代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。
在Angular 1中，我们定义一个Angular模块，它将对控制器、服务和其他代码进行跟踪。第二个参数定义该模块依赖的其它模块列表。
td
:marked
@@ -1045,7 +1045,7 @@ table(width="100%")
We `import` what we need from the module files.
我们`import`任何我们想从模块文件中得到的东西。
我们`import`任何想从模块文件中得到的东西。
For more information on modules see [Architecture Overview](../guide/architecture.html#module).
@@ -1068,7 +1068,7 @@ table(width="100%")
In Angular 1, we have code in each controller that looks up an appropriate Angular module
and registers the controller with that module.
在Angular 1中，我们在每个控制器中都有一些代码，用于找到合适的Angular模块并把该控制器注册进去。
在Angular 1中，在每个控制器中都有一些代码，用于找到合适的Angular模块并把该控制器注册进去。
The first argument is the controller name. The second argument defines the string names of
all dependencies injected into this controller, and a reference to the controller function.
@@ -1092,7 +1092,7 @@ table(width="100%")
This is how we associate a template with code, which is defined in the component class.
这就是我们把模板关联到代码的方式，它定义在组件类中。
这就是把模板关联到代码的方式，它定义在组件类中。
For more information on components see [Architecture Overview](../guide/architecture.html#component).
@@ -1198,7 +1198,7 @@ a(id="style-sheets")
样式表美化我们的应用程序。
在Angular 1中，我们为整个应用程序指定样式表。
当应用程序成长一段时间之后，应用程序中很多部分的样式会被合并，导致无法预计的后果。
在Angular 2中，我们仍然会为整个应用程序定义样式，不过现在我们也可以把样式表封装在特定的组件中。
在Angular 2中，我们仍然会为整个应用程序定义样式，不过现在也可以把样式表封装在特定的组件中。
table(width="100%")
col(width="50%")
@@ -1229,7 +1229,7 @@ table(width="100%")
But we can now also encapsulate styles for our components.
在Angular2中，我们可以继续在`index.html`中使用link标签来为应用程序定义样式。
但是我们也能在组件中封装样式。
但是也能在组件中封装样式。
:marked
### StyleUrls
public/docs/ts/latest/cookbook/component-communication.jade
+13 -13
View File
@@ -12,7 +12,7 @@ include ../_util-fns
For an in-depth look at each fundamental concepts in component communication, we can find detailed description and
samples in the [Component Communication]() document.
要深入了解组件通讯的各个基本概念，我们可以在[组件通讯Component Communication]()文档中可以找到详细的描述和例子。
要深入了解组件通讯的各个基本概念，在[组件通讯Component Communication]()文档中可以找到详细的描述和例子。
<a id="toc"></a>
:marked
@@ -87,7 +87,7 @@ figure.image-display
E2E test that all children were instantiated and displayed as expected:
端到端测试，用于确保所有的子组件都像我们所期待的那样被初始化并显示出来。
端到端测试，用于确保所有的子组件都像所期待的那样被初始化并显示出来。
+makeExample('cb-component-communication/e2e-spec.ts', 'parent-to-child')
@@ -254,7 +254,7 @@ parent-to-child-local-var
A parent component cannot use data binding to read child properties or invoke child methods. We can do both by creating a template reference variable for the child element and then reference that variable *within the parent template* as seen in the following example.
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但我们可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，如下例所示。
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，如下例所示。
<a id="countdown-timer-example"></a>
@@ -276,7 +276,7 @@ parent-to-child-local-var
We can place a local variable (`#timer`) on the tag (`<countdown-timer>`) representing the child component. That gives us a reference to the child component itself and the ability to access *any of its properties or methods* from within the parent template.
我们把本地变量(`#timer`)放到(`<countdown-timer>`)标签中，用来代表子组件。这样父组件的模板就得到了子组件的引用，于是可以在父组件的模板中访问子组件的所有属性和方法。
把本地变量(`#timer`)放到(`<countdown-timer>`)标签中，用来代表子组件。这样父组件的模板就得到了子组件的引用，于是可以在父组件的模板中访问子组件的所有属性和方法。
In this example, we wire parent buttons to the child's `start` and `stop` and use interpolation to display the child's `seconds` property.
@@ -317,11 +317,11 @@ a(id="countdown-tests")
We can't use the *local variable* technique if an instance of the parent component *class* must read or write child component values or must call child component methods.
如果父组件的*类*需要读取子组件的属性值或调用子组件的方法，我们就不能使用*本地变量*方法了。
如果父组件的*类*需要读取子组件的属性值或调用子组件的方法，就不能使用*本地变量*方法。
When the parent component *class* requires that kind of access, we ***inject*** the child component into the parent as a *ViewChild*.
当父组件*类*需要这种访问时，我们可以把子组件作为*ViewChild*，***注入***到父组件里面。
当父组件*类*需要这种访问时，可以把子组件作为*ViewChild*，***注入***到父组件里面。
We'll illustrate this technique with the same [Countdown Timer](#countdown-timer-example) example. We won't change its appearance or behavior. The child [CountdownTimerComponent](#countdown-timer-example) is the same as well.
@@ -331,7 +331,7 @@ a(id="countdown-tests")
:marked
We are switching from the *local variable* to the *ViewChild* technique solely for the purpose of demonstration.
我们由*本地变量*切换到*ViewChild*技术的唯一目的就是做示范。
由*本地变量*切换到*ViewChild*技术的唯一目的就是做示范。
:marked
Here is the parent, `CountdownViewChildParentComponent`:
@@ -346,12 +346,12 @@ a(id="countdown-tests")
We import references to the `ViewChild` decorator and the `AfterViewInit` lifecycle hook.
我们需要通过`ViewChild`装饰器导入这个引用，并挂上`AfterViewInit`生命周期钩子。
需要通过`ViewChild`装饰器导入这个引用，并挂上`AfterViewInit`生命周期钩子。
We inject the child `CountdownTimerComponent` into the private `timerComponent` property
via the `@ViewChild` property decoration.
我们通过`@ViewChild`属性装饰器，将子组件`CountdownTimerComponent`注入到私有属性`timerComponent`里面。
通过`@ViewChild`属性装饰器，将子组件`CountdownTimerComponent`注入到私有属性`timerComponent`里面。
The `#timer` local variable is gone from the component metadata. Instead we bind the buttons to the parent component's own `start` and `stop` methods and present the ticking seconds in an interpolation around the parent component's `seconds` method.
@@ -367,11 +367,11 @@ a(id="countdown-tests")
Then Angular calls the `ngAfterViewInit` lifecycle hook at which time it is *too late* to update the parent view's display of the countdown seconds. Angular's unidirectional data flow rule prevents us from updating the parent view's in the same cycle. We have to *wait one turn* before we can display the seconds.
然后Angular会调用`ngAfterViewInit`生命周期钩子，但这时候再更新父组件视图的倒计时就已经太晚了。Angular的单向数据流规则会阻止我们在同一个周期内更新父组件视图。我们在显示秒数之前会被迫*再等一轮儿*。
然后Angular会调用`ngAfterViewInit`生命周期钩子，但这时候再更新父组件视图的倒计时就已经太晚了。Angular的单向数据流规则会阻止在同一个周期内更新父组件视图。我们在显示秒数之前会被迫*再等一轮儿*。
We use `setTimeout` to wait one tick and then revise the `seconds` method so that it takes future values from the timer component.
我们使用`setTimeout`来等下一轮儿，然后改写`seconds`方法，这样它接下来就会从注入的这个计时器组件里获取秒数的值。
使用`setTimeout`来等下一轮儿，然后改写`seconds`方法，这样它接下来就会从注入的这个计时器组件里获取秒数的值。
### Test it
### 测试
@@ -422,11 +422,11 @@ a(id="countdown-tests")
:marked
Notice that we capture the `subscription` and unsubscribe when the `AstronautComponent` is destroyed. This is a memory-leak guard step. There is no actual risk in this app because the lifetime of a `AstronautComponent` is the same as the lifetime of the app itself. That *would not* always be true in a more complex application.
注意，我们通过`subscription`服务订阅任务，并在`AstronautComponent`被销毁的时候退订。这是一个用于防止内存泄漏的保护措施。实际上，在这个应用程序中并没有这个风险，因为`AstronautComponent`的生命期和应用程序的生命期一样长。但在更复杂的应用程序环境中就不一定了。
注意，通过`subscription`服务订阅任务，并在`AstronautComponent`被销毁的时候退订。这是一个用于防止内存泄漏的保护措施。实际上，在这个应用程序中并没有这个风险，因为`AstronautComponent`的生命期和应用程序的生命期一样长。但在更复杂的应用程序环境中就不一定了。
We do not add this guard to the `MissionControlComponent` because, as the parent, it controls the lifetime of the `MissionService`.
我们不需要在`MissionControlComponent`中添加这个保护措施，因为作为父组件，它控制着`MissionService`的生命期。
不需要在`MissionControlComponent`中添加这个保护措施，因为作为父组件，它控制着`MissionService`的生命期。
:marked
The *History* log demonstrates that messages travel in both directions between the parent `MissionControlComponent` and the `AstronautComponent` children, facilitated by the service:
public/docs/ts/latest/cookbook/component-relative-paths.jade
+13 -13
View File
@@ -9,7 +9,7 @@ include ../_util-fns
We identify those files with a URL in the `templateUrl` and `styleUrls` properties of the `@Component` metadata
as seen here:
我们的组件通常都是引用外部的模板和样式表文件。
组件通常都是引用外部的模板和样式表文件。
我们在`@Component`的元数据中通过`templateUrl`和`styleUrls`属性来标识出它们的位置：
+makeExample('cb-component-relative-paths/ts/app/some.component.ts','absolute-config')(format='.')
@@ -35,7 +35,7 @@ include ../_util-fns
It would be much easier to write and maintain our application components if we could specify template and style locations
*relative* to their component class file.
如果我们能用*相对*于组件类文件的路径来指定模板和样式表的位置，那么编写和维护组件就会变得容易得多。
如果能用*相对*于组件类文件的路径来指定模板和样式表的位置，那么编写和维护组件就会变得容易得多。
*We can!*
@@ -47,7 +47,7 @@ include ../_util-fns
with a suitable package loader such as `systemjs` or `webpack`.
Learn why [below](#why-default).
如果把应用构建成`commonjs`模块，并用一个合适的包加载器(比如`systemjs`或`webpack`)加载那些模块，我们就可以用相对路径。
如果把应用构建成`commonjs`模块，并用一个合适的包加载器(比如`systemjs`或`webpack`)加载那些模块，就可以用相对路径。
[在下方](#why-default)可以学到原理。
The Angular 2 CLI uses these technologies and defaults to the
@@ -66,7 +66,7 @@ include ../_util-fns
Our goal is to specify template and style URLs *relative* to their component class files,
hence the term ***component-relative path***.
我们的目标把模板和样式表的URL指定为*相对*于组件类的路径，因此得名***组件相对路径***。
目标是把模板和样式表的URL指定为*相对*于组件类的路径，因此得名***组件相对路径***。
The key to success is following a convention that puts related component files in well-known locations.
@@ -76,8 +76,8 @@ include ../_util-fns
companion component class files.
Here we see the three files for `SomeComponent` sitting next to each other in the `app` folder.
我们建议把组件的模板和组件特有的样式表文件作为组件类文件的“兄弟”。
这里我们看到在`app`目录下依次有`SomeComponent`的三个文件。
建议把组件的模板和组件特有的样式表文件作为组件类文件的“兄弟”。
这里在`app`目录下依次有`SomeComponent`的三个文件。
.filetree
.file app
@@ -90,7 +90,7 @@ include ../_util-fns
We'll have more files and folders &mdash; and greater folder depth &mdash; as our application grows.
We'll be fine as long as the component files travel together as the inseparable siblings they are.
当应用规模增长后，我们还会有更多的文件和目录，目录深度也会增加。
当应用规模增长后，还会有更多的文件和目录，目录深度也会增加。
如果组件的所有文件总是像形影不离的兄弟那样共进退，那该多好啊！
### Set the *moduleId*
@@ -99,13 +99,13 @@ include ../_util-fns
Having adopted this file structure convention, we can specify locations of the template and style files
relative to the component class file simply by setting the `moduleId` property of the `@Component` metadata like this
采用这种文件结构约定，我们可以为模板和样式表文件指定相对于组件类文件的位置 —— 只要简单的在`@Component`元数据中设置`moduleId`属性就可以了，就像这样：
采用这种文件结构约定，可以为模板和样式表文件指定相对于组件类文件的位置 —— 只要简单的在`@Component`元数据中设置`moduleId`属性就可以了，就像这样：
+makeExample('cb-component-relative-paths/ts/app/some.component.ts','module-id')(format='.')
:marked
We strip the `app/` base path from the `templateUrl` and `styleUrls`. The result looks like this:
我们从`templateUrl`和`styleUrls`中把基准路径`app/`去掉了。结果是这样的：
从`templateUrl`和`styleUrls`中把基准路径`app/`去掉了。结果是这样的：
+makeExample('cb-component-relative-paths/ts/app/some.component.ts','relative-config')(format='.')
@@ -173,8 +173,8 @@ a#why-default
因为如果没有开发人员的帮助，组件的位置是检测不到的。
Angular应用可能被用多种方式加载：SystemJS包、CommonJS包等等。
我们可能会用几种格式之一来生成模块。
我们甚至可能完全没有写成模块化代码。
用来生成模块的格式可以是任何格式。
甚至可能完全没有写成模块化代码。
With this diversity of packaging and module load strategies,
it's not possible for Angular to know with certainty where these files reside at runtime.
@@ -195,8 +195,8 @@ a#why-default
know that the semi-global `module.id` variable is available and contains
the absolute URL of the component class module file.
但是，*如果*我们遵循了建议的指导原则，用`commonjs`格式编写模块，并使用一个*不错的*模块加载器，
然后，我们就知道，有一个可用的半全局变量`module.id`，它包含组件类模块文件的绝对URL。
但是，*如果*遵循建议的指导原则，用`commonjs`格式编写模块，并使用一个*不错的*模块加载器，
我们要知道，有一个可用的半全局变量`module.id`，它包含组件类模块文件的绝对URL。
That knowledge enables us to tell Angular where the *component* file is
by setting the `moduleId`:
public/docs/ts/latest/cookbook/dependency-injection.jade
+54 -54
View File
File diff suppressed because it is too large Load Diff
public/docs/ts/latest/glossary.jade
+19 -19
View File
@@ -93,7 +93,7 @@ include _util-fns
:marked
We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items:
我们可以在`heroes`目录下添加一个封装桶(按规约叫做`index`)，它导出所有这三条：
在`heroes`目录下添加一个封装桶(按规约叫做`index`)，它导出所有这三条：
code-example(format='').
export * from './hero.model.ts'; // re-export all of its exports
export * from './hero.service.ts'; // re-export all of its exports
@@ -112,7 +112,7 @@ include _util-fns
:marked
That's why we can write this:
这就是为什么我们可以这样写的原因：
这就是为什么可以这样写的原因：
+makeExample('../docs/_fragments/quickstart/ts/app/app.component.ts', 'import')(format=".")
// #docregion b-c
@@ -143,7 +143,7 @@ include _util-fns
and optionally registers service [providers](#provider) with the
[dependency injection system](#dependency-injection).
我们通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component)，
通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component)，
并可能通过[依赖注入体系(Dependency Injection System)](#dependency-injection)注册服务的[供应商(Provider)](#provider)。
One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
@@ -169,8 +169,8 @@ include _util-fns
This form is also known as **lower camel case**, to distinguish it from **upper camel case** which we call [PascalCase](#pascalcase).
When we write "camelCase" in this documentation we always mean *lower camel case*.
这种形式也被叫做**小驼峰式命名法(lower camel case)**，以区分于**大驼峰式命名法**(我们也叫[Pascal命名法(PascalCase)](#pascalcase))。
当我们在文档中提到“驼峰式命名法(camelCase)”的时候，所指的都是小驼峰命名法。
这种形式也被叫做**小驼峰式命名法(lower camel case)**，以区分于**大驼峰式命名法**(也叫[Pascal命名法(PascalCase)](#pascalcase))。
在文档中提到“驼峰式命名法(camelCase)”的时候，我们所指的都是小驼峰命名法。
:marked
## Component
@@ -237,13 +237,13 @@ include _util-fns
event listeners, pull changed values from the screen, and
update application data values ... all by hand.
我们当然也可以自己处理这些操作：将数据显示到HTML网页，添加事件监听器，从屏幕获取数据变化，然后更新数据等等……
当然也可以自己处理这些操作：将数据显示到HTML网页，添加事件监听器，从屏幕获取数据变化，然后更新数据等等……
Or we could declare the relationship between an HTML widget
and an application data source ... and let a data binding
framework handle the details.
或者，我们也可以声明HTML小部件和数据源的关系……，让一个数据绑定框架来处理所有细节。
或者，也可以声明HTML小部件和数据源的关系……，让一个数据绑定框架来处理所有细节。
Data Binding is that second approach. Angular has a rich
data binding framework with a variety of data binding
@@ -291,7 +291,7 @@ include _util-fns
We apply a decorator by positioning it
immediately above or to the left of the thing it decorates.
我们应用装饰器的方法是把装饰器放到被装饰对象的上面或左边。
应用装饰器的方法是把装饰器放到被装饰对象的上面或左边。
Angular has its own set of decorators to help it interoperate with our application parts.
Here is an example of a `@Component` decorator that identifies a
@@ -348,14 +348,14 @@ include _util-fns
part "A" relies on another part "B", we say that "A" depends on "B" and
that "B" is a dependency of "A".
这些小部件通常会依赖其它小部件。一个Angular[组件(Component)](#component)可能依赖一个“服务”部件来获取数据或处理运算。当部件A要靠另一个部件B才能工作，我们就说A“依赖于”B，B是A的“依赖”。
这些小部件通常会依赖其它小部件。一个Angular[组件(Component)](#component)可能依赖一个“服务”部件来获取数据或处理运算。如果部件A要靠另一个部件B才能工作，那么A“依赖于”B，B是A的“依赖”。
We can ask a "Dependency Injection System" to create "A"
for us and handle all the dependencies.
If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies
and returns a fully prepared instance of "A".
我们可以要求“依赖注入系统”为我们创建一个部件A并处理所有A的“依赖”。如果A需要B，B需要C，这个系统便解析这个依赖链，给我们返回一个完全准备好的A实例。
我们可以要求“依赖注入系统”为我们创建一个部件A并处理所有A的“依赖”。如果A需要B，B需要C，这个系统便解析这个依赖链，返回一个完全准备好的A实例。
Angular provides and relies upon its own sophisticated
[Dependency Injection](dependency-injection.html) system
@@ -375,7 +375,7 @@ include _util-fns
the value associated with the token for the `Foo` class, typically an instance of `Foo` itself.
令牌是一个Angular中的类型(`OpaqueToken`)。我们很少需要直接接触令牌。绝大多数类方法都接受类名(`Foo`)或字符串("foo")，Angular会把这些类名称和字符串转换成令牌。
当我们调用`injector.get(Foo)`时，注入器返回用`Foo`类生成的令牌所对应的依赖值，该依赖值通常是`Foo`类的实例。
当调用`injector.get(Foo)`时，注入器返回用`Foo`类生成的令牌所对应的依赖值，该依赖值通常是`Foo`类的实例。
Angular makes similar requests internally during many of its operations
as when it creates a [`Component`](#AppComponent) for display.
@@ -664,7 +664,7 @@ include _util-fns
In general, we assemble our application from many modules, both the ones we write ourselves
and the ones we acquire from others.
一般来说，我们用模块来组装我们的应用程序，这些模块包含我们自己编写的模块和从其它地方获取的模块。
一般来说，我们用模块来组装应用程序，这些模块包含我们自己编写的模块和从其它地方获取的模块。
A typical module is a cohesive block of code dedicated to a single purpose.
@@ -758,8 +758,8 @@ include _util-fns
to associate the pipe function with a name. We then can use that
name in our HTML to declaratively transform values on screen.
Angular的管道是一个函数，用于把输入值转换成输出值以供[视图(View)](#view)显示。我们使用`#{atSym}Pipe`!{decoratorCn}来把管道函数关联到它的名字上。
然后，我们就可以在HTML中用它的名字来声明该如何把输入值转换为显示值了。
Angular的管道是一个函数，用于把输入值转换成输出值以供[视图(View)](#view)显示。使用`#{atSym}Pipe`!{decoratorCn}来把管道函数关联到它的名字上。
然后，就可以在HTML中用它的名字来声明该如何把输入值转换为显示值了。
Here's an example that uses the built-in `currency` pipe to display
a numeric value in the local currency.
@@ -859,7 +859,7 @@ include _util-fns
The only difference, from a consumer perspective,
is that the package name begins with the Angular *scope name*, `@angular`.
我们使用和导入*普通*包相同的方式导入范围化包。
使用和导入*普通*包相同的方式导入范围化包。
从消费者的视角看，唯一的不同是那些包的名字是用Angular的*范围名*`@angular`开头儿的。
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
@@ -899,7 +899,7 @@ include _util-fns
We write templates in a special [Template Syntax](/docs/ts/latest/guide/template-syntax.html).
我们使用特殊的[模板语法](/docs/ts/latest/guide/template-syntax.html)来编写模板。
使用特殊的[模板语法](/docs/ts/latest/guide/template-syntax.html)来编写模板。
:marked
## Template Expression
@@ -937,7 +937,7 @@ include _util-fns
code completion, refactoring, and intelligent search). Many code editors
and IDEs support TypeScript either natively or with plugins.
TypeScript还以它的可选类型系统而著称。该类型系统给我们提供了编译期类型检查和强大的工具支持(比如“Intellisense”， 自动代码补齐，重构和智能搜索等)。许多程序编辑器和开发环境都自带了TypeScript支持或通过插件提供支持。
TypeScript还以它的可选类型系统而著称。该类型系统提供了编译期类型检查和强大的工具支持(比如“Intellisense”， 自动代码补齐，重构和智能搜索等)。许多程序编辑器和开发环境都自带了TypeScript支持或通过插件提供支持。
TypeScript is the preferred language for Angular 2 development although
we are welcome to write in other JavaScript dialects such as [ES5](#es5).
@@ -974,7 +974,7 @@ include _util-fns
find it convenient to refer to a component as a view.
Angular在一个或多个[指令(Directive)](#directive)的控制下渲染视图，尤其是[组件(Component)](#component)型指令及其[模板(Template)](#template)。
组件扮演着非常重要的角色，甚至我们经常会为了方便而直接用“视图”作为组件的代名词。
组件扮演着非常重要的角色，我们甚至经常会为了方便, 直接用“视图”作为组件的代名词。
Views often contain other views and any view might be loaded and unloaded
dynamically as the user navigates through the application, typically
@@ -1015,7 +1015,7 @@ include _util-fns
asynchronous events by checking for data changes and updating
the information it displays via [data binding](#data-binding).
Angular会在一个区域中运行我们的应用程序，在这个区域中，它可以对异步事件做出反应，可以通过检查数据变更、利用[数据绑定(Data Binding)](#data-binding)来更新信息显示。
Angular会在一个 Zone 区域中运行应用程序，在这个区域中，它可以对异步事件做出反应，可以通过检查数据变更、利用[数据绑定(Data Binding)](#data-binding)来更新信息显示。
Learn more about zones in this
[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U).
public/docs/ts/latest/quickstart.jade
+49 -49
View File
File diff suppressed because it is too large Load Diff