From 0522f7671d98886b4950a77fe18172fc47b58824 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sat, 28 May 2016 20:54:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E6=8C=87=E5=8D=97-=E4=BB=8E1?= =?UTF-8?q?.x=E5=8D=87=E7=BA=A7=20=E7=BF=BB=E8=AF=91=E4=BA=861/3=E5=B7=A6?= =?UTF-8?q?=E5=8F=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../latest/cookbook/dependency-injection.jade | 2 +- public/docs/ts/latest/guide/upgrade.jade | 254 +++++++++++++++++- 2 files changed, 251 insertions(+), 5 deletions(-) diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade index 0fd7181d24..acef54362b 100644 --- a/public/docs/ts/latest/cookbook/dependency-injection.jade +++ b/public/docs/ts/latest/cookbook/dependency-injection.jade @@ -490,7 +490,7 @@ a(id="qualify-dependency-lookup") Angular *projects* (*transcludes*) the corresponding `HeroContactComponent` into the `HeroBioComponent` view, placing it in the `` slot of the `HeroBioComponent` template: - 我们在``标签中插入了``元素。Angular就会把相应的`HeroContactComponent`*投影*(*transcludes*)进`HeroBioComponent`的视图里, + 我们在``标签中插入了``元素。Angular就会把相应的`HeroContactComponent`*投影*(*transclude*)进`HeroBioComponent`的视图里, 将它放在`HeroBioComponent`模板的``标签槽里。 +makeExample('cb-dependency-injection/ts/app/hero-bio.component.ts','template','app/hero-bio.component.ts (template)')(format='.') diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index ef4760cb83..7f9a60d5c2 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -30,7 +30,7 @@ include ../_util-fns a period of time. The `upgrade` module in Angular 2 has been designed to make incremental upgrading seamless. - 成功升级的关键之一是渐进式的实现它,通过在同一个应用中一起运行这两个框架,并且逐个把Angular 1的组件迁移到Angular 2中。 + 成功升级的关键之一是增量式的实现它,通过在同一个应用中一起运行这两个框架,并且逐个把Angular 1的组件迁移到Angular 2中。 这意味着可以在不必打断其他业务的前提下,升级更大、更复杂的应用程序,因为这项工作可以多人协作完成,并能在一段时间内逐渐铺开。 Angular 2 `upgrade`模块的设计目标就是让你渐进、无缝的完成升级。 @@ -49,7 +49,7 @@ include ../_util-fns 1. [How The Upgrade Adapter Works](#how-the-upgrade-adapter-works) 1. [升级适配器如何工作](#how-the-upgrade-adapter-works) 2. [Bootstrapping Hybrid Angular 1+2 Applications](#bootstrapping-hybrid-angular-1-2-applications) - 2. [引导Angular 1和2的混血(hybrid)应用](#bootstrapping-hybrid-angular-1-2-applications) + 2. [引导Angular 1和2的混合(hybrid)应用](#bootstrapping-hybrid-angular-1-2-applications) 3. [Using Angular 2 Components from Angular 1 Code](#using-angular-2-components-from-angular-1-code) 3. [从Angular 1的代码中使用Angular 2的组件](#using-angular-2-components-from-angular-1-code) 4. [Using Angular 1 Component Directives from Angular 2 Code](#using-angular-1-component-directives-from-angular-2-code) @@ -57,7 +57,7 @@ include ../_util-fns 5. [Projecting Angular 1 Content into Angular 2 Components](#projecting-angular-1-content-into-angular-2-components) 5. [把Angular 1的内容投影(project)进Angular 2组件中](#projecting-angular-1-content-into-angular-2-components) 6. [Transcluding Angular 2 Content into Angular 1 Component Directives](#transcluding-angular-2-content-into-angular-1-component-directives) - 6. [把Angular 2的内容包含(transclude)到Angular 1的组件型指令中](#transcluding-angular-2-content-into-angular-1-component-directives) + 6. [把Angular 2的内容透传(transclude)到Angular 1的组件型指令中](#transcluding-angular-2-content-into-angular-1-component-directives) 7. [Making Angular 1 Dependencies Injectable to Angular 2](#making-angular-1-dependencies-injectable-to-angular-2) 7. [让Angular 1提供的依赖可以被注入到Angular 2](#making-angular-1-dependencies-injectable-to-angular-2) 8. [Making Angular 2 Dependencies Injectable to Angular 1](#making-angular-2-dependencies-injectable-to-angular-1) @@ -74,7 +74,7 @@ include ../_util-fns 4. [PhoneCat Upgrade Tutorial](#phonecat-upgrade-tutorial) 4. [PhoneCat升级教程](#phonecat-upgrade-tutorial) 1. [Bootstrapping A Hybrid 1+2 PhoneCat](#bootstrapping-a-hybrid-1-2-phonecat) - 1. [引导Angular 1+2的混血版PhoneCat](#bootstrapping-a-hybrid-1-2-phonecat) + 1. [引导Angular 1+2的混合版PhoneCat](#bootstrapping-a-hybrid-1-2-phonecat) 2. [Upgrading the Phone factory](#upgrading-the-phone-factory) 2. [升级Phone工厂](#upgrading-the-phone-factory) 3. [Upgrading Controllers to Components](#upgrading-controllers-to-components) @@ -95,7 +95,11 @@ include ../_util-fns and patterns that we can apply to future proof our apps even before we begin the migration. + Angular 1应用程序的组织方式有很多种。当我们想把它们升级到Angular 2的时候, + 有些做起来会比其它的更容易些。即使在我们开始升级之前,也有一些关键的技术和模式可以让我们将来升级时更轻松。 + ## Following The Angular Style Guide + ## 遵循Angular风格指南 The [Angular Style Guide](https://github.com/johnpapa/angular-styleguide) collects patterns and practices that have been proven to result in @@ -103,6 +107,10 @@ include ../_util-fns of information about how to write and organize Angular code - and equally importantly - how **not** to write and organize Angular code. + [Angular风格指南](https://github.com/johnpapa/angular-styleguide)收集了一些 + 已证明能写出干净且可维护的Angular 1程序的模式与实践。 + 它包含了很多关于如何书写和组织Angular代码的有价值信息,同样重要的是,**不应该**如何书写和组织Angular代码。 + Angular 2 is a reimagined version of the best parts of Angular 1. In that sense, its goals are the same as the Angular Style Guide's: To preserve the good parts of Angular 1, and to avoid the bad parts. There's a lot @@ -110,26 +118,46 @@ include ../_util-fns *following the style guide helps make your Angular 1 app more closely aligned with Angular 2*. + Angular 2是一个基于Angular 1中最好的部分构思出来的版本。在这种意义上,它的目标和Angular风格指南是一样的: + 保留Angular 1中好的部分,去掉坏的部分。当然,Angular 2还做了更多。 + 说这些的意思是:*遵循这个风格指南可以让你写出的Angular 1程序更接近Angular 2程序*。 + There are a few rules in particular that will make it much easier to do *an incremental upgrade* using the Angular 2 `upgrade` module: + 特别是某些规则会让使用Angular 2的`upgrade`模块进行*增量升级*变得更简单: + * The [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility) states that there should be one component per file. This not only makes components easy to navigate and find, but will also allow us to migrate them between languages and frameworks one at a time. In this example application, each controller, factory, and filter is in its own source file. + + * [规则1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility) + 规定应该每个文件中放一个组件。这不仅让组件更容易浏览和查找,而且还将允许我们逐个迁移它们的语言和框架。 + 在这个范例程序中,每个控制器、工厂和过滤器都在它自己的源文件中。 + * The [Folders-by-Feature Structure](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure) and [Modularity](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity) rules define similar principles on a higher level of abstraction: Different parts of the application should reside in different directories and Angular modules. + * [按特性分目录的结构](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#folders-by-feature-structure) + 和[模块化](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#modularity) + 规则在较高的抽象层定义了一些相似的原则:应用程序中的不同部分应该被分到不同的目录和Angular模块中。 + When an application is laid out feature per feature in this way, it can also be migrated one feature at a time. For applications that don't already look like this, applying the rules in the Angular style guide is a highly recommended preparation step. And this is not just for the sake of the upgrade - it is just solid advice in general! + 如果应用程序能用这种方式把每个特性分到一个独立目录中,它也就能每次迁移一个特性。 + 对于那些还没有这么做的程序,强烈建议把应用这条规则作为准备步骤。而且这也不仅仅对升级有价值, + 它还是一个通用的规则,可以让你的程序更“坚实”。 + ## Using a Module Loader + ## 使用模块加载器 When we break application code down into one component per file, we often end up with a project structure with a large number of relatively small files. This is @@ -138,6 +166,11 @@ include ../_util-fns `