docs: small, quick fixes for RC5 including link repair. (#2062)
This commit is contained in:
parent
7bc0877d31
commit
38a59f91bd
|
@ -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:
|
||||||
|
|
|
@ -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 AppComponent’s providers.
|
## 4. Import library modules in your _NgModule_
|
||||||
You’ll want to move these to your NgModule’s imports, while updating to use each library’s 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.
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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:
|
||||||
|
|
Loading…
Reference in New Issue