Angular 2 Tour of Heroes and MetaFactory


Angular 2 Tour of Heroes and MetaFactory

As I was curious about the new Angular 2 with TypeScript I worked myself through the Tour of Heroes tutorial. The first thing I noticed is how modular Angular 2 actually is. Angular has a base application and a module ‘Hero’ that defines what we can do with our heroes. Now imagine that we would want to extend the functionality of our application by introducing a list of ‘Losers’ that can be interacted with in the same way as with our heroes.

Adding Losers to the Tour of Heroes

Since we have our MetaFactory tool to automate this type of work, I wanted to see how I could use this tool to our benefit in adding Losers to the Tour of Heroes. So let’s try to build the Tour of Heroes using MetaFactory.

Define the Hero model

The first step is to identify the model entities, of which in the standard application there is only one of: ‘Hero’.

Identifying patterns

We need to identify the patterns that exist inside this base application and write our own MetaFactory code instructions based on that. As mentioned earlier angular contains a base application extended with functional modules. We therefore split the patterns in two; one pattern for the base application and one for the Hero module.

The patterns for the base application should moreover generate the index.html, app.routing, navigation and link to our Hero module.

For this latter module, we require generation of the components that provide details, search and the necessary html and css files. Additionally, some data storage is needed for our heroes to function as a mocked backend.

Since every file needs to be generated we require code instructions for each of them. We therefore need one pattern file per output file.  This is what the output should look like for the base application:

  • app\app.component.ts
  • app\app.component.css
  • app\app.module.ts
  • app\app-routing.ts
  • app\dashboard.component.css
  • app\dashboard.component.html
  • app\dashboard.component.ts
  • app\main.ts
  • app\rxjs-extensions.ts
  • index.html

Abstracting from the Hero

From the above files; app.component.ts, app.module.ts, app.routing.ts, dashboard.component.ts and dashboard.component.html contain code that refer in some way to the Hero entity. Rather than referring to this entity hard coded we will write abstract code instructions (called a ‘pattern’) that withdraw entity information dynamically from our model. This added layer of abstraction allows MetaFactory to generate the same type of code for any entity that we define.

The creation of patterns starts by writing the code as I would normally do, but with the one big difference that I abstract away all Hero specific code afterwards.  For example, let’s say that I want to have a button link to my list of heroes on the dashboard. That simply means my pattern needs to draw the entity specific link and label from our model, which makes it very easy to generate many more buttons for additional entities. Extend that principle to any type of file, be it typescript or html. You can hence generate any type of file you want.

Here are the hero specific files that need to be generated:

  • app\hero.ts
  • app\hero-detail.component.css
  • app\hero-detail.component.html
  • app\hero-detail.component.ts
  • app\hero-search.component.html
  • app\hero-search.component.css
  • app\hero-search.component.ts
  • app\hero-search.service.ts
  • app\hero.service.ts
  • app\heroes.component.css
  • app\heroes.component.html
  • app\heroes.component.ts

Again for every file mentioned we need to write a pattern. All these files contain references to Hero so the key is to let all patterns refer to the model in the places of the code where some reference to the Hero entity is needed. We also need to specify in the pattern that we want to generate one file for each entity object in the model, which is just ‘Hero’ for now.

Generating the Tour of Hero Angular 2 code

The last step is to write a pattern for the in-memory web API where I fill the database with some default data per entity, in this case the mocked Hero data. After generating the code we get an exact copy of the ‘Tour of Heroes’, which is exactly what we wanted.

Adding Losers to the model

To build the Tour of heroes using MetaFactory simply ‘as is’ requires quite some extra work compared to coding by hand and doesn’t have direct benefits. However, as mentioned at the beginning of this blog we would love to extend our application with a list of ‘Losers’. This is where the extra effort pays off as all we have to do is simply add the entity ‘Loser’ to our model and all additional files will be generated for us.

After regenerating the code with MetaFactory the Tour of Heroes has now an extended dashboard that shows an additional list of losers to which you can distinctively edit, delete or add a new Loser. It works exactly the same as with our heroes.

And add Villians to the model as well

You could just as easily add ‘Villains’ to the application, or any type of character you want by just adding more entities to the model!

Leave a comment