diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade index d20db94f30..1bb35cd106 100644 --- a/public/docs/js/latest/cookbook/ts-to-js.jade +++ b/public/docs/js/latest/cookbook/ts-to-js.jade @@ -15,30 +15,49 @@ include ../../../../_includes/_util-fns code examples to ES5, so that they can be applied to Angular 2 JavaScript applications. + 因为TypeScript是一个很受欢迎的Angular 2的语言选择,你在网络上和本站看到的很多代码例子 + 都是以TypeScript编写的。本烹饪书包含如何把这些代码编译到ES5的食谱,这样它们可以被应用 + 到Angular 2的JavaScript应用程序里。 :marked ## Table of contents + + ## 目录 [Modularity: imports and exports](#modularity) + + [模块化:导入和导出](#modularity) [Classes and Class Metadata](#class-metadata) + [类和类元数据](#class-metadata) + [Input and Output Metadata](#property-metadata) + [导入和导出元数据](#property-metadata) + [Dependency Injection](#dependency-injection) + [依赖注入](#dependency-injection) + [Host and Query Metadata](#other-property-metadata) + + [宿主和查询元素据](#other-property-metadata) **Run and compare the live [TypeScript](/resources/live-examples/cb-ts-to-js/ts/plnkr.html) and [JavaScript](/resources/live-examples/cb-ts-to-js/js/plnkr.html) code shown in this cookbook.** + + **运行并比较本烹饪书里面的在线[TypeScript](/resources/live-examples/cb-ts-to-js/ts/plnkr.html)和[JavaScript](/resources/live-examples/cb-ts-to-js/js/plnkr.html)代码** a(id="modularity") .l-main-section :marked ## Importing and Exporting + ## 导入和导出 + - var top="vertical-align:top" table(width="100%") col(width="50%") @@ -51,20 +70,29 @@ table(width="100%") :marked ### Importing Angular 2 Code + ### 导入Angular 2代码 + In TypeScript code, Angular 2 classes, functions, and other members are imported with TypeScript `import` statements: + + 在TypeScript代码中,Angular 2是利用TypeScript的`import`声明来导入类、函数和其他成员的。 +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." ) td :marked ### Accessing Angular 2 Code through the ng global + + ### 通过全局ng来访问Angular 2代码 In JavaScript code, when using [the Angular 2 packages](../glossary.html#!#scoped-package), we can access Angular code through the global `ng` object. In the nested members of this object we'll find everything we would import from `angular2` in TypeScript: + + 在JavaScript代码中,当使用[Angular 2库](../glossary.html#!#scoped-package)时, + 我们可以通过全局的`ng`对象来访问Angular代码。在这个对象嵌套很多成员中,我们能找到所有在TypeScript里面导入的`angular2` +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." ) @@ -73,15 +101,21 @@ table(width="100%") :marked ### Importing and Exporting Application Code + ### 导入和导出应用程序代码 + Each file in an Angular 2 TypeScript application constitutes a TypeScript module. When we want to make something from a module available to other modules, we `export` it. + + 在Angular 2 TypeScript应用里,每个文件组成一个TypeScript模块。当需要让一个模块在其他模块中可见时,我们`export`它。 +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'appexport')(format="." ) :marked In other modules we can then `import` things that have been exported elsewhere. + + 然后,我们就可以在模块`import`其它地方导出的东西。 +makeExample('cb-ts-to-js/ts/app/main.ts', 'appimport')(format="." ) @@ -89,9 +123,14 @@ table(width="100%") :marked ### Sharing Application Code + ### 共享应用程序代码 + In an Angular 2 JavaScript application, we load each file to the page using a `