diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade index 1f6b006df6..f1404cc02c 100644 --- a/public/docs/ts/latest/guide/index.jade +++ b/public/docs/ts/latest/guide/index.jade @@ -112,15 +112,25 @@ table(width="100%") 我们可以通过在线例子的链接找到完整的源代码。 ## Code samples + + ## 代码例子 Each page includes code snippets from a sample application that accompanies the page. You can reuse these snippets in your applications. + + 每章都包含了该章附带例子应用的代码片段。你可以在你的应用中再利用这些代码片段。 Look for a link to a running version of that sample, often near the top of the page, such as this from the [Architecture](architecture.html) page. The link launches a browser-based, code editor where you can inspect, modify, save, and download the code. + + 查找这些例子在线版本的链接,通常在页面的开头部分附近。 + 例如[架构](architecture.html)章的在线例子。 + + 该链接启动浏览器代码编辑器,你可以查看、修改、保存和下载代码。 + ## Reference pages ## 参考资料 @@ -157,4 +167,3 @@ table(width="100%") * Use the Angular Github repository to report issues with **Angular** itself. - 到Angular Github 库报告与**Angular本身**有关的issues。 - diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index cf978e0a00..2e335a2562 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -4,19 +4,31 @@ block includes :marked Angular applications are made of _components_. + + Angular应用是由*组件*组成的。 + A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string: + + *组件*由HTML模板和组件类组成,组件类控制视图。下面是一个显示简单字符串的组件: +makeExample('app/app.component.ts')(format='.') :marked You can try this out without installing anything. Open the QuickStart example !{_on_Plunkr} in another tab and follow along. + + 无需安装任何东西,你就可以试试它。在另一个浏览器标签页打开并跟随Plunkr上的《快速开始》例子。 Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_decorator} '"!{_decorator}" explained') function that takes a _metadata_ object. The metadata object describes how the HTML template and component class work together. + 每个组件都以`@Component`[装饰器](glossary.html#!{_decorator} '"!{_decorator}" explained')函数开始,它接受一个_元数据_对象参数。该元素对象描述了HTML模板和组件类是如何一起工作的。 + The `selector` property tells Angular to display the component inside a custom `` tag in the `index.html`. + + `selector`属性告诉 Angular 在`index.html`中的自定义``标签里显示该组件。 + +makeExample('index.html','my-app','index.html (inside )')(format='.') :marked The `template` property defines a message inside an `

` header. @@ -24,22 +36,39 @@ block includes which is an Angular [interpolation binding](guide/displaying-data.html) expression. At runtime, Angular replaces `{{name}}` with the value of the component's `name` property. + `template`属性定义了`

`标题的一条消息。 + 该消息以“Hello”开始,以 Angular [插值绑定](guide/displaying-data.html)表达式`{{name}}`结束。 + 在运行时,Angular 用组件的`name`属性值替换`{{name}}`。 + In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens. + 在本例中,将组件类的`name`属性从`'Angular'`改为`'World'`,看看会发生什么。 + Interpolation binding is one of many Angular features you'll discover in this documentation. + + 插值绑定是 Angular 的特征之一。你将在本文档中探索更多 Angular 的特征。 +ifDocsFor('ts') .callout.is-helpful header A word about TypeScript + + header 关于 TypeScript p. This example is written in TypeScript, a superset of JavaScript. Angular uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; this guide explains how. + + p. + 本例是用 JavaScript 的一个超集 TypeScript 编写的。 + Angular 使用 TypeScript 是因为它的类型可以帮助工具提高开发者效率。你也可以用 JavaScript 编写 Angular 代码,参见本指南。 .l-sub-section :marked ### Next step + + ### 下一步 To learn how to write a real application, your next step is to set up a local development environment and begin exploring with code. The [**Developer Guide**](guide/index.html) shows you how. - + + 要学习如何编写应用,你的下一步是构建本地开发环境,并开始一边编程一边探索,参见[**开发者指南**](guide/index.html)。