Angular Schematics: ngMomentum
Angular Schematics are a fairly new development in the Angular ecosystem. With Angular Schematics you can transform your code using templates and code-altering functions that can integrate into any Angular project and transform your project as appropriate.
In this series we are first going to look at one of the newest Angular Schematics, then we will look at various features built into Schematics so you can create your own advanced Schematic to accelerate your own projects.
In future posts, we will look at the code behind our newest Angular Schematic and how to build your own Schematics. But now it is time to introduce…
ngMomentum
ngMomentum is a Schematic built with Angular that does one thing: helps speed up your projects while following all the best practices. ngMomentum automatically takes care of naming, code placement, and wiring so that you can focus on implementing features and not setup.
Where To Begin With ngMomentum
The assumption: you’re starting a new Angular project and you want to get off the ground quickly, but you don’t want to cut any corners when it comes to proper application architecture.
For this, we recommend starting out by creating a new Angular project using the command line interface.
Side Note: If you need help getting Angular started with the command line, please checkout the following link about Angular CLI.
With Angular CLI installed we just need to create a new project.
$ cd to/wherever/you/are/putting/your/project
$ ng new my-momentum-projectThis creates a new Angular project using Schematics built by the Angular team.
This is nice. We can start doing whatever is necessary for our application. However, we’ve found that this structure doesn’t scale well and there are some more features that most large-scale applications will need. Adding ngMomentum into your project will scaffold out your application with a structure better fit for large-scale applications.
$ ng add ng-momentumWhen you add ngMomentum into your project, we scaffold out the folder structure and add features we’ve found useful when creating large-scale applications. You can opt-out of these added features, such as PWA features and Angular Material.
The following examples show how to exclude these features.
# skips PWA features
$ ng add momentum --includePwa=false# uses bootstrap instead of Material
$ ng add momentum --uiFramework=bootstrap# uses basic HTML, no framework
$ ng add momentum --uiFramework=basic
Assuming you were okay with the basic options, the output will look like the following.
We provide some basic content to get you started (a home view and page-not-found view) and create a separated core vs shared modules. You’ll see we also integrated Material (or your UI Framework of choice) and PWA scripts (if selected), as well as prepared all your unit tests and basic folder structure for future additions.
Add PWA Features
We add in some things to make PWAs easier, but you will need some setup from the official @angular/pwa Schematic. To use it, simply add in the Schematic.
$ ng add @angular/pwaOkay, enough setup, time to spit out lots of good code quickly!
I’m hoping to take away this step by calling @angular/pwa directly. Currently there is a git issue around this feature/issue. The way that @angular/pwa is released stops me from making this step just as smooth as @angular/material. In an update soon I might drop this step and delete this subsection.
ngMomentum: CRUD
With the scaffolding complete and your project ready, the next thing you need to focus on is building your project. Often, we need to create CRUD operations (or variations on CRUD operations) against a service so that users can properly administer a resource. Why not skip all the effort and wiring of your project and have the code spit out for you? Well ngMomentum can take care of that for you.
In the following example, we are showing how you can point ngMomentum to a URL to have it handle everything else for you. If you don’t have a URL, we will show you how to enter the object notation next.
Just try the following command:
$ ng g ng-momentum:crud
--name=heros \
--url=http://localhost:3000/superheros.jsonSOOOOOO much code is being spit out. Material-based views (or bootstrap, or vanilla HTML), services, routers, input validations, and guards along with every unit test you could ever hope for. It’s all there, ready for you to use/alter/deploy. And the views? Not bad looking if I say so myself.
With one call, you took care of a few days worth of work, typing, frustration, and testing. Don’t have a service to hit? Try a slight adjustment on the same command.
$ ng g ng-momentum:crud \
--name=heros \
--obj="{\"id\":\"number\",\"name\":\"string\"}"Rather than hitting a service you can just specify the proper object to model and have all of your code just the way you want. There are quite a few other surprises and options if you go looking into the documentation (I recommend you do that).
ngMomentum: View
This is going to be semi-controversial, but it is a delineation that has been successful for large projects. Developers often get confused when they start making components in Angular, leaving the components/ folder to become a dumping ground of visual elements. There have been patterns, like atomic design, that tries to differentiate components — only to leave developers trying to decide if a component is an atom, a molecule or an organism. And as time goes on, some components slowly get more complicated and change their scope leading to more confusion in the codebase.
I simplify it. You either have Views or you have Components. Views are specifically a visual component that have a route to them. Components can be any visual component (that aren’t Views). That’s it. One has a route to it, one does not. This makes it a lot easier to describe \and when you go to either the component/ folder or the views/ folder you know what to expect.
Note: Your views/ folder should be the structure of your application, with nested views and paths being your nested folder structure.
With that information set up, ngMomentum handles the creation of Views for you. You’ve already seen this process through the ng-momentum:crud operation.
If you want to create new components, the Angular Schematic already does that for you. If you want to create a View, with Routing, Guards, Unit Tests, basically everything, then you use ngMomentum. Here is an example:
$ ng g ng-momentum:view \
--name=edit-hero --template=form \
--eager=false --skipVo=true --skipService=true \
--vo=hero --voPath=/src/app/vos/hero \
--service=heros --servicePath=/src/app/services/herosThis would create a new “form” view that is lazy loaded with the name “heros” utilizing the Hero VO and HerosService that you created previously.
You can select from multiple templates, the uiFramework, vo properties and other features. Again, the documentation is the best place to see all the options.
ngMomentum: Service
Services are very simple, this is a way for you to interact with data outside of your application. By default we create an easy way for you to create CRUD operations along with all the unit testing.
ng g ng-momentum:service --name=shoe --operations=crudlThis will create a new service named ShoesService that includes the create, update, list, read, and delete operations along with unit tests within the services/ folder. Like the other sections there are many options and I recommend checking out the documentation for the details.
ngMomentum: Model
This is also a section that you may or may not actually use but can be helpful in the right situation. If you need data in a central location and have multiple components interacting with that data, then a Model is what you’ll want to use. After Injecting a Model into multiple components, it is easy for many areas of your application to always be connected to the point of truth. In ngMomentum, Models come in a variety of formats. ngMomentum builds either a basic Model (with no internal functionality), a list Model (loads a collection of data), or a selected object Model (can create, update, delete, and load a specific data object) for you. Models 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. Here is one example of how to use it.
ng g ng-momentum:model --name=cars --template=listThis will create the CarsModel that can load a list of Car VOs. Along with the Model this will create the service and VO necessary for this to work and all the unit test you’d want. Again, please checkout the documentation.
Use ngMomentum!
We hope you do use ngMomentum and give us some feedback. Right now we are excited to share it as ngMomentum is based on the experience of many years of both Enterprise and Boutique Application Development. We feel if you decide to use it that it will serve you well. As mentioned earlier, please check out the official github location and let us know what you think.
Coming Up With Angular Schematics
If you follow me, you’ll see in the next few stories that we will go further into Schematics than few others have. Learn from the pains I’ve endured and start making something amazing. And if you use ngMomentum in your own projects, let me know. I’d love to get feedback and extend it to be even more useful.
