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.

 

jsFiddle Example: Using a Flat Index to Manage Complex Trees

Folder Trees

My current project uses a complex tree to hold a lot of data and need to allow the user to re-arrange branches via drag and drop. Some suggested it would be difficult to locate the proper nodes and rearrange the tree. This example shows how you can use a flat index of tree nodes to manipulate the tree without needing to iterate the tree multiple times or recreate the index.

 

jsFiddle Example: Managing Nested Data in AngularJS

AngularJS Logo

So I've been having problems finding the time to construct a proper blog posting about what I'm working on and learning right now, but I'm also generating a lot of small jsFiddle examples of how to do certain things for other developers. I'm going to try to start linking those things here, so even if I can't explain the code, you can get in and take a look.

That said, here is my first example: how to handle the display of nested data in AngularJS. One of the things that jQuery heavy developers are used to doing is getting in there and manipulating the DOM directly and adding new content. AngularJS flips that on its head and says, essentially: "Do nothing to the DOM after load, only touch the data.". Click below to see an example of that.

 

Getting Started with IE9: Pinned Applications and Jumplists

Internet Explorer 9 is here, and if you're anything like me, you're happy to see the wide world of the web moving forward. If you're anything like me, you're also looking at IE9's new "Pinned" websites, and thinking "Man that looks spiffy". I set out to convert my website into a pinnable application on my Windows 7 task bar, and I'm going to walk you through getting your site setup for it as well.

 

Getting Started with Cufon

I've been curious for a while about techniques for font replacement on the web. We've probably all heard about the idea of embedding fonts, but looking around at the standards right now, it doesn't sound like any one browser has things right, so I decided to explore a third-party option. Read more to learn about the basics of Cufon, an easy to use font "embedding" system.

 

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 on LinkedIn.