The Project (soon to be) Formerly Known as ng-grid

I’ve go a bunch of small updates to share (and one big one.) I’m starting with this one since it fits with the Angular kick I’ve been on.

I’ve recently gotten involved with the ng-grid project housed under the Angular UI banner. We’re using it at work, so it makes sense for me to pitch in to help keep the project humming along as best it can.

We had a meeting last week and hatched plans to rewrite the core of the project in order to juice performance and ease development going forward. Working in financial services, grids are a big deal for me and I’ve never been a huge fan of any of the ones out there. I’m hoping this project will end up being the quality grid I’ve always been looking for as a consumer.

On the name

While it’s called ng-grid at the moment, it’s going to get a name change for 3.0, in order to better fit with the rest of the Angular UI stable. I’m not 100% sure of this, since we haven’t followed up since the meeting, but it will likely be UI Grid.


So, yeah. If you’re an Angular type and are looking for a data grid, I’ve got your back.

And… @roblarsenwww

I’m finally going to start using @roblarsenwww. I’ve had the account for a couple of years and have long had the plan to use it for tech tweets. As I’ve basically given up editing my other interests on @robreact, I figured now as as good a time as any to try to separate out the accounts. If you’re interested in technical subjects you’re not all that well served by @robreact and I’m enjoying the content I’ve been sharing there, so I’m not interested in changing what that looks like any time soon.

So, if you currently follow me @robreact, that account probably won’t change much. I don’t really talk about technical subjects there very often, so very often will just turn into never. @roblarsenwww will be only be about technical subjects. It’s basically content I don’t share at present. IF you’re interested in that stuff, follow me there.

Now you know.

It will look something like this:

Help Wanted: Please Test the New @h5bp Ant Build Script Image Optimization Flow

I reworked the way images are optimized in the Ant Build Script. After all the work I’d done to get it to 1.0 I discovered that a lot of the features we added to the image optimization process, coupled with a few hacks I threw in there myself, had made the image optimization tasks wonky on the Mac and on Linux. To that end, I reworked them, making them much simpler logically. I think the new changes are pretty foolproof (me, being the fool) but I need as many people as possible to test it to make sure I’ve really solved the problem. With these image issues fixed, I would release 1.1.0 and then sit back and see how things go. I’m really looking at getting the project to a nice stable place where I can just let it chill out and do its thing without me worrying about having stupid open bugs staring me in the face.

Which is where I am now.

Anyway, the branch is new-image-optimization.

To test you need some PNGs and JPGs in the img folder in an HTML5 Boilerplate structured project. Importantly, you need to test your version of OptiPNG. If it’s less than 0.7.0 and you can’t upgrade for some reason* you need to uncomment line 189 in your project.properties. If it’s above, just run ant and holler if your images aren’t getting optimized.

This is the issue to track issues with the new flow.

If this works, I can close like 6 bugs and release the patch** version. Which is the bee’s knees.

* This is some Mac thing. I’ve never quite understood why people just can’t upgrade their tools, but apparently something about the Mac stops you from being able to update a stupid little utility.
** I’m wondering if this should be a minor version since there’s a lot of “private” code rewritten to change the image optimization flow. 1.1.0? Maybe.

Easy Autocomplete with the datalist Element, the list Attribute and AngularJS’s ng-repeat Directive

Continuing to write about some Angular features I’ve been working with recently, I thought it would be interesting to show off one of the little conveniences I was able to put together using just a couple of Angular’s core features. This example leverages basically two basic features of Angular and two HTML5 features to create an easy, live autocomplete widget.

The pieces we’re going to use are:

  • Angular models This demo shows how easy it is to use Angular’s models. While they can get more complicated, this example shows the base case of simply binding to a variable in scope, creating dynamic links that update the UI when the data is updated with minimal or no JavaScript interaction.
  • ng-repeat Obviously if you’ve worked with Angular for any length of time you’ll be familiar with this directive. Here, it’s used here to iterate over a collection and create a dynamic datalist element.
  • datalist and list The datalist element and the list attribute are the two new HTML features that bind up the autocomplete functionality. In short, the datalist element defines a list of autocomplete entries. The list attribute binds the datalist to an input using an id reference. This combination is available in Chrome, Opera and Firefox with buggy support in IE10+

Let’s see how it all goes together.

First up, since this is Angular, let’s look at the markup.

