Angular 2 (RC4) Component Router Demo

I wanted to create a demo with the new (RC4) Component Router since we’ve been waiting for this one for so long :)  After sketching out a couple ideas and then doing some spiking, it became evident that my approach looked like ‘just another router demo’ which would lead to ‘just another blog post on the A2 Router.’

So, I decided to do a two-part demo and make it into a real application.  In order to make all the various concepts easier to follow, the application is broken into two parts.  Part I focuses on architecture, implementing a Flux-style architecture, using the A2 Router in a real application, and hand-coding a Redux-style model.  Data is currently hardcoded inside services.  In the second part of the demo, this data will be retrieved from external sources.

As I have alluded to in prior posts, the advantage of the Flux architecture pattern is predictable application flow.  In terms of interaction with the ‘outside world,’ Components are only allowed to dispatch actions and receive model updates.  This implies that the primary dependency of each Component is the global store.  Not only does this make testing easier, you will often find that Components share common code that can be abstracted away in a base class.  Such is the case in this demo.

A formal dispatcher is not used in this application.  The global store implements a prescribed interface that allows for action dispatch to the model and (Reactive) subscription to updates.  There are no formal reducers as state reduction is handled inside the model.  This allows you considerable flexibility to experiment with model internals.

The entire application is completely Reactive, so if you are still getting up to speed with RFP, I hope you find something useful in the demo.  Also, in order to contrast against a couple prior demos, all templates and CSS are broken into separate files.  Simply scan through the various demos in the main repository – – to view other demos in which templates and CSS are inline with the Component file.  This allows you to contrast the two approaches.

A final goal of this application was to pay homage to my favorite comedy team, ‘The Three Stooges.’  In this exciting new online episode, the boys are in the computer lab, working hard on a demo.  Of course, they get a bit of help from a fourth Stooge (yes, that would be me).

Here is a screen shot of the main ‘page’, where the default view has been mapped to ‘/script’.


For a good read on the internals of the new Router, you can’t beat Victor Savkin’s blog post.

In the mean time, you probably want to look at the code, right?  Well, here it is.



Comments are closed.