From 38a59f91bd220ed8d2f58623df5adee55afa0a94 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Tue, 9 Aug 2016 15:56:47 -0700 Subject: [PATCH] docs: small, quick fixes for RC5 including link repair. (#2062) --- public/docs/js/latest/quickstart.jade | 2 +- .../docs/ts/latest/cookbook/rc4-to-rc5.jade | 63 ++++++++++--------- public/docs/ts/latest/guide/architecture.jade | 5 +- public/docs/ts/latest/quickstart.jade | 6 +- 4 files changed, 41 insertions(+), 35 deletions(-) diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 045eb758ab..3dc5beb299 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -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: diff --git a/public/docs/ts/latest/cookbook/rc4-to-rc5.jade b/public/docs/ts/latest/cookbook/rc4-to-rc5.jade index 3933263c07..320af8599c 100644 --- a/public/docs/ts/latest/cookbook/rc4-to-rc5.jade +++ b/public/docs/ts/latest/cookbook/rc4-to-rc5.jade @@ -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. @@ -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'; @@ -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 @@ -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. diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade index a13f303e0d..4586e11b65 100644 --- a/public/docs/ts/latest/guide/architecture.jade +++ b/public/docs/ts/latest/guide/architecture.jade @@ -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.

:marked diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index 90ccf172b1..5cdbb93200 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -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. @@ -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: @@ -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: