开发指南-从1.x升级 开始翻译

This commit is contained in:
Zhicheng Wang 2016-05-28 15:52:07 +08:00
parent 55cd18616b
commit e9c7c92483
1 changed files with 276 additions and 239 deletions

View File

@ -6,6 +6,9 @@ include ../_util-fns
comes with built-in tools for migrating Angular 1 projects over to the comes with built-in tools for migrating Angular 1 projects over to the
Angular 2 platform. Angular 2 platform.
已经有了一个Angular 1的程序并不表示我们就不能喜欢Angular 2提供的一切。
这是因为Angular 2带来了一些内建工具帮助我们把Angular 1的项目迁移到Angular 2平台。
Some applications will be easier to upgrade than others, and there are Some applications will be easier to upgrade than others, and there are
ways in which we can make it easier for ourselves. It is possible to ways in which we can make it easier for ourselves. It is possible to
prepare and align Angular 1 applications with Angular 2 even before beginning prepare and align Angular 1 applications with Angular 2 even before beginning
@ -14,6 +17,11 @@ include ../_util-fns
tools. That means the preparation work will not only make the eventual upgrade tools. That means the preparation work will not only make the eventual upgrade
easier, but will also generally improve our Angular 1 applications. easier, but will also generally improve our Angular 1 applications.
有些应用可能比其它的升级起来简单,还有一些方法能让我们自己把这项工作变得更简单。
即使在正式开始升级过程之前让Angular 1的程序提前做些准备并向Angular 2看齐也是有可能的。
这些准备步骤几乎都是关于如何让代码更加松耦合、更有可维护性,以及用现代开发工具提高速度的。
这意味着这种准备工作不仅能让最终的升级变得更简单而且还能提升Angular 1程序的质量。
One of the keys to a successful upgrade is to do it incrementally, One of the keys to a successful upgrade is to do it incrementally,
by running the two frameworks side by side in the same application, and by running the two frameworks side by side in the same application, and
porting Angular 1 components to Angular 2 one by one. This makes it possible porting Angular 1 components to Angular 2 one by one. This makes it possible
@ -22,35 +30,64 @@ include ../_util-fns
a period of time. The `upgrade` module in Angular 2 has been designed to a period of time. The `upgrade` module in Angular 2 has been designed to
make incremental upgrading seamless. make incremental upgrading seamless.
成功升级的关键之一是渐进式的实现它通过在同一个应用中一起运行这两个框架并且逐个把Angular 1的组件迁移到Angular 2中。
这意味着可以在不必打断其他业务的前提下,升级更大、更复杂的应用程序,因为这项工作可以多人协作完成,并能在一段时间内逐渐铺开。
Angular 2 `upgrade`模块的设计目标就是让你渐进、无缝的完成升级。
1. [Preparation](#preparation) 1. [Preparation](#preparation)
1. [准备工作](#preparation)
1. [Following The Angular Style Guide](#following-the-angular-style-guide) 1. [Following The Angular Style Guide](#following-the-angular-style-guide)
1. [遵循Angular风格指南](#following-the-angular-style-guide)
2. [Using a Module Loader](#using-a-module-loader) 2. [Using a Module Loader](#using-a-module-loader)
2. [使用模块加载器](#using-a-module-loader)
3. [Migrating to TypeScript](#migrating-to-typescript) 3. [Migrating to TypeScript](#migrating-to-typescript)
3. [迁移到TypeScript](#migrating-to-typescript)
4. [Using Component Directives](#using-component-directives) 4. [Using Component Directives](#using-component-directives)
4. [使用组件型指令](#using-component-directives)
2. [Upgrading with The Upgrade Adapter](#upgrading-with-the-upgrade-adapter) 2. [Upgrading with The Upgrade Adapter](#upgrading-with-the-upgrade-adapter)
2. [通过升级适配器进行升级](#upgrading-with-the-upgrade-adapter)
1. [How The Upgrade Adapter Works](#how-the-upgrade-adapter-works) 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. [Bootstrapping Hybrid Angular 1+2 Applications](#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. [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) 4. [Using Angular 1 Component Directives from Angular 2 Code](#using-angular-1-component-directives-from-angular-2-code)
4. [从Angular 2的代码中使用Angular 1的组件](#using-angular-1-component-directives-from-angular-2-code)
5. [Projecting Angular 1 Content into Angular 2 Components](#projecting-angular-1-content-into-angular-2-components) 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. [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)
7. [Making Angular 1 Dependencies Injectable to Angular 2](#making-angular-1-dependencies-injectable-to-angular-2) 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) 8. [Making Angular 2 Dependencies Injectable to Angular 1](#making-angular-2-dependencies-injectable-to-angular-1)
8. [让Angular 2提供的依赖可以被注入到Angular 1](#making-angular-2-dependencies-injectable-to-angular-1)
3. [PhoneCat Preparation Tutorial](#phonecat-preparation-tutorial) 3. [PhoneCat Preparation Tutorial](#phonecat-preparation-tutorial)
3. [PhoneCat准备工作教程](#phonecat-preparation-tutorial)
1. [Switching to TypeScript And Module Loading](#switching-to-typescript-and-module-loading) 1. [Switching to TypeScript And Module Loading](#switching-to-typescript-and-module-loading)
1. [切换到TypeScript和模块加载器](#switching-to-typescript-and-module-loading)
2. [Preparing Unit and E2E Tests](#preparing-unit-and-e2e-tests) 2. [Preparing Unit and E2E Tests](#preparing-unit-and-e2e-tests)
2. [准备单元测试和E2E测试](#preparing-unit-and-e2e-tests)
3. [Enjoying The Benefits of TypeScript](#enjoying-the-benefits-of-typescript) 3. [Enjoying The Benefits of TypeScript](#enjoying-the-benefits-of-typescript)
3. [享受TypeScript带来的好处](#enjoying-the-benefits-of-typescript)
4. [PhoneCat Upgrade Tutorial](#phonecat-upgrade-tutorial) 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. [Bootstrapping A Hybrid 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. [Upgrading the Phone factory](#upgrading-the-phone-factory)
2. [升级Phone工厂](#upgrading-the-phone-factory)
3. [Upgrading Controllers to Components](#upgrading-controllers-to-components) 3. [Upgrading Controllers to Components](#upgrading-controllers-to-components)
3. [把控制器升级为组件](#upgrading-controllers-to-components)
4. [Switching To The Angular 2 Router And Bootstrap](#switching-to-the-angular-2-router-and-bootstrap) 4. [Switching To The Angular 2 Router And Bootstrap](#switching-to-the-angular-2-router-and-bootstrap)
4. [切换到Angular 2的路由器并引导](#switching-to-the-angular-2-router-and-bootstrap)
5. [Saying Goodbye to Angular 1](#saying-goodbye-to-angular-1) 5. [Saying Goodbye to Angular 1](#saying-goodbye-to-angular-1)
5. [再见Angular 1](#saying-goodbye-to-angular-1)
.l-main-section .l-main-section
:marked :marked
# Preparation # Preparation
# 准备工作
There are many ways to structure Angular 1 applications. When we begin There are many ways to structure Angular 1 applications. When we begin
to upgrade these applications to Angular 2, some will turn out to be to upgrade these applications to Angular 2, some will turn out to be