About a year ago I started a personal project called droplet that is basically a shared photo library social network (for people who have friends). It was my test to learn AngularJS. I fucking hated it. The documentation was absolutely awful, wrong at least half of the time. Or the docs reflect some crazy version that never even made it to main repo. It was a complete fucking mess, and that is what I expected.

The fact that it was a fuckshow actually made it MORE fun to learn. So I built this silly little app in 2 days, and decided I had enough knowledge to switch our entire company, Crunchbutton, away from my scratch built JS framework to Angular. I was wrong. But not in a bad way.

Over the course of the next couple days, i converted what was basically jQuery and a backbone (for templates ONLY) MVC framework and turned it into Angular...for the most part. I got seriously tired of all the broken shit, or people claiming this piece of code works, or whatever, and it just -- not -- working. So I had my developer partner, Daniel, do all the hard stuff! And hard stuff he did. He converted all of my half finished code into pretty angular directives and fixed all the junk I broke. He was my savior.

A couple weeks go by, and we are ready for live. It was awesome, but in reality at the time it was nothing more than a framework change, and a messy one at that. It took us both a while to finish cleaning things up and angularify everything. Soon after, we pushed our app to the iOS store. Yay! But thats not what this post is about.

The app has been in the store for just over a month, and since then I have COMPLETELY redone the UI and design. I spent countless drunk hours designing all the new stuff without touching any code, trying to make sure every pixel was perfect. Well...its fucking perfect.

So let me get to the point:

Without changing more than a dozen lines of code (adding directives), I have built an entire new ui ON TOP of our existing theme, that functions different due to how easy it is to bind functionality to Angular within HTML and HTML that changes.

That about sums it up. So let me explain quickly how and why things are so easy.

We use Cana. Cana is my PHP framework. Hand crafted. Aged for 12 years. This is my sipping whiskey.

Cana has the ability to configure sites, or apps, with a config array to change the include paths in a cascading manner that allows us to create sub templates for ONLY files that have changed compare to the parent. Heres what I mean:

• active themes configuration is ["sexy","old"]
• old theme has 15 files, including home.phtml
• sexy theme only has layout.phtml and home.phtml
• when the request is made to the server, it cascades downwards automatically to include all of the templates needed
• this works for views, controllers, and models
• did i mention there phtml so we can pre process them? :p

Now, when a request is made to the server for a page, it bundles all view files required for angular in the initial request by parsing the layout templates tags.

So in the end, what we have is a system that allows me to edit ONLY the html files I need to create a whole new theme, with new functionality thanks to the power of AngularJS. This is something I did not expect when we first switched.

Being able to develop this theme on the same code line as our primary code is absolutely amazing. It saves us time with branching/merging, and lets us test our code out in the wild where we never would.

Thanks AngularJS. Thanks Cana.

Curious on how I build the views? Take a look at crunchbutton.com (or if you are feeling adventurous dev.crunchr.co) or shoot me an email from my ME page.