To get started you need to define an Angular controller. This one is named MainCtrl. Since this is just a simplified demo to illustrate the autocomplete widget, it doesn’t do much, but the code it’s pulled from is a form used to add information about individual comic books to a simple database. Many of those comics are from the same titles (Amazing Spider-Man, Action Comics, etc.) so it’s handy to have an autocmplete list in order to improve data entry efficiency.

The input itself has two pieces to note, the data-ng-model attribute and the list attribute.

Note: As always, I append data- to Angular attributes in order to follow the HTML spec’s directions on custom attributes. That’s just me. You might want to let it all hang out. Fair play.

The data-ng-model attribute defines the model for the input as the title property of variable named item bound to the controller’s scope. Interestingly, this variable doesn’t exist at run-time. Instead of erroring with a warning about item being undefined Angular handles the creation of it once the form is submitted. This is a great example of how casual Angular is with their models. There’s no ceremony here. Add the data-ng-model attribute and the binding is done for you. If the variable exists in scope, the input is bound to it. If it doesn’t exist, Angular creates it. That’s pretty sweet.

The list attribute references the datalist element that the input should look for in order to build value hints. The value of the attribute is the id of the datalist you want to use.

The button at the end of the form is the next interesting piece of markup. On that input we’re using data-ng-click in order to bind the addItem function to click events on the form. Angular will look for addItem in the global namespace and in the controller’s scope. As you’ll see in the JavaScript example, we’re safely binding the method to the controller’s scope. If you click this button after adding a new title the title will be immediately added to the autocomplete list.

Finally, there’s the datalist element which uses data-ng-repeat to build out the list of autocomplete options. This directive is bound to the titles property of the controller scope. Since Angular models are bidirectional, once you update $scope.titles this list will be updated with new values. Pretty sweet. As you can see, this datalist element has the id we referenced earlier in the list attribute of the input.

<body data-ng-controller="MainCtrl">
    <form>
      <div>
        <label>title</label>
        <input type="text" data-ng-model="item.title" list="comicstitle">
      </div>
      <div>
        <input type="Button" value="Add" data-ng-click="addItem(item)">
      </div>
    </form>
  </div>
  <datalist id="comicstitle">
    <option  data-ng-repeat="ttl in titles" value="{{ttl}}"> 
  </datalist>
  </body>

Now that you’ve seen the markup, let’s look at the JavaScript that binds it all together. It’s actually pretty simple. Most of the wiring is done in the markup so the JavaScript is pretty sparse. That said, there are some interesting things so let’s look at it in-depth.

For starters we’re defining the starter list of titles as a variable on the controller’s scope. It’s a simple array bound to $scope.titles.

Have I mentioned that data binding is one of my favorite things about Angular? There’s absolutely no ceremony with creating a model. It’s just a variable on the controller’s scope (or even the global scope if you’re super lazy.)

After the model, the only other thing on the controller is a function called addItem.

This function is the method referenced in the data-ng-click attribute in the markup. It does a couple of things. The first is that is pushes the new value to $scope.titles. This example uses lodash’s contains function to test whether or not the title already exists in the array before it’s added. That keeps the list unique.

The next bit is another neat illustration of Angular models. Since the item we created when we added a title, setting it the object to an empty object is a shortcut to clearing the values out of the form. In this case there’s just the one form element, but if there were fifty or five hundred form elements with their data-ng-model attributes bound to properties of item this single line would clear all the values out of every bound form element.

app.controller( 'MainCtrl' , function( $scope ) {
  $scope.titles = [ "Action Comics" , "Detective Comics" , "Superman" , "Fantastic Four" , "Amazing Spider-Man" ];
  $scope.addItem = function( item ) { 
    if ( !_.contains( $scope.titles , item.title ) ){
      $scope.titles.push( item.title );
    } 
    $scope.item = {};
  }
});

Check it out, in action, with this plunker.


And there you have it. Let me know if you have any questions, comments or corrections in the comments.

Sorting by Multiple Fields with Different Sort Orders Using the AngularJS orderby Filter

I’m working on a new, interactive, interface to the $100,000 Club dataset I keep on itsalljustcomics.com. The data deals with the world’s most valuable comic books (those worth more than $100,000) and it’s always just been a static list. Since I’ve started keeping track of that data, the number of entries has steadily grown to include hundreds of books. Because of that growth and in concert with the relaunch of that site, I’ve started to put together an AngularJS based interface to the data. One of the things I need to do is sort the displayed data by three different fields and with two different sorts. This is very easy to do in Angular, you just might not know it since the documentation for orderBy is crummy. The one example that’s there is more confusing than it needs to be and only shows one variation.

