Angular 2/Typescript Quaternion Calculator


Just when you thought it was safe to come back to my blog, the infamous Quaternion Calculator is back for its third incarnation.  The calculator was originally implemented in Polymer as an experiment with web components and then ported to React for comparison.  Now, it’s back as an example application using Angular 2, Typescript, and the new Typescript Math Toolkit Quaternion class.

I use the term application a bit loosely, but I wanted to do something a bit more extensive than just another web-component type of demo.  So, I added a formal global model and a Flux-style architecture to the application.  If all you want is a calculator, then this is, of course, overkill and more complex than required.  It does, however, serve as a simple base to illustrate the application of architecture and techniques just as counters and todo apps are convenient for the same purposes.

A Redux-style store is used and the Flux pattern is applied without a formal dispatcher.  All of this is coded without third party libraries and at a very low level for purposes of illustration.  I encourage anyone to expand both the scope of the calculator and the scope of the application beyond straight calculation.  There is also an opportunity to plug in third-party libraries for Redux-style stores in Angular 2.

The (alpha) Typescript Math Toolkit Quaternion class is included with the source distribution as a standalone .ts file.  The remainder of the ported library is not part of the code.

And, speaking of the code, it’s available at a friendly, neighborhood github near you.

If only you understood the power of the math side.

Comments are closed.