Leverage Angular without Starting from Scratch

There are days in a life that emerge as stand outs amongst the rest. Some of those days are expected; a wedding perhaps or the birth of a child. Others happen without fanfare. The day I found Angular was one of those days.

I was in the midst of working on the Arch LMS. It had become laborious. The UI I had envisioned was becoming a mess of ajax calls glued together with jQuery. It worked, but it was fragile. That wasn't really jQuery's fault. I used it for something it wasn't meant to do and tracking all those events was impossible.

Seeking something else, I found myself watching a presentation on Knockout. Not bad. It did lead me to Underscore.js, but for some reason it wasn't clicking for me. Perhaps if I'd given it more time. Still, I thought there had to be a better way. Then I found Angular.

Maybe it was because of my background in WebObjects, but the idea of creating directives (components in wo-speak) on the client side was exciting. And all those directives need to work, was a bit of json. Lovely. After 16 years, Web development could be fun again.

I wanted to scrap the whole application and start from scratch, but quickly realized I couldn't. That would take too long and there was too much to do. Instead, I had to find a way to begin incorporating Angular immediately, while keeping my existing codebase intact.

My existing application utilized a lot of document level events that I could trigger from any page with click handlers. I simply passed the required options through those. For example:

All I needed to do to begin using Angular was tap into the edit-plan event. Already using RequireJS, I wrote a function that allowed me to inject a module into the dom and bootstrap it. Here is the function: