From d6cc83c64c88d76766ef7b1a7336acad2ecff0bc Mon Sep 17 00:00:00 2001 From: Wes Grimes Date: Fri, 25 Jan 2019 08:41:51 -0500 Subject: [PATCH] docs: reorganize installation instructions into individual pages for each module (#1523) Closes #1146 --- .../ngrx.io/content/guide/effects/index.md | 10 +---- .../ngrx.io/content/guide/effects/install.md | 42 +++++++++++++++++++ .../ngrx.io/content/guide/entity/index.md | 10 +---- .../ngrx.io/content/guide/entity/install.md | 31 ++++++++++++++ .../content/guide/router-store/index.md | 12 ++---- .../content/guide/router-store/install.md | 38 +++++++++++++++++ .../ngrx.io/content/guide/schematics/index.md | 12 +----- .../content/guide/schematics/install.md | 17 ++++++++ .../content/guide/store-devtools/index.md | 10 +---- .../content/guide/store-devtools/install.md | 37 ++++++++++++++++ projects/ngrx.io/content/guide/store/index.md | 10 +---- .../ngrx.io/content/guide/store/install.md | 41 ++++++++++++++++++ projects/ngrx.io/content/navigation.json | 31 +++++++++++--- 13 files changed, 244 insertions(+), 57 deletions(-) create mode 100644 projects/ngrx.io/content/guide/effects/install.md create mode 100644 projects/ngrx.io/content/guide/entity/install.md create mode 100644 projects/ngrx.io/content/guide/router-store/install.md create mode 100644 projects/ngrx.io/content/guide/schematics/install.md create mode 100644 projects/ngrx.io/content/guide/store-devtools/install.md create mode 100644 projects/ngrx.io/content/guide/store/install.md diff --git a/projects/ngrx.io/content/guide/effects/index.md b/projects/ngrx.io/content/guide/effects/index.md index 0be5486054..efc4a69734 100644 --- a/projects/ngrx.io/content/guide/effects/index.md +++ b/projects/ngrx.io/content/guide/effects/index.md @@ -13,15 +13,9 @@ In a service-based Angular application, components are responsible for interacti - Effects filter those actions based on the type of action they are interested in. This is done by using an operator. - Effects perform tasks, which are synchronous or asynchronous and return a new action. -## Installation +## Installation -```sh -npm install @ngrx/effects --save -``` - -```sh -yarn add @ngrx/effects -``` +Detailed installation instructions can be found on the [Installation](guide/effects/install) page. ## Comparison with component-based side effects diff --git a/projects/ngrx.io/content/guide/effects/install.md b/projects/ngrx.io/content/guide/effects/install.md new file mode 100644 index 0000000000..8a2b76b88e --- /dev/null +++ b/projects/ngrx.io/content/guide/effects/install.md @@ -0,0 +1,42 @@ +# Installation + +## Installing with `npm` + +For more information on using `npm` check out the docs here. + +```sh +npm install @ngrx/effects --save +``` + +## Installing with `yarn` + +For more information on using `yarn` check out the docs here. + +```sh +yarn add @ngrx/effects +``` + +## Installing with `ng add` + +If your project is using the Angular CLI 6+ then you can install the Effects to your project with the following `ng add` command (details here): + +```sh +ng add @ngrx/effects +``` +### Optional `ng add` flags + +* path - path to the module that you wish to add the import for the `EffectsModule` to. +* flat - Indicate if a directoy is to be created to hold your effects file +* spec - Specifies if a spec file is generated. +* project - name of the project defined in your `angular.json` to help locating the module to add the `EffectsModule` to. +* module - name of file containing the module that you wish to add the import for the `EffectsModule` to. Can also include the relative path to the file. For example, `src/app/app.module.ts` +* group - Group effects file within `effects` folder + +This command will automate the following steps: + +1. Update `package.json` > `dependencies` with `@ngrx/effects`. +2. Run `npm install` to install those dependencies. +3. By default will create a `src/app/app.effects.ts` file with an empty `AppEffects` class that has the `actions$: Actions` observable injected into it. If group flag is set to true then this file will be created under an `effects` folder. +4. Create a `src/app/app.effects.spec.ts` spec file with a basic unit test. If group flag is set to true then this file will be created under an `effects` folder. +5. Update your `src/app/app.module.ts` > `imports` array with `EffectsModule.forRoot([AppEffects])`. If you provided flags then the command will attempt to locate and update module found by the flags. + diff --git a/projects/ngrx.io/content/guide/entity/index.md b/projects/ngrx.io/content/guide/entity/index.md index d4f1923c89..550a25750c 100644 --- a/projects/ngrx.io/content/guide/entity/index.md +++ b/projects/ngrx.io/content/guide/entity/index.md @@ -8,12 +8,6 @@ Entity provides an API to manipulate and query entity collections. - Provides performant CRUD operations for managing entity collections. - Extensible type-safe adapters for selecting entity information. -### Installation +## Installation -```sh -npm install @ngrx/entity --save -``` - -```sh -yarn add @ngrx/entity -``` +Detailed installation instructions can be found on the [Installation](guide/entity/install) page. diff --git a/projects/ngrx.io/content/guide/entity/install.md b/projects/ngrx.io/content/guide/entity/install.md new file mode 100644 index 0000000000..f98636a6bc --- /dev/null +++ b/projects/ngrx.io/content/guide/entity/install.md @@ -0,0 +1,31 @@ +# Installation + +## Installing with `npm` + +For more information on using `npm` check out the docs here. + +```sh +npm install @ngrx/entity --save +``` + +## Installing with `yarn` + +For more information on using `yarn` check out the docs here. + +```sh +yarn add @ngrx/entity +``` + +## Installing with `ng add` + +If your project is using the Angular CLI 6+ then you can install the Entity to your project with the following `ng add` command (details here): + +```sh +ng add @ngrx/entity +``` + +This command will automate the following steps: + +1. Update `package.json` > `dependencies` with `@ngrx/entity`. +2. Run `npm install` to install those dependencies. + diff --git a/projects/ngrx.io/content/guide/router-store/index.md b/projects/ngrx.io/content/guide/router-store/index.md index d14a578e63..23a06247be 100644 --- a/projects/ngrx.io/content/guide/router-store/index.md +++ b/projects/ngrx.io/content/guide/router-store/index.md @@ -2,15 +2,9 @@ Bindings to connect the Angular Router with [Store](guide/store). During each router navigation cycle, multiple [actions](guide/router-store/actions) are dispatched that allow you to listen for changes in the router's state. You can then select data from the state of the router to provide additional information to your application. -### Installation +## Installation -```sh -npm install @ngrx/router-store --save -``` - -```sh -yarn add @ngrx/router-store -``` +Detailed installation instructions can be found on the [Installation](guide/router-store/install) page. ## Setup @@ -33,4 +27,4 @@ import { AppComponent } from './app.component'; bootstrap: [AppComponent], }) export class AppModule {} - \ No newline at end of file + diff --git a/projects/ngrx.io/content/guide/router-store/install.md b/projects/ngrx.io/content/guide/router-store/install.md new file mode 100644 index 0000000000..2366a15d9c --- /dev/null +++ b/projects/ngrx.io/content/guide/router-store/install.md @@ -0,0 +1,38 @@ +# Installation + +## Installing with `npm` + +For more information on using `npm` check out the docs here. + +```sh +npm install @ngrx/router-store --save +``` + +## Installing with `yarn` + +For more information on using `yarn` check out the docs here. + +```sh +yarn add @ngrx/router-store +``` + +## Installing with `ng add` + +If your project is using the Angular CLI 6+ then you can install the Router Store to your project with the following `ng add` command (details here): + +```sh +ng add @ngrx/router-store +``` + +### Optional `ng add` flags + +* path - path to the module that you wish to add the import for the `StoreRouterConnectingModule` to. +* project - name of the project defined in your `angular.json` to help locating the module to add the `StoreRouterConnectingModule` to. +* module - name of file containing the module that you wish to add the import for the `StoreRouterConnectingModule` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`; + +This command will automate the following steps: + +1. Update `package.json` > `dependencies` with `@ngrx/router-store`. +2. Run `npm install` to install those dependencies. +3. By default, will update `src/app/app.module.ts` > `imports` array with `StoreRouterConnectingModule.forRoot()`. If you provided flags then the command will attempt to locate and update module found by the flags. + diff --git a/projects/ngrx.io/content/guide/schematics/index.md b/projects/ngrx.io/content/guide/schematics/index.md index b81582ee39..d8e8e55744 100644 --- a/projects/ngrx.io/content/guide/schematics/index.md +++ b/projects/ngrx.io/content/guide/schematics/index.md @@ -4,17 +4,9 @@ Scaffolding library for Angular applications using NgRx libraries. Schematics provides Angular CLI commands for generating files when building new NgRx feature areas and expanding existing ones. Built on top of [`Schematics`](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2), this tool integrates with the [`Angular CLI`](https://cli.angular.io/). -## Installation +## Installation -Install @ngrx/schematics from npm: - -```sh -npm install @ngrx/schematics --save-dev -``` - -```sh -yarn add @ngrx/schematics --dev -``` +Detailed installation instructions can be found on the [Installation](guide/schematics/install) page. ## Dependencies diff --git a/projects/ngrx.io/content/guide/schematics/install.md b/projects/ngrx.io/content/guide/schematics/install.md new file mode 100644 index 0000000000..5bd61f7ea6 --- /dev/null +++ b/projects/ngrx.io/content/guide/schematics/install.md @@ -0,0 +1,17 @@ +# Installation + +## Installing with `npm` + +For more information on using `npm` check out the docs here. + +```sh +npm install @ngrx/schematics --save-dev +``` + +## Installing with `yarn` + +For more information on using `yarn` check out the docs here. + +```sh +yarn add @ngrx/schematics --dev +``` diff --git a/projects/ngrx.io/content/guide/store-devtools/index.md b/projects/ngrx.io/content/guide/store-devtools/index.md index c7155ea631..1bd275db04 100644 --- a/projects/ngrx.io/content/guide/store-devtools/index.md +++ b/projects/ngrx.io/content/guide/store-devtools/index.md @@ -2,15 +2,9 @@ Store Devtools provides developer tools and instrumentation for [Store](guide/store). -## Installation +## Installation -```sh -npm install @ngrx/store-devtools --save -``` - -```sh -yarn add @ngrx/store-devtools -``` +Detailed installation instructions can be found on the [Installation](guide/store-devtools/install) page. ## Setup diff --git a/projects/ngrx.io/content/guide/store-devtools/install.md b/projects/ngrx.io/content/guide/store-devtools/install.md new file mode 100644 index 0000000000..3aaf5655a4 --- /dev/null +++ b/projects/ngrx.io/content/guide/store-devtools/install.md @@ -0,0 +1,37 @@ +# Installation + +## Installing with `npm` + +For more information on using `npm` check out the docs here. + +```sh +npm install @ngrx/store-devtools --save +``` + +## Installing with `yarn` +For more information on using `yarn` check out the docs here. + +```sh +yarn add @ngrx/store-devtools +``` + +## Installing with `ng add` + +If your project is using the Angular CLI 6+ then you can install the Store Devtools to your project with the following `ng add` command (details here): + +```sh +ng add @ngrx/store-devtools +``` + +### Optional `ng add` flags + +* path - path to the module that you wish to add the import for the `StoreDevtoolsModule` to. +* project - name of the project defined in your `angular.json` to help locating the module to add the `StoreDevtoolsModule` to. +* module - name of file containing the module that you wish to add the import for the `StoreDevtoolsModule` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`; +* maxAge - number (>1) | 0 - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. 0 is infinite. Default is 25 for performance reasons. + +This command will automate the following steps: + +1. Update `package.json` > `dependencies` with `@ngrx/store-devtools`. +2. Run `npm install` to install those dependencies. +3. Update your `src/app.module.ts` > `imports` array with `StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })`. The maxAge property will be set to the flag `maxAge` if provided. diff --git a/projects/ngrx.io/content/guide/store/index.md b/projects/ngrx.io/content/guide/store/index.md index 9de35d654b..3f67835df6 100644 --- a/projects/ngrx.io/content/guide/store/index.md +++ b/projects/ngrx.io/content/guide/store/index.md @@ -9,15 +9,9 @@ Store is RxJS powered state management for Angular applications, inspired by Red - [Selectors](guide/store/selectors) are pure functions used to select, derive and compose pieces of state. - State accessed with the `Store`, an observable of state and an observer of actions. -## Installation +## Installation -```sh -npm install @ngrx/store --save -``` - -```sh -yarn add @ngrx/store -``` +Detailed installation instructions can be found on the [Installation](guide/store/install) page. ## Tutorial diff --git a/projects/ngrx.io/content/guide/store/install.md b/projects/ngrx.io/content/guide/store/install.md new file mode 100644 index 0000000000..3db66bd37d --- /dev/null +++ b/projects/ngrx.io/content/guide/store/install.md @@ -0,0 +1,41 @@ +# Installation + +## Installing with `npm` + +For more information on using `npm` check out the docs here. + +```sh +npm install @ngrx/store --save +``` + +## Installing with `yarn` + +For more information on using `yarn` check out the docs here. + +```sh +yarn add @ngrx/store +``` + +## Installing with `ng add` + +If your project is using the Angular CLI 6+ then you can install the Store to your project with the following `ng add` command (details here): + +```sh +ng add @ngrx/store +``` + +### Optional `ng add` flags + +* path - path to the module that you wish to add the import for the `StoreModule` to. +* project - name of the project defined in your `angular.json` to help locating the module to add the `StoreModule` to. +* module - name of file containing the module that you wish to add the import for the `StoreModule` to. Can also include the relative path to the file. For example, `src/app/app.module.ts`; +* statePath - The file path to create the state in. By default, this is `reducers`. +* stateInterface - The type literal of the defined interface for the state. By default, this is `State`. + +This command will automate the following steps: + +1. Update `package.json` > `dependencies` with `@ngrx/store`. +2. Run `npm install` to install those dependencies. +3. Create a `src/app/reducers` folder, unless the `statePath` flag is provided, in which case this would be created based on the flag. +4. Create a `src/app/reducers/index.ts` file with an empty `State` interface, an empty `reducers` map, and an empty `metaReducers` array. This may be created under a different directory if the `statePath` flag is provided. +5. Update your `src/app/app.module.ts` > `imports` array with `StoreModule.forRoot(reducers, { metaReducers })`. If you provided flags then the command will attempt to locate and update module found by the flags. diff --git a/projects/ngrx.io/content/navigation.json b/projects/ngrx.io/content/navigation.json index 88fc95ee0d..89638ac53d 100644 --- a/projects/ngrx.io/content/navigation.json +++ b/projects/ngrx.io/content/navigation.json @@ -25,7 +25,6 @@ "title": "Sponsor" } ], - "TopBarNarrow": [ { "title": "About NgRx", @@ -57,7 +56,6 @@ ] } ], - "SideNav": [ { "url": "docs", @@ -71,6 +69,10 @@ "title": "Getting Started", "url": "guide/store" }, + { + "title": "Installation", + "url": "guide/store/install" + }, { "title": "Architecture", "children": [ @@ -123,6 +125,10 @@ "title": "Overview", "url": "guide/store-devtools" }, + { + "title": "Installation", + "url": "guide/store-devtools/install" + }, { "title": "Instrumentation", "url": "guide/store-devtools/config" @@ -136,6 +142,10 @@ "title": "Overview", "url": "guide/effects" }, + { + "title": "Installation", + "url": "guide/effects/install" + }, { "title": "Testing", "url": "guide/effects/testing" @@ -153,6 +163,10 @@ "title": "Overview", "url": "guide/router-store" }, + { + "title": "Installation", + "url": "guide/router-store/install" + }, { "title": "Actions", "url": "guide/router-store/actions" @@ -170,6 +184,10 @@ "title": "Overview", "url": "guide/entity" }, + { + "title": "Installation", + "url": "guide/entity/install" + }, { "title": "Entity Interfaces", "url": "guide/entity/interfaces" @@ -187,6 +205,10 @@ "title": "Overview", "url": "guide/schematics" }, + { + "title": "Installation", + "url": "guide/schematics/install" + }, { "title": "Schematics", "children": [ @@ -250,7 +272,6 @@ "tooltip": "API Reference" } ], - "Footer": [ { "title": "Resources", @@ -278,8 +299,7 @@ { "url": "https://stackoverflow.com/questions/tagged/ngrx", "title": "Stack Overflow", - "tooltip": - "Stack Overflow: where the community answers your technical NgRx questions." + "tooltip": "Stack Overflow: where the community answers your technical NgRx questions." }, { "url": "https://gitter.im/ngrx/platform", @@ -314,7 +334,6 @@ ] } ], - "docVersions": [ { "title": "v6",