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