docs: small, quick fixes for RC5 including link repair. (#2062)

This commit is contained in:
Ward Bell 2016-08-09 15:56:47 -07:00 committed by Kathy Walrath
parent 7bc0877d31
commit 38a59f91bd
4 changed files with 41 additions and 35 deletions

View File

@ -214,7 +214,7 @@ code-example(format="").
### Add an NgModule ### Add an NgModule
Angular apps are composed of [Angular Modules](guide/ngmodules.html) that Angular apps are composed of [Angular Modules](guide/ngmodule.html) that
snuggly contain all our components and everything else we need for our app. snuggly contain all our components and everything else we need for our app.
Create the `app/app.module.ts` file with the following content: Create the `app/app.module.ts` file with the following content:

View File

@ -8,7 +8,7 @@ include ../_util-fns
:marked :marked
Read more in the ["RC5 and NgModules" announcement](https://angularjs.blogspot.com). Read more in the ["RC5 and NgModules" announcement](https://angularjs.blogspot.com).
Learn the details of NgModule in the [Angular Module](../guide/ngmodule) chapter. Learn the details of NgModule in the [Angular Module](../guide/ngmodule.html) chapter.
:marked :marked
The new `@NgModule` decorator gives you module-level components, directives, and pipes without 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 need to specify them repeatedly in every component of your application.
@ -44,25 +44,31 @@ include ../_util-fns
Check out the upgrade in [one commit](https://github.com/StephenFluin/ngmodule-migration/commit/9f9c6ae099346e491fc31d77bf65ed440e1f164c). Check out the upgrade in [one commit](https://github.com/StephenFluin/ngmodule-migration/commit/9f9c6ae099346e491fc31d77bf65ed440e1f164c).
## 1. Update to RC5 ## 1. Update to RC5
If you use npm, you should be able to either update your package.json file and run 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: Or alternatively you can run the following command:
```bash code-example(format='.' language='bash').
npm install @angular/{core,common,compiler,angular-cli,platform-browser,platform-browser-dynamic}@2.0.0-rc.5 --save npm install @angular/{core, common, compiler, platform-browser, platform-browser-dynamic} --save
```
You should also update any libraries you are using :marked
Update your optional libraries
```bash code-example(format='.' language='bash').
npm install @angular/router@3.0.0-rc.1 npm install @angular/router
npm install @angular/forms@1.0.0-rc.1 npm install @angular/forms
npm install @angular2-material/{button,card,toolbar,etc}@experimental npm install @angular2-material/{button,card,toolbar,etc}@experimental
```
## 2. Create an NgModule :marked
Update the Angular CLI if you're using that tool
code-example(format='.' language='bash').
npm install @angular/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: Create a new file called app.module.ts. Populate it with your root component as follows:
```javascript code-example(format='.' language='javascript').
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
@ -73,24 +79,23 @@ include ../_util-fns
bootstrap: [AppComponent], bootstrap: [AppComponent],
}) })
export class AppModule {} export class AppModule {}
```
:marked
## 3. Update your bootstrap ## 3. Update your bootstrap
Update your `main.ts` file to bootstrap using the Just in Time compiler. Update your `main.ts` file to bootstrap using the "Just in Time" (JIT) compiler.
```javascript code-example(format='.' language='javascript').
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule); platformBrowserDynamic().bootstrapModule(AppModule);
```
## 4. Update your 3rd party libraries :marked
Remove any 3rd party libraries from you AppComponents providers. ## 4. Import library modules in your _NgModule_
Youll want to move these to your NgModules imports, while updating to use each librarys provided Module(s). Remove the Angular and 3rd party library providers from your `AppComponent` providers
and switch to `NgModule` imports as seen in this example.
```javascript code-example(format='.' language='javascript').
imports: [ imports: [
BrowserModule, BrowserModule,
// Router // Router
@ -104,16 +109,18 @@ include ../_util-fns
MdCardModule, MdCardModule,
MdInputModule, MdInputModule,
], ],
```
:marked
## 5. Cleanup ## 5. Cleanup
As of RC5, we allow you to leave `directives` and `pipes` in your `@Component` decorators. For RC5, you can leave your components, directives and pipes
In fact, we automatically hoist (add) them to the NgModule that they belong to. 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 .alert.is-important
:marked :marked
This behavior is provided temporarily for backward compatibility. It will soon be removed. This option is temporary for backward compatibility.
It will be removed in the final release of Angular 2.0.
Stay ahead of this deprecation by removing them from your components and placing them into your `NgModule` declarations Get ahead of the game and start moving your component `directives` and `pipes`
as soon as possible. into module `declarations` as soon as possible.
:marked We intend to delete _all_ deprecated class, methods, and properties in the next RC.

View File

@ -50,11 +50,10 @@ figure
figure figure
img(src="/resources/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" ) img(src="/resources/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
:marked :marked
Angular apps are modular and Angular has its own modularity system called _Angular Modules_ Angular apps are modular and Angular has its own modularity system called _Angular Modules_ or _NgModules_.
or, occasionally, _NgModules_.
_Angular Modules_ are a big deal. _Angular Modules_ are a big deal.
We can only introduce them there; the [Angular Modules](ngmodule.html) chapter covers them in depth. We can only introduce them here; the [Angular Modules](ngmodule.html) chapter covers modules in depth.
<br clear="all"><br> <br clear="all"><br>
:marked :marked

View File

@ -113,7 +113,7 @@ block package-and-config-files
li. li.
#[b package.json] lists packages the QuickStart app depends on and #[b package.json] lists packages the QuickStart app depends on and
defines some useful scripts. defines some useful scripts.
See #[a(href="guide/npm-packages") Npm Package Configuration] for details. See #[a(href="guide/npm-packages.html") Npm Package Configuration] for details.
li. li.
#[b tsconfig.json] is the TypeScript compiler configuration file. #[b tsconfig.json] is the TypeScript compiler configuration file.
See #[a(href="#{_tsconfigUri}") TypeScript Configuration] for details. See #[a(href="#{_tsconfigUri}") TypeScript Configuration] for details.
@ -178,7 +178,7 @@ block install-packages
package manager to install the libraries and packages their apps require. package manager to install the libraries and packages their apps require.
The Angular team recommends the starter-set of packages specified in the The Angular team recommends the starter-set of packages specified in the
`dependencies` and `devDependencies` sections. `dependencies` and `devDependencies` sections.
See the [npm packages](guide/npm-packages) chapter for details. See the [npm packages](guide/npm-packages.html) chapter for details.
#### Helpful scripts #### Helpful scripts
We've included a number of npm scripts in our suggested `package.json` to handle common development tasks: We've included a number of npm scripts in our suggested `package.json` to handle common development tasks:
@ -309,7 +309,7 @@ h2#ngmodule Step 3: Our own #[code #[+adjExPath('app.module.ts')]]
block create-ngmodule block create-ngmodule
:marked :marked
We compose Angular apps into closely related blocks of functionality with [Angular Modules](guide/ngmodules.html). We compose Angular apps into closely related blocks of functionality with [Angular Modules](guide/ngmodule.html).
Every app requires at least one module, the _root module_, that we call `AppModule` by convention. Every app requires at least one module, the _root module_, that we call `AppModule` by convention.
p. p.
Create the file #[code #[+adjExPath('app/app.module.ts')]] with the following content: Create the file #[code #[+adjExPath('app/app.module.ts')]] with the following content: