jsFiddle Example: Using Self-Executing Functions with AngularJS Constants

Properly using Values and Constants in AngularJS can be really powerful, but AngularJS does have one annoyance with Values and Constants: if you want to keep values bundled together (for readability), its hard to have them also reference each other. Self-executing code to the rescue: just build up the value and return it from the function automatically.


jsFiddle Example: Proper Timeout Handling with AngularJS

AngularJS has a really poor handling of timeouts, at least for complex HTTP calls. You can provide a timeout in milliseconds, but if the request does time out, you just get a cancelled request. Now this might be fine for simple situations, but when you have CORS Ajax calls, you end up not being able to tell a timeout from a CORS request failure (at least not easily). This can be handled by switching to setting the timeout with a Promise instead. This code shows how to use a promise for your timeout in AngularJS to get clear error messages.

The createData() function is purely to work with jsFiddle's echo API.


Site Redesign

This website in Chrome icons

I've managed to slowly work up a long over due re-skinning of this website with a more modern "flat" design that matches the Portfolio section of the site better. Its not major: the underlying system remains a BlogCFC installation and the site structure is very similar, but I've managed to remove some older front-end technology like Cufon, as well as begin the process of implementing updating the site CSS based on BEM principals. I'll post something on the BEM styling I'm implementing once I can get everything fully ported over.


jsFiddle Example: Controlling Masking Layers with AngularJS

More in my series showing how to do small things with AngularJS. This time its controlling masking layers "the Angular way" but using ng-class to apply the masking layer. The CSS code is largely just your bog standard masking layer code with a centered alert box, but I've added a CSS3 animation for the opacity to make it fade in and out.


jsFiddle Example: Recursive AngularJS Templates

This is a variation on a previous example, but I was recently asked how to generate HTML for tested items with AngularJS. This process is simple: create a fragment that represents the repeating element and then use ng-include and careful reference naming to create the recursion.

Make sure that the name of data reference is the same in the template, the recursion, and the initiating location (child in this example).


jsFiddle Example: Loading Mustache Partial Templates Via Ajax

Mustache is a great, simple, templating language, but the JS implementation (https://github.com/janl/mustache.js) doesn't make it clear that not only can you load partial templates dynamically, you can load them via Ajax (just not asynchronously). This is an example of using a function instead of an object as the partial argument to Mustache's .render() method.

This example has a bit of bit of logic to work around jsFiddle's limitations. For example, in order to let jsFiddle spoof an Ajax call, we need to supply the template data at the time the Ajax call is made, and therefor, the templates must reside in the HTML. In the real world the point of this would be to place each template in its own .html file, and the templateLoader() would be making get requests to load their content directly.


More Entries

Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me.

Post a job. Find one. authenticjobs.com

Interested in becoming a sponsor? Contact me.