Skip to content

Commit

Permalink
docs(Schematics): Add initial documentation for Schematics
Browse files Browse the repository at this point in the history
Closes #674
  • Loading branch information
brandonroberts authored and MikeRyanDev committed Jan 27, 2018
1 parent c219770 commit d170112
Show file tree
Hide file tree
Showing 13 changed files with 542 additions and 5 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Reactive libraries for Angular
- [@ngrx/store-devtools](./docs/store-devtools/README.md) - Store instrumentation that enables a
[powerful time-travelling debugger](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en).
- [@ngrx/entity](./docs/entity/README.md) - Entity State adapter for managing record collections.
- [@ngrx/schematics](./docs/schematics/README.md) - Scaffolding library for Angular applications using NgRx.

## Examples
- [example-app](./example-app/README.md) - Example application utilizing @ngrx libraries, showcasing common patterns and best practices.
Expand Down
72 changes: 72 additions & 0 deletions docs/schematics/README.md
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)
61 changes: 61 additions & 0 deletions docs/schematics/action.md
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
```
43 changes: 43 additions & 0 deletions docs/schematics/container.md
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
```
73 changes: 73 additions & 0 deletions docs/schematics/effect.md
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
```
65 changes: 65 additions & 0 deletions docs/schematics/entity.md
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
```
Loading

0 comments on commit d170112

Please sign in to comment.