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.

 

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.

 

I Made This: Color Extractor

Preview of Color Extractor Check this out if you're bored or love color porn: cx.jonhartmann.com. It runs fully in your client, extracting color palettes from the image using the Canvas. The palette is selected based on color density and an amazing color bucketing system that I'd love to claim as my own.

 

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.