diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade index 50c19c3dba..2213e3ba80 100644 --- a/public/docs/ts/latest/cookbook/aot-compiler.jade +++ b/public/docs/ts/latest/cookbook/aot-compiler.jade @@ -561,7 +561,7 @@ a#toh ***index.html*** - ***Index.html*** + ***index.html*** The JiT and AoT apps require their own `index.html` files because they setup and launch so differently. **Put the AoT version in the `/aot` folder** because two `index.html` files can't be in the same folder. @@ -570,6 +570,7 @@ a#toh **将AoT版本放在`/aot`目录**，因为两个`index.html`文件不能位于同一个目录。 Here they are for comparison: + 下面是它们的比较： +makeTabs( @@ -594,6 +595,8 @@ a#toh ***main.ts*** + ***main.ts*** + JiT and AoT applications boot in much the same way but require different Angular libraries to do so. The key differences, covered in the [Bootstrap](#bootstrap) section above, are evident in these `main` files which can and should reside in the same folder: @@ -612,6 +615,7 @@ a#toh :marked ***Component-relative Template URLS*** + ***相对组件的模板路径*** The AoT compiler requires that `@Component` URLS for external templates and css files be _component-relative_. @@ -640,6 +644,7 @@ a#toh 设置一个全局`module`是暂时的权宜之计。 :marked ***TypeScript configuration*** + ***TypeScript配置*** JiT-compiled applications transpile to `commonjs` modules. diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index d5f81b111a..2dea4e1a2c 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -433,7 +433,7 @@ block ts-decorator The `@Component` decorator takes a required configuration object with the information Angular needs to create and present the component and its view. - `@Component`!{_decoratorCn}能接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图。 + `@Component`!{_decoratorCn}能接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图。 Here are a few of the possible `@Component` configuration options: @@ -482,11 +482,6 @@ figure 比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。
- - 我们也会沿用类似的风格，用其它元数据!{_decoratorCn}来指导Angular的行为。 - 比如`@Injectable`、`@Input`和`@Output`等是一些最常用的!{_decoratorCn}。 - -
:marked The architectural takeaway is that you must add metadata to your code so that Angular knows what to do. @@ -996,7 +991,7 @@ code-example(). > [**Router**](router.html): Navigate from page to page within the client application and never leave the browser. - > [**路由器**](router.html)：在应用程序客户端导航，并且不离开浏览器。 + > [**路由器**](router.html)：在应用程序客户端导航，并且不离开浏览器。 > [**Testing**](testing.html): Run unit tests on your application parts as they interact with the Angular framework using the _Angular Testing Platform_. diff --git a/public/docs/ts/latest/guide/browser-support.jade b/public/docs/ts/latest/guide/browser-support.jade index ed7afed1fd..cf9a56d752 100644 --- a/public/docs/ts/latest/guide/browser-support.jade +++ b/public/docs/ts/latest/guide/browser-support.jade @@ -248,19 +248,13 @@ table td MIT / Unicode licence td 13.5KB tr - td - p. - a(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations - p. - a#web-animations(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations + td + a#web-animations(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations td Apache td 14.8KB tr td - p. - a(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array - p. - a#typedarray(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array + a#typedarray(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array td MIT td 4KB tr diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index c808c630db..67054a4df9 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -42,8 +42,6 @@ include ../_util-fns - 结合表单来使用`ngModel`，能让我们跟踪状态的变化并对表单控件做验证 - - 结合表单来使用`ngModel`，能让我们跟踪状态的变化并对表单控件做验证 - - provide strong visual feedback using special CSS classes that track the state of the controls - 使用特殊的CSS类来跟踪控件状态，并提供强烈的视觉反馈 diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade index cd5b335130..2efbd5c6a2 100644 --- a/public/docs/ts/latest/guide/index.jade +++ b/public/docs/ts/latest/guide/index.jade @@ -155,11 +155,13 @@ table(width="100%") Look for a link to a running version of that sample near the top of each page, such as this from the [Architecture](architecture.html) page. + + 在每页靠近顶部的地方都可以看到一个链接，指向这个范例的可执行版本，比如[架构](architecture.html)一章中的。 +

The link launches a browser-based code editor where you can inspect, modify, save, and download the code.

- 在每页靠近顶部的地方都可以看到一个链接，指向这个范例的可执行版本，比如[架构](architecture.html)一章中的。

这个链接启动一个基于浏览器的代码编辑器，在这里，我们可以查看、修改、保存和下载这些代码。

diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 8a3071d54d..820bb56341 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -423,7 +423,7 @@ table td p Router p Router（路由器） - td. + td p. Displays the application component for the active URL. Manages navigation from one component to the next. @@ -2295,7 +2295,11 @@ h3#merge-hero-routes 把hero模块导入到AppModule中 When the user selects a crisis, the app navigates to the `CrisisDetailComponent` for display and editing of the crisis name. - Voilà, another feature module! + `Crisis`有`id`和`name`，和`Hero`一样。 + 新的`CrisisListComponent`显示了危机列表。 + 当用户选择一个危机时，应用导航到`CrisisDetailComponent`，显示和编辑危机名字。 + + Voila, another feature module! 真棒！另一个特性模块诞生了 diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index bc9f8aa9c7..eb010411ea 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -3006,8 +3006,9 @@ a(href="#toc") 回到顶部 Use Extension - - + +.s-rule.consider + :marked **Consider** using [snippets](https://atom.io/packages/angular-2-typescript-snippets) for [Atom](https://atom.io/) that follow these styles and guidelines. **考虑**使用[Atom](https://atom.io/)的[代码片断](https://atom.io/packages/angular-2-typescript-snippets)来实施本风格指南。 diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 5bf4331617..d6dc40134b 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -1943,7 +1943,7 @@ block dart-no-truthy-falsey :marked A template input variable is **not** the same as a [template reference variable](#ref-vars)! - 模板输入变量和[模板引用变量](#ref-vars)**不是**一回事！ + 模板输入变量和[模板引用变量](#ref-vars)**不是**一回事！ :marked We use this variable within the template to access a hero’s properties, diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 182009445c..2723e09a2c 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -1310,7 +1310,7 @@ figure :marked ### Switching to TypeScript - ## 切换到TypeScript + ### 切换到TypeScript Since we're going to be writing our Angular 2 code in TypeScript, it makes sense to bring in the TypeScript compiler even before we begin upgrading. @@ -1665,13 +1665,15 @@ code-example(format=""). attached to the `` element of the host page. This will no longer work with Angular 2. We should switch to a JavaScript-driven bootstrap instead. + 我们的应用现在是使用宿主页面中附加到``元素上的`ng-app`指令引导的。 + 但在Angular 2中，它不再工作了。我们得切换成JavaScript驱动的引导方式。 + So, remove the `ng-app` attribute from `index.html`, and instead boostrap via `app/main.ts`. This file has been configured as the application entrypoint in `systemjs.config.js`, so it is already being loaded by the browser. - 我们的应用现在是使用宿主页面中附加到``元素上的`ng-app`指令引导的。 - 但在Angular 2中，它不再工作了。我们得切换成JavaScript驱动的引导方式。 - 所以，从`index.html`中移除`ng-app`属性，并把这些加载`main.ts`中： + 所以，从`index.html`中移除`ng-app`属性，并把这些加载`main.ts`中。 + 在`systemjs.config.js`中已经将此文件配置为应用的入口，所以它已被浏览器所加载。 +makeExample('upgrade-phonecat-2-hybrid/ts/app/main.ts', 'bootstrap') diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index ed0825ffd6..97d6a83109 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -1,6 +1,6 @@ block includes include _util-fns - - var _Install = '安装' + - var _Install = 'Install' - var _Install_cn = '安装' - var _prereq = 'Node.js and npm' - var _prereq_cn = 'Node.js和npm' @@ -43,26 +43,44 @@ figure.image-display 你还可以克隆整个“快速起步”应用。 h1 Build this application! + h1 构建此应用！ :marked - [Prerequisite](#prereq): Install #{_prereq}. + - [环境准备](#prereq): 安装#{_prereq_cn}。 + - [Step 1](#create-and-configure): Create and configure the project. + - [步骤1](#create-and-configure)：创建并配置此项目。 + - [Step 2](#ngmodule): Create your application. + - [步骤2](#ngmodule)：创建应用。 -
  • [Step 3](#root-component): Create a component and add it to your application.
    • -
  • [步骤3](#root-component)：创建组件并添加到应用程序中。
    • + + - [Step 3](#root-component): Create a component and add it to your application. + + - [步骤3](#root-component)：创建组件并添加到应用程序中。 + - [Step !{step++}](#main): Start up your application. - - [步骤!{step++](#main)：启动应用程序。 + + - [步骤4](#main)：启动应用 + - [Step !{step++}](#index): Define the web page that hosts the application. - - [步骤!{step++](#index)：定义作为该应用的宿主的页面。 + + - [步骤5](#index)：定义作为该应用的宿主的页面。 + - [Step !{step++}](#build-and-run): Build and run the application. - - [步骤!{step++](#build-and-run)：构建并运行此应用。 + + - [步骤6](#build-and-run)：构建并运行此应用。 + - [Step !{step++}](#make-changes): Make some live changes. - - [步骤!{step++](#make-changes)：做一些修改，并立即查看效果。 - - [Wrap up and Next Steps](#wrap-up) + + - [步骤7](#make-changes)：做一些修改，并立即查看效果。 + + - [Wrap up and next steps](#wrap-up) + - [收工，下一步](#wrap-up) - var step = _stepInit // reinitialize step counter for headers to come @@ -345,7 +363,7 @@ code-example.code-shell. .l-main-section h2#main Step !{step++}: Start up your application -h2#main 步骤!{step++}：启动应用 +h2#main 步骤4：启动应用 block create-main :marked @@ -397,7 +415,7 @@ block create-main .l-main-section h2#index Step !{step++}: Define the web page that hosts the application -h2#index 步骤!{step++}：定义该应用的宿主页面 +h2#index 步骤5：定义该应用的宿主页面 :marked In the *#{_indexHtmlDir}* folder, create an `index.html` file and paste the following lines into it: @@ -449,7 +467,7 @@ block commentary-on-index-html .l-main-section#build-and-run h2 Step !{step++}: Build and run the application -h2 步骤!{step++}： 编译并运行应用程序 +h2 步骤6： 编译并运行应用程序 block run-app :marked Open a terminal window and enter this command: @@ -487,7 +505,7 @@ block build-app .l-main-section#make-changes h2 Step !{step++}: Make some live changes -h2 步骤!{step++}：做一些即时修改 +h2 步骤7：做一些即时修改 :marked Try changing the message in app/app.component.ts to "Hello Again Angular!". @@ -526,10 +544,12 @@ block project-file-structure .file styles.css .file systemjs.config.js .file tsconfig.json -:marked - To see the file contents, open the . - 要查看文件的内容，请打开在线例子。 +block project-files + :marked + To see the file contents, open the . + + 要查看文件的内容，请打开在线例子。 .l-main-section :marked diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index de02e9c03d..c6739720ce 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -222,6 +222,7 @@ block keep-app-running * Move the following from `HeroesComponent` to `AppComponent`: * 将下面的项目从`HeroesComponent`移到`AppComponent`： + * `title` class property * `title`类属性 @@ -231,8 +232,8 @@ block keep-app-running * 在模板中添加一个`

    `标签，包裹着到`title`属性的绑定。 * Add a `` element to the app template just below the heading so we still see the heroes. - * - 在模板中添加``标签，以便我们仍能看到英雄列表。 + + * 在模板中添加``标签，以便我们仍能看到英雄列表。 * Add `HeroesComponent` to the `!{_declsVsDirectives}` !{_array} of `!{_AppModuleVsAppComp}` so Angular recognizes the `` tags.