I have been building a "prototype" of PeopleMatter's Schedule app over the last couple of weeks. I say "prototype" because what I am really doing is reproducing the existing app, just using AngularJS instead of .Net and Knockout. This will allow us in design to try out different solutions to existing problems much faster than waiting for a scrum team to pick them up. Now that I say that out loud, maybe prototype is the right word.

Anyway, doing this has been a GREAT learning experience for AngularJS. In particular, the ability to create your own directives to fill in the functional gaps that Angular doesn't cover is fantastic.

For instance, I needed a way to give an element focus. Doing this the Angular way meant coming up with my own directive. Check it out:

The key for me was realizing that Angular uses jQuery under the hood to do a lot of different things. If you aren't including jQuery in your project, then Angular provides a trimmed down version. However, to get this particular directive working, you are going to need the full jQuery library included before Angular.

So how does this work? You basically either fire a jQuery listener to execute a function in $scope, or you test a $scope boolean which then fires some sort of jQuery event. Assuming you are familiar with jQuery, writing custom directives becomes a snap.