ng-Momentum
Momentum is an Angular Schematic developed by the Bottle Rocket Web Team to build best-in-class web applications faster.
Getting Started
For the initial scaffolding (required before anything else cause it sets everything where it needs to be).
cd to/wherever/you/are/putting/your/projectng new my-momentum-projectcd my-momentum-project/ng add ng-momentum
If you want to include PWA features we recommend then running the next line.
ng add @angular/pwa
Extra details below about each option.
Helpful Commands
To run the fun try these commands in your project.
Scaffold
For the initial scaffolding (required before anything else cause it sets everything where it needs to be).
ng g ng-momentum:scaffold --spec=false --force
Detailed description of options.
Option | Type | Description | Enums | Default |
---|---|---|---|---|
--spec | boolean | Do you want to have the tests generated for you? | true, false | true |
--skipScripts | boolean | Do you want to have the additional (helpful) package scripts added for you? | true, false | true |
--includePwa | boolean | Include PWA features? | true, false | true |
--uiFramework | string | Which ui framework are you intending to use? This sets the default for future view templates. | material, bootstrap, basic | material |
VO
For building a value object. You may want to do this, or let the other generators create objects as they see necessary and then your can just reference your value objects. Whatever, it's your application.
ng g ng-momentum:vo --name=shoes --obj="{\"laces\":\"boolean\", \"color\":\"string\", \"size\":\"number\"}"
Detailed description of options.
Option | Type | Description | Enums | Default |
---|---|---|---|---|
--project | string | The name of the project. | default project | |
--path | string | The path to create the vo within the vos/ folder. | (none) | |
--name | string | Specifies the name of the value object. | (first argument) | |
--obj | string | Object string for the value object. (in JSON.stringify format). | {"id":"number", "title":"string"} | |
--flat | boolean | Flag to indicate if a dir is created. | true, false | false |
--spec | boolean | Specifies if a spec file is generated. | true, false | true |
View
This builds a view for you with the ui framework you previously set. You have a lot of options and this should he you get right to the important coding faster.
ng g ng-momentum:view --name=my_view --template=blank
Detailed description of options.
Option | Type | Description | Enums | Default |
---|---|---|---|---|
--project | string | The name of the project. | default project | |
--path | string | The path to create the view within the views/ folder. | (none) | |
--name | string | Specifies the name of the value object. | (first argument) | |
--obj | string | Object string for the value object. (in JSON.stringify format). | {"id":"number", "title":"string"} | |
--flat | boolean | Flag to indicate if a dir is created. | true, false | false |
--spec | boolean | Specifies if a spec file is generated. | true, false | true |
--eager | boolean | Flag to determine if the view should be eager loaded vs lazy loaded. | true, false | false |
--uiFramework | string | Which ui framework are you intending to use? This sets the default for future view templates. | material, bootstrap, basic | material |
--vo | string | Specifies the vo to be created with this object. Overrides the default naming. | (none) | |
--voPath | string | Specifies the vo path. | (none) | |
--skipVo | boolean | Specifies if we should skip generating vo files. | true, false | false |
--service | string | Specifies the service to be created with this object. Overrides the default naming. | (none) | |
--servicePath | string | Specifies the service path. | (none) | |
--skipService | boolean | Specifies if we should skip generating service files. | true, false | false |
--template | string | Specifies template to create. | blank, form, table, list, details | blank |
Service
This builds a service for you to help you make calls to outside locations.
ng g ng-momentum:svc --name=your-service
Detailed description of options.
Option | Type | Description | Enums | Default |
---|---|---|---|---|
--project | string | The name of the project. | default project | |
--path | string | The path to create the service within the service/ folder. | (none) | |
--name | string | Specifies the name of the value object. | (first argument) | |
--obj | string | Object string for the value object. (in JSON.stringify format). | {"id":"number", "title":"string"} | |
--flat | boolean | Flag to indicate if a dir is created. | true, false | false |
--spec | boolean | Specifies if a spec file is generated. | true, false | true |
--vo | string | Specifies the vo to be created with this object. Overrides the default naming. | (none) | |
--voPath | string | Specifies the vo path. | (none) | |
--uri | string | Specifies the service uri to hit. | (none) | |
--endpoint | string | Specifies the service endpoint to hit. | (none) | |
--operations | string | Specifies the service strategy (clrud). | clrud |
Model
This builds either a basic model, a list model, or a 'selected object' model for you. Selected object models can load the model, create/update/save, and delete. Models are helpful if you have multiple components that are disconnected but need to share data/state. This can also be used to cache your data and have more control. You may not find them helpful at all though. So it is up to you.
ng g ng-momentum:model --name=heros --template=list
Detailed description of options.
Option | Type | Description | Enums | Default |
---|---|---|---|---|
--project | string | The name of the project. | default project | |
--path | string | The path to create the model within the models/ folder. | (none) | |
--name | string | Specifies the name of the value object. | (first argument) | |
--obj | string | Object string for the value object. (in JSON.stringify format). | {"id":"number", "title":"string"} | |
--flat | boolean | Flag to indicate if a dir is created. | true, false | false |
--spec | boolean | Specifies if a spec file is generated. | true, false | true |
--vo | string | Specifies the vo to be created with this object. Overrides the default naming. | (none) | |
--voPath | string | Specifies the vo path. | (none) | |
--skipVo | boolean | Specifies if we should skip generating vo files. | true, false | false |
--service | string | Specifies the service to be created with this object. Overrides the default naming. | (none) | |
--servicePath | string | Specifies the service path. | (none) | |
--skipService | boolean | Specifies if we should skip generating service files. | true, false | false |
--template | string | Model type for template specification. | blank, list, selected | blank |
CRUD
This is the big one. You can just point this to an endpoint or state the object structure and it creates a full CRUD operation against your endpoint create for consumption. It's really cool.
ng g ng-momentum:crud --name=heros --url=http://localhost:3000/superheros.json
Detailed description of options.
Option | Type | Description | Enums | Default |
---|---|---|---|---|
--project | string | The name of the project. | default project | |
--path | string | The path to create the view within the views/ folder. | (none) | |
--name | string | Specifies the name of the value object. | (first argument) | |
--obj | string | Object string for the value object. (in JSON.stringify format). | {"id":"number", "title":"string"} | |
--flat | boolean | Flag to indicate if a dir is created. | true, false | false |
--spec | boolean | Specifies if a spec file is generated. | true, false | true |
--vo | string | Specifies the vo to be created with this object. Overrides the default naming. | (none) | |
--voPath | string | Specifies the vo path. | (none) | |
--skipVo | boolean | Specifies if we should skip generating vo files. | true, false | false |
--service | string | Specifies the service to be created with this object. Overrides the default naming. | (none) | |
--servicePath | string | Specifies the service path. | (none) | |
--skipService | boolean | Specifies if we should skip generating service files. | true, false | false |
--eager | boolean | Flag to determine if the view should be eager loaded vs lazy loaded. | true, false | false |
--uiFramework | string | Which ui framework are you intending to use? This sets the default for future view templates. | material, bootstrap, basic | material |
--url | string | Url to get object parameters. | (none) | |
--skipImport | boolean | Flag to skip the module import. | true, false | false |
--export | boolean | Specifies if declaring module exports the directive. | true, false | false |
--view | string | Specifies the view to be created with this object. Overrides the default naming. | (none) | |
--viewPath | string | Specifies the view path. | (none) | |
--skipView | boolean | Specifies if we should skip generating view files. | true, false | false |
Important Notes
Required updates
To fix the material issue https://github.com/angular/material2/pull/12028/commits/735c15b539671a4651aa75fc432b13b3499509a9
Yarn vs NPM
I've noticed that when using npm install
there seems to be conflicts around @angular/core
. These
conflicts do not exist when using yarn
. I would recommend using yarn
vs npm install
. By default
schematics calls npm install
initially. I just have been deleting the /node_modules
folder
and running yarn
for a successful first build.
Todo
List of TODO items that are outstanding.
view
- add e2e testscrud
- add e2e tests
Development
Testing
To test locally, install @angular-devkit/schematics
globally and use the schematics
command line tool. That tool acts the same as the generate
command of the Angular CLI, but also has a debug mode.
Check the documentation with
schematics --help
Unit Testing
npm run test
will run the unit tests, using Jasmine as a runner and test framework.
Publishing
To publish, simply do:
npm run buildnpm publish
That's it!