-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(Schematics): Add initial documentation for Schematics
Closes #674
- Loading branch information
1 parent
c219770
commit d170112
Showing
13 changed files
with
542 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
# @ngrx/schematics | ||
|
||
Scaffolding library for Angular applications using NgRx libraries. | ||
|
||
@ngrx/schematics provides blueprints for generating files when building out feature areas using NgRx. Built on top of `Schematics`, it integrates with the `Angular CLI` to make setting up and expanding NgRx in Angular applications easier. | ||
|
||
### Installation | ||
Install @ngrx/schematics from npm: | ||
|
||
`npm install @ngrx/schematics --save-dev` | ||
|
||
##### OR | ||
|
||
`yarn add @ngrx/schematics --dev` | ||
|
||
### Nightly builds | ||
|
||
`npm install github:ngrx/schematics-builds --save-dev` | ||
|
||
##### OR | ||
|
||
`yarn add github:ngrx/entity-builds --dev` | ||
|
||
## Dependencies | ||
|
||
After installing `@ngrx/schematics`, install the NgRx dependencies. | ||
|
||
`npm install @ngrx/{store,effects,entity,store-devtools} --save` | ||
|
||
##### OR | ||
|
||
`yarn add @ngrx/{store,effects,entity,store-devtools}` | ||
|
||
|
||
## Default Schematics Collection | ||
|
||
To use `@ngrx/schematics` as the default collection in your Angular CLI project, | ||
add the following to the `defaults` section in your `.angular-cli.json`. | ||
|
||
```json | ||
"schematics": { | ||
"collection": "@ngrx/schematics" | ||
} | ||
``` | ||
|
||
The [collection schema](../../modules/schematics/collection.json) also has aliases to the most common blueprints used to generate files. | ||
|
||
## Inital State Setup | ||
|
||
Generate the initial state management and register it within the `app.module.ts` | ||
|
||
```sh | ||
ng generate store State --root --module app.module.ts --collection @ngrx/schematics | ||
``` | ||
|
||
## Inital Effects Setup | ||
|
||
Generate the root effects and register it within the `app.module.ts` | ||
|
||
```sh | ||
ng generate effect App --root --module app.module.ts --collection @ngrx/schematics | ||
``` | ||
|
||
## Blueprints | ||
|
||
- [Action](action.md) | ||
- [Container](container.md) | ||
- [Effect](effect.md) | ||
- [Entity](entity.md) | ||
- [Feature](feature.md) | ||
- [Reducer](reducer.md) | ||
- [Store](store.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
# Action | ||
-------- | ||
|
||
## Overview | ||
|
||
Generates an action file that contains an enum of action types, | ||
an example action class and an exported type union of action classes. | ||
|
||
## Command | ||
|
||
```sh | ||
ng generate action ActionName [options] | ||
``` | ||
|
||
##### OR | ||
|
||
```sh | ||
ng generate a ActionName [options] | ||
``` | ||
|
||
### Options | ||
|
||
Nest the actions file within a folder based on the action `name`. | ||
|
||
- `--flat` | ||
- Type: `boolean` | ||
- Default: `true` | ||
|
||
Group the action file within an `actions` folder. | ||
|
||
- `--group` | ||
- Alias: `-g` | ||
- Type: `boolean` | ||
- Default: `false` | ||
|
||
Generate a spec file alongside the action file. | ||
|
||
- `--spec` | ||
- Type: `boolean` | ||
- Default: `false` | ||
|
||
|
||
#### Examples | ||
|
||
Generate a `User` actions file with an associated spec file. | ||
|
||
```sh | ||
ng generate action User --spec | ||
``` | ||
|
||
Generate a `User` actions file within a nested folder | ||
|
||
```sh | ||
ng generate action User --flat false | ||
``` | ||
|
||
Generate a `User` actions file within a nested `actions` folder | ||
|
||
```sh | ||
ng generate action User --group | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
# Container | ||
-------- | ||
|
||
## Overview | ||
|
||
Generates a component with `Store` injected into its constructor. You can optionally provide the path to your reducers and your state interface. | ||
|
||
## Command | ||
|
||
```sh | ||
ng generate container ComponentName [options] | ||
``` | ||
|
||
##### OR | ||
|
||
```sh | ||
ng generate co ComponentName [options] | ||
``` | ||
|
||
### General Options | ||
|
||
`Angular CLI` [component options](https:/angular/angular-cli/wiki/generate-component#options). | ||
|
||
### Container Options | ||
|
||
Provide the path to your file with an exported state interface | ||
|
||
- `--reducers` | ||
- Type: `string` | ||
|
||
Provide the name of the interface exported for your state interface | ||
|
||
- `--stateInterface` | ||
- Type: `string` | ||
- Default: `State` | ||
|
||
#### Examples | ||
|
||
Generate a `UsersPage` container component with your reducers imported and the `Store` typed a custom interface named `MyState`. | ||
|
||
```sh | ||
ng generate container UsersPage --reducers reducers/index.ts --stateInterface MyState | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
# Effect | ||
-------- | ||
|
||
## Overview | ||
|
||
Generates an effect file for `@ngrx/effects`. | ||
|
||
## Command | ||
|
||
```sh | ||
ng generate effect EffectName [options] | ||
``` | ||
|
||
##### OR | ||
|
||
```sh | ||
ng generate ef EffectName [options] | ||
``` | ||
|
||
### Options | ||
|
||
Nest the effects file within a folder based by the effect `name`. | ||
|
||
- `--flat` | ||
- Type: `boolean` | ||
- Default: `true` | ||
|
||
Group the effect file within an `effects` folder. | ||
|
||
- `--group` | ||
- Alias: `-g` | ||
- Type: `boolean` | ||
- Default: `false` | ||
|
||
Provide the path to a file containing an `Angular Module` and the effect will be added to its `imports` array. If the `--root` option is not included, the effect will be registered using `EffectsModule.forFeature`. | ||
|
||
- `--module` | ||
- Alias: `-m` | ||
- Type: `string` | ||
|
||
When used with the `--module` option, it registers an effect within the `Angular Module` using `EffectsModule.forRoot`. | ||
|
||
- `--root` | ||
- Type: `boolean` | ||
- Default: `false` | ||
|
||
Generate a spec file alongside the action file. | ||
|
||
- `--spec` | ||
- Type: `boolean` | ||
- Default: `true` | ||
|
||
|
||
#### Examples | ||
|
||
Generate a `UserEffects` file and register it within the root Angular module in the root-level effects. | ||
|
||
```sh | ||
ng generate effect User --root -m app.module.ts | ||
``` | ||
|
||
Generate a `UserEffects` file within a `user` folder and register it with the `user.module.ts` file in the same folder. | ||
|
||
```sh | ||
ng generate module User --flat false | ||
ng generate effect user/User -m user.module.ts --group | ||
``` | ||
|
||
Generate a `UserEffects` file within a nested `effects` folder | ||
|
||
```sh | ||
ng generate effect User --group | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
# Entity | ||
-------- | ||
|
||
## Overview | ||
|
||
Generates an set of entity files for managing a collection using `@ngrx/entity` including a set of predefined `actions`, a collection `model` and a `reducer` with state selectors. | ||
|
||
## Command | ||
|
||
```sh | ||
ng generate entity EntityName [options] | ||
``` | ||
|
||
##### OR | ||
|
||
```sh | ||
ng generate en EntityName [options] | ||
``` | ||
|
||
### Options | ||
|
||
Nest the effects file within a folder based on the entity `name`. | ||
|
||
- `--flat` | ||
- Type: `boolean` | ||
- Default: `true` | ||
|
||
Provide the path to a file containing an `Angular Module` and the entity reducer will be added to its `imports` array using `StoreModule.forFeature`. | ||
|
||
- `--module` | ||
- Alias: `-m` | ||
- Type: `boolean` | ||
|
||
Provide the path to a `reducers` file containing a state interface and a object map of action reducers. The generated entity interface will be imported added to the first defined interface within the file. The entity reducer will be imported and added to the first defined object with an `ActionReducerMap` type. | ||
|
||
- `--reducers` | ||
- Alias: `-r` | ||
- Type: `string` | ||
|
||
Generate spec files associated with the entity files. | ||
|
||
- `--spec` | ||
- Type: `boolean` | ||
- Default: `true` | ||
|
||
|
||
#### Examples | ||
|
||
Generate a set of `User` entity files and add it to a defined map of reducers generated from a [feature state](./store.md#examples). | ||
|
||
```sh | ||
ng generate entity User --reducers reducers/index.ts | ||
``` | ||
|
||
Generate a set of `User` entity files within a nested folder | ||
|
||
```sh | ||
ng generate action User --flat false | ||
``` | ||
|
||
Generate a set of `User` entity files and register it within the `Angular Module` in `app.module.ts` as a feature state. | ||
|
||
```sh | ||
ng generate entity User -m app.module.ts | ||
``` |
Oops, something went wrong.