Angular模块（NgModule）功能在Angular RC5中发布了！

Angular Modules (NgModules) have landed in Angular RC5!

Angular模块（也叫NgModule）是组织代码和引导应用的强力新途径。

Angular Modules, also known as NgModules, are the powerful new way to organize and bootstrap your Angular application.

新的@NgModule装饰器让我们可以指定模块级的组件、指令和管道，而不需要在应用中的每个组件中都指定它们。

The new @NgModule decorator gives you module-level components, directives, and pipes without the need to specify them repeatedly in every component of your application.

@NgModule元数据为Angular编译器提供了上下文环境，以便我们可以让同一套代码分别运行在预编译AoT模式或即时编译JiT模式。

The @NgModule metadata give the Angular compiler the context needed so that you can use the same code regardless of whether you are running Angular in Ahead-of-time or Just in Time mode.

如何使用？

How do I use them?

如果你曾经写过Angular应用，那么它应该仍然能在RC5中工作。 我们付出了很多努力来确保RC4中的应用也能正常工作在RC5中。

If you were previously writing an Angular application, your app should continue to work in RC5. We’ve worked hard to ensure that applications that worked with RC4 continue to work while you migrate. For this to work, we’re doing 2 things automatically for you:

• We create an implicit NgModule for you as part of the bootstrap() command
• 我们在bootstrap()命令中会为你创建一个隐式的NgModule
• We automatically hoist your components, pipes, and directives
• 我们会自动升级你的组件、管道和指令

虽然应用仍然能工作，但你最好还是升级下应用，以确保未来的升级和废弃的特性不会给你带来困扰。 要让这项工作更容易，你可以遵循如下五个步骤：

While your application will continue to work today, it’s important that you update your application to ensure future updates and deprecations don’t negatively affect you. To make it easier, you can think of the process as having 5 steps.

1. Update to RC5 - Your application should continue to work without modification, but it’s important that you are running the latest version of Angular.

2. 升级到RC5 - 你的应用不用修改也仍然能正常工作，但重点是你要运行在最新版本的Angular中。

3. Create an NgModule - Create the root NgModule that you’ll use to bootstrap your application.

4. 创建NgModule - 创建一个根NgModule，你要用它来引导应用程序。

5. Update your bootstrap - Bootstrap that module instead of your root component

6. 升级你的引导代码 - 改成引导根模块，而不再是根组件

7. Update your 3rd party libraries - Take advantage of the latest from Forms, Material, Http, and more

8. 升级你的第三方库 - 获得最新版表单、Material设计、Http等模块的优点

9. Cleanup - Clean up your code. The deprecated classes, methods and properties will be removed from Angular very soon.

10. 清理 - 清理你的代码。那些被标记为废弃的类、方法和属性将很快从Angular中移除

想看看代码级变更？ 那就来这个提交吧。

Prefer to look at code and diffs? Check out the upgrade in one commit.

1. 升级到RC5

1. Update to RC5

如果使用npm，那么你可以手动修改package.json文件并运行npm install命令，或者直接运行下列命令：

If you use npm, you should be able to either update your package.json file and run npm install. Or alternatively you can run the following command:

npm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} --save

更新你的可选库

Update your optional libraries

npm install @angular/router
npm install @angular/forms
npm install @angular2-material/{core,button,card,...}@latest

如果你在使用Angular CLI，也要更新它

Update the Angular CLI if you're using that tool

npm install angular-cli @angular/tsc-wrapped --save-dev

2. 创建NgModule

2. Create an NgModule

创建一个名叫app.module.ts的新文件，把以前的根组件换成这样：

Create a new file called app.module.ts. Populate it with your root component as follows:

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports:      [BrowserModule],
    bootstrap:    [AppComponent],
})
export class AppModule {}

3. 升级你的引导代码

3. Update your bootstrap

升级main.ts文件，改用即时（JiT）编译器来引导。

Update your main.ts file to bootstrap using the "Just-in-time" (JiT) compiler.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

4. 在NgModule中导入库模块

4. Import library modules in your NgModule

从你的AppComponent的providers中移除Angular和第三方库中的服务提供商，改为使用NgModule中的imports，就像这样：

Remove the Angular and 3rd party library providers from your AppComponent providers and switch to NgModule imports as seen in this example.

imports: [
    BrowserModule, 
    // Router
    RouterModule.forRoot(config), 
    // Forms
    FormsModule, 
    // Material Design
    MdSlideToggleModule, 
    MdButtonModule, 
    MdToolbarModule, 
    MdCardModule, 
    MdInputModule,
],

5. 清理

5. Cleanup

对于RC5来说，你仍然可以在@Component元数据的directives和pipes属性中指定组件、指令和管道。 实际上，我们会自动把它们加入到它们所属的NgModule中去。

For RC5, you can leave your components, directives and pipes in the directives and pipes properties of your @Component metadata. In fact, we automatically hoist (add) them to the NgModule to which they belong.