honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(rc4-to-rc5): change cleanup 

closes #2516
This commit is contained in:
Jesús Rodríguez 2016-09-30 23:49:42 +02:00 committed by Ward Bell
parent c8a6c229cd
commit 66e3eca8eb
6 changed files with 0 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/docs/dart/latest/cookbook/_data.json
View File

@ -53,12 +53,6 @@
"hide": true
},
"rc4-to-rc5": {
"title": "RC4 to RC5 Migration",
"intro": "Migrate your RC4 app to RC5 in minutes.",
"hide": true
},
"set-document-title": {
"title": "Set the Document Title",
"intro": "Setting the document or window title using the Title service."

1
public/docs/dart/latest/cookbook/rc4-to-rc5.jade
View File

@ -1 +0,0 @@
include ../../../_includes/_ts-temp

6
public/docs/js/latest/cookbook/_data.json
View File

@ -48,12 +48,6 @@
"hide": true
},
"rc4-to-rc5": {
"title": "RC4 to RC5 Migration",
"intro": "Migrate your RC4 app to RC5 in minutes.",
"hide": true
},
"set-document-title": {
"title": "Set the Document Title",
"intro": "Setting the document or window title using the Title service."

1
public/docs/js/latest/cookbook/rc4-to-rc5.jade
View File

@ -1 +0,0 @@
include ../../../_includes/_ts-temp

5
public/docs/ts/latest/cookbook/_data.json
View File

@ -51,11 +51,6 @@
"intro": "Translate the app's template text into multiple languages"
},
"rc4-to-rc5": {
"title": "RC4 to RC5 Migration",
"intro": "Migrate your RC4 app to RC5 in minutes."
},
"set-document-title": {
"title": "Set the Document Title",
"intro": "Setting the document or window title using the Title service."

127
public/docs/ts/latest/cookbook/rc4-to-rc5.jade
View File

@ -1,127 +0,0 @@
include ../_util-fns
:marked
# Angular Modules (NgModules) have landed in Angular RC5!
_Angular Modules_, also known as _NgModules_, are the powerful new way to organize and bootstrap your Angular application.
.l-sub-section
:marked
Read more in the ["RC5 and NgModules" announcement](https://angularjs.blogspot.com).
Learn the details of NgModule in the [Angular Module](../guide/ngmodule.html) chapter.
:marked
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.
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](../glossary.html#aot) or [Just
in Time](../glossary.html#jit) mode.
## How do I use them?
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
* 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. **Create an _NgModule_** - Create the root `NgModule` that you’ll use to bootstrap your application.
3. **Update your bootstrap** - Bootstrap that module instead of your root component
4. **Update your 3rd party libraries** - Take advantage of the latest from Forms, Material, Http, and more
5. **Cleanup** - Clean up your code.
The deprecated classes, methods and properties will be removed from Angular very soon.
Prefer to look at code and diffs?
Check out the upgrade in [one commit](https://github.com/StephenFluin/ngmodule-migration/commit/9f9c6ae099346e491fc31d77bf65ed440e1f164c).
## 1. Update to RC5
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:
code-example(format='.' language='bash').
npm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} --save
:marked
Update your optional libraries
code-example(format='.' language='bash').
npm install @angular/router
npm install @angular/forms
npm install @angular2-material/{core,button,card,...}@latest
:marked
Update the Angular CLI if you're using that tool
code-example(format='.' language='bash').
npm install angular-cli @angular/tsc-wrapped --save-dev
:marked
## 2. Create an _NgModule_
Create a new file called app.module.ts. Populate it with your root component as follows:
code-example(format='.' language='javascript').
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 {}
:marked
## 3. Update your bootstrap
Update your `main.ts` file to bootstrap using the "Just-in-time" (JiT) compiler.
code-example(format='.' language='javascript').
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
:marked
## 4. Import library modules in your _NgModule_
Remove the Angular and 3rd party library providers from your `AppComponent` providers
and switch to `NgModule` imports as seen in this example.
code-example(format='.' language='javascript').
imports: [
BrowserModule,
// Router
RouterModule.forRoot(config),
// Forms
FormsModule,
// Material Design
MdSlideToggleModule,
MdButtonModule,
MdToolbarModule,
MdCardModule,
MdInputModule,
],
:marked
## 5. Cleanup
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.
.alert.is-important
:marked
This option is temporary for backward compatibility.
It will be removed in the final release of Angular 2.0.
Get ahead of the game and start moving your component `directives` and `pipes`
into module `declarations` as soon as possible.
We intend to delete _all_ deprecated class, methods, and properties in the next RC.