Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

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

Merged
merged 1 commit into from
Aug 9, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/docs/js/latest/quickstart.jade
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ code-example(format="").

### 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.

Create the `app/app.module.ts` file with the following content:
Expand Down
63 changes: 35 additions & 28 deletions public/docs/ts/latest/cookbook/rc4-to-rc5.jade
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ include ../_util-fns
:marked
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
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.
Expand Down Expand Up @@ -44,25 +44,31 @@ include ../_util-fns
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.
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:

```bash
npm install @angular/{core,common,compiler,angular-cli,platform-browser,platform-browser-dynamic}@2.0.0-rc.5 --save
```
code-example(format='.' language='bash').
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
npm install @angular/router@3.0.0-rc.1
npm install @angular/forms@1.0.0-rc.1
code-example(format='.' language='bash').
npm install @angular/router
npm install @angular/forms
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:

```javascript
code-example(format='.' language='javascript').
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
Expand All @@ -73,24 +79,23 @@ include ../_util-fns
bootstrap: [AppComponent],
})
export class AppModule {}
```


:marked
## 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 { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
```

## 4. Update your 3rd party libraries
Remove any 3rd party libraries from you AppComponent’s providers.
You’ll want to move these to your NgModule’s imports, while updating to use each library’s provided Module(s).
: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.

```javascript
code-example(format='.' language='javascript').
imports: [
BrowserModule,
// Router
Expand All @@ -104,16 +109,18 @@ include ../_util-fns
MdCardModule,
MdInputModule,
],
```

:marked
## 5. Cleanup
As of RC5, we allow you to leave `directives` and `pipes` in your `@Component` decorators.
In fact, we automatically hoist (add) them to the NgModule that they belong to.
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 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
as soon as possible.
:marked
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.
5 changes: 2 additions & 3 deletions public/docs/ts/latest/guide/architecture.jade
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,10 @@ figure
figure
img(src="/resources/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
:marked
Angular apps are modular and Angular has its own modularity system called _Angular Modules_
or, occasionally, _NgModules_.
Angular apps are modular and Angular has its own modularity system called _Angular Modules_ or _NgModules_.

_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>
:marked
Expand Down
6 changes: 3 additions & 3 deletions public/docs/ts/latest/quickstart.jade
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ block package-and-config-files
li.
#[b package.json] lists packages the QuickStart app depends on and
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.
#[b tsconfig.json] is the TypeScript compiler configuration file.
See #[a(href="#{_tsconfigUri}") TypeScript Configuration] for details.
Expand Down Expand Up @@ -178,7 +178,7 @@ block install-packages
package manager to install the libraries and packages their apps require.
The Angular team recommends the starter-set of packages specified in the
`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
We've included a number of npm scripts in our suggested `package.json` to handle common development tasks:
Expand Down Expand Up @@ -309,7 +309,7 @@ h2#ngmodule Step 3: Our own #[code #[+adjExPath('app.module.ts')]]

block create-ngmodule
: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.
p.
Create the file #[code #[+adjExPath('app/app.module.ts')]] with the following content:
Expand Down