Here’s how you do it.

ng-repeat

For starters, this example uses the ng-repeat directive. ng-repeat makes it trivial to loop through a collection and apply an HTML template to every member of the collection. In this example items is a collection of JavaScript objects stored in an array on the controller’s scope.

app.controller('MainCtrl', function($scope) {
  $scope.items = [{
    "title":"Action Comics",
    "issue":"1",
    "publisher":"DC Comics",
    "cover_date":"1938-06-01",
    "pedigree":"Church",
    "grade_src":"Anecdote",
    "grade":"9.2",
    "general_commentary":"Best Existing",
    "uid":0}]
});


Every time through the loop the value of that particular item in the array is exposed to the template as it and any properties of that object are available using familiar dot notation. Those values are included in the template using a familiar bracket pattern and Angular recognizes them, interpolating the values into the page.


<tr data-ng-repeat="it in items">
  <td>{{it.title}}</td>
  <td>{{it.issue}}</td>
  <td>{{it.pedigree}}{{it.collection}}{{it.provenance}}</td>
  <td>{{it.grade_src}}</td>
  <td>{{it.grade}}</td>
  <td>{{it.general_commentary}}</td>
</tr>

You’ll notice I don’t just throw ng-repeat in there. While ng-repeat will work as an attribute, I prepend data- to the attribute name. While this doesn’t matter to Angular, it’s the way the HTML specification defines adding custom attributes, so I use that pattern for consistency across all my code.

This initial version would output something like the following:

out-of-order

orderBy

While the previous example works fine, the rows are simply presented in the order of the members of the array. That might be okay for you if you’re getting a presorted collection, but if you want to change the order, you have the power to adjust it using Angular’s orderBy filter.

In this example we want to sort by the title of the comic (ascending, from A to Z), then by the issue number (ascending, from 1-∞) and finally by the grade (descending, from 10.0 to 0.5.) While this is dead easy to do using Angular, it’s not clearly documented.

This is where the superheroics happen. Inside the ng-repeat you invoke the orderBy filter on your data. This is done with the pipe “|” character. This will be a familiar pattern for you if you’ve hacked around on the Unix command line. Everything on the left of the pipe is passed to the filter referenced on the right of the pipe. In this case we’re using orderBy but it could be any of the built-in filters or a custom filter of your own devising. Commonly, orderBy is shown accepting a single variable (technically an Angular expression) representing one of the available properties of the members of the collection. What’s not clear from the documentation or common examples is that is that it can also accept an array of properties with which to order the collection.1 So passing ['title','issue','-grade'] to orderBy tells Angular to sort first by the title, then by the issue and finally by the grade properties of the it object. Notice something interesting about the way grade is passed into orderBy? Yes, it’s that simple to reverse the sort in this syntax- simply negate the variable with “-” and the sort on that property will be reversed. Pretty sweet.


<tr data-ng-repeat="it in items | orderBy:['title','issue','-grade']"> 
  <td>{{it.title}}</td>
  <td>{{it.issue}}</td>
  <td>{{it.pedigree}}{{it.collection}}{{it.provenance}}</td>
  <td>{{it.grade_src}}</td>
  <td>{{it.grade}}</td>
  <td>{{it.general_commentary}}</td>
</tr>

Here’s a plunker with a working demo. This example is basically Exhibit A of what I like about Angular and what drives me crazy about it at the same time. I love the elegant, declarative syntax that really does feel like HTML rewritten for web apps. I’m giddy over how powerful some of the pieces are- like the directives and filters we’ve seen here. The out of the box stuff is great and custom filters and directives are just such a powerful option.

And then there’s the documentation. While the documentation is mostly correct, and they provide some form of documentation for pretty much everything in the library, none of the documentation is great. It often reads like it’s written by an Angular engineer who’s been tasked with writing documentation- technically correct, but often bare-bones and written from an insider’s or experts perspective. For an example of the latter see the usage of the word “predicate” in the documentation of orderBy. Quick show of hands- how many of you know what that means? Obviously some of you will, but many of the self-taught hackers that populate the web developer sphere won’t and the documentation suffers because it often errs on the side of the experts.2

1. It can also accept a more complicated Angular expression or a function reference.
2. They promise it’s going to get better, so I’ll keep my fingers crossed, but I’ve been tempted to start an unofficial AngularJS documentation project on Github to do an end-around the 808 issues and counting in their issue queue (many of which are documentation PRs).