Ever Onward

For as much theory and verbiage as yesterday’s post was, today’s will be primarily code-driven; something I hope you’re ready for. I’ll run through this all and hopefully I can illustrate succinctly as we go.


HTML Templating

HTML templating is useful because it frames out the structure of a page, in its components parts, and, possibly the most useful attribute, it can be cached by the browser. This is highly useful for a lot of traffic and saves on the overhead of transporting markup with your data in every update of data. It’s one of the topics Marky Roden talked about during his 5 Questions with Marky Roden video for SocialBizUG.org.

The initial page for the Houses of AnAppOfIceAndFire (index.html) is laid out like almost anyone would expect an index.html file that implements Bootstrap. I’ve snipped out everything but the <body> tag contents for space.

The “magic happens” part is where my application code structures in the HTML partials, which I route in, based on my config. We’ll get there in a minute, for now, have a look at the two partial HTML files I’m using, one for the collection list and one for the individual house. You may notice that I’m also nesting my House Record inside the House Collection partial, this is one of the nifty features I like about ui-router.

House Collection

House Record For obvious reasons, much more like a form.

AngularJS App

0 - Structure

My app will consist of a few parts. I’ve broken them apart here into sections, for ease of reading. I’ve also taken the approach for my app.js of chain-loading each section off the main module definition, decreasing the number of handles for the same object.

1 - Config

I’ll first need to configure any routing rules for my HTML partials and resolving URL route parameters as their respective variables; this will happen in the config; the definition is for an Angular “module”. Any 3rd party assets get plugged in here, as part of the dependency injection, such as ui-router.

2 - Services/Factories

Any services or factories (or providers) get defined here.

3 - Controllers

Controllers are a binding of functional behavior to sections of the HTML. I have two controllers, each with different scopes. Mine are for my navigation handling and the primary application regarding houses.

4 - Filters

Everyone tends to like directives in AngularJS (I do too), but one of my favorite aspects of AngularJS is the out-of-the-box Filters that we get for free. This is an entire subject on its own IMO, but for now, you can see my “startFrom” custom filter; part of my custom paging mechanism for the House Collection.

5 - Directives

Directives are the higher level “do something” definitions. Most of the AngularJS attributes or tags you write into HTML are directives. As with Filters, you can write your own Directives all you like, but some of the most useful ones come OoB (“out of the box”).

Bring It Home

That’s basically it. I find that once you isolate what elements of work you have, the pieces don’t have to be ugly or scary. In fact, the craziest part of my whole app was defining my clear/cancel and save functions in my House Record Controller, and that was fairly easy.

You can clone my Git repository and play around with it yourself, if you like. I recommend following the build instructions in the ReadMe included there. Until next time, 🍺.

Eric McCormick

Software Developer, Master of the Arcane Arts. OIF veteran, IBM Champion.

edm00se edm00se

Disqus Comments