Recent Web Log Entries By Ben Nadel
Filter vs. ngHide With ngRepeat In AngularJS
Posted: June 18, 2013 at 9:21 AM by Ben Nadel
Out of the box, AngularJS feels magical. You add a few notations here, define a few objects there, and suddenly your page is actually doing something. And you didn't even need to write any jQuery to make it work. AngularJS is awesome; and it is magical; but sometimes, side-stepping the magic, so to speak, can give you more options. Take, for examp... read more »
Comments (0) | Post Comment | Ask Ben | Permalink
Working With Inherited Collections In AngularJS
Posted: June 14, 2013 at 8:44 AM by Ben Nadel
In an AngularJS application, $scope instances are all part of a prototypal chain. That is, every $scope instance (except $rootScope, I believe) has, as its prototype, the $parent scope. This is a brilliant way to architect the view-model because it means that data loaded in one controller can be accessed by controllers (and views) farther down in ... read more »
Comments (7) | Post Comment | Ask Ben | Permalink
Unbinding $watch() Listeners In AngularJS
Posted: June 5, 2013 at 9:09 AM by Ben Nadel
In AngularJS, you can watch for changes in your view-model by binding a listener to a particular statement (or function) using the $scope's $watch() method. You tell the $watch() method what to examine and AngularJS will invoke your listener whenever the item-under-scrutiny changes. In the vast majority of cases, the $watch() statement can be run ... read more »
Comments (2) | Post Comment | Ask Ben | Permalink
The 6th Annual Regular Expression Day (And Prizes) - June 1st, 2013
Posted: May 29, 2013 at 9:45 AM by Ben Nadel
Holy cow! I can't believe that it's been six years since we launched the first International Regular Expression Day in honor of one of the most powerful tools in programming history - pattern matching. From validating email addresses to parsing CSV files to transforming data, regular expressions make our lives better; they make our software stro... read more »
Comments (15) | Post Comment | Ask Ben | Permalink
My Approach To Building AngularJS Directives That Bind To JavaScript Events
Posted: May 28, 2013 at 9:11 AM by Ben Nadel
As I've blogged before, AngularJS has a bit of learning curve. For me, the two biggest hurdles have been request routing and Directives. At this time, I think I have a pretty good handle on request routing and rendering nested views ; but some aspects of Directives , on the other hand, are still a bit confusing. I see Directives as having two di... read more »
Comments (9) | Post Comment | Ask Ben | Permalink
HashKeyCopier - An AngularJS Utility Class For Merging Cached And Live Data
Posted: May 7, 2013 at 9:46 AM by Ben Nadel
A while back, I blogged about how AngularJS uses an expando property, $$hashKey, in order to associate a $scope-based object with a current node in the Document Object Model (DOM). The existence of this expando property is critical because it prevents AngularJS from accidentally and needlessly re-creating DOM elements (and re-linking Directives)... read more »
Comments (19) | Post Comment | Ask Ben | Permalink
Delegating Nested Directive Behavior To Parent Directive In AngularJS
Posted: May 1, 2013 at 6:54 PM by Ben Nadel
In an AngularJS JavaScript web application, the part of your code that pipes user behaviors into controller methods is known as the, "directive." Out of the box, AngularJS ships with many powerful directives like ngClick, ngRepeat, ngSubmit, etc.; but, AngularJS also allows you to define as many custom directives as you want. This is awesome; but,... read more »
Comments (7) | Post Comment | Ask Ben | Permalink
Forced Repaints In Directive Can Cause Accidental Scrolling In AngularJS
Posted: April 24, 2013 at 9:51 AM by Ben Nadel
The other day, I started getting an odd behavior in an AngularJS application that had a tabbed interface. Normally, with a tabbed interface, when the user switches from tab to tab, the scroll offset of the browser should remain the same. And, this is how our application was working. But then suddenly, we started seeing a "scroll-to-top" behavior w... read more »
Comments (0) | Post Comment | Ask Ben | Permalink
Looking At Prototypal Inheritance To Determine Data Types In JavaScript
Posted: April 12, 2013 at 9:42 AM by Ben Nadel
Yesterday, I was working on some JavaScript that needed to execute slightly different actions when a given value was either an Object or an Array. Typically for this, I would use something like Underscore.js or Lodash.js, which converts the value to a String and looks at the result; but, as I was writing the code, I wondered if we could use the gi... read more »
Comments (7) | Post Comment | Ask Ben | Permalink
Stateless Service Singletons vs. Stateful Service Entities
Posted: April 2, 2013 at 4:34 PM by Ben Nadel
The other day, I was watching one of the Test Driven Development (TDD) episodes in the Clean Coder video series by Robert C. Martin . In the episode, Robert Martin (aka Uncle Bob) was using the Red-Green-Refactor approach to refactoring some HTML formatter class. As he was walking through the demonstration, something completely tangential struck ... read more »
Comments (10) | Post Comment | Ask Ben | Permalink
Understanding CSS Transitions And Class Timing (Revisited)
Posted: March 20, 2013 at 9:37 AM by Ben Nadel
Yesterday, I looked at CSS transitions and examined the timing in which the transitions would take effect . And, again, I don't mean the duration of the transition; or knowing when the transition ended. I mean, when does the browser actually initiate a transition in relationship to your mutation of an element's CSS properties. In the comments to ... read more »
Comments (5) | Post Comment | Ask Ben | Permalink
Understanding CSS Transitions And Class Timing
Posted: March 19, 2013 at 9:55 AM by Ben Nadel
UPDATE : @Ron, in the comments, pointed out that this demo does not work as expected in Chrome. Apparently Firefox (my dev environment of choice) and Chrome handle this case somewhat differently. I've only just started to use CSS transitions; but, I already love them. They seem like a great way to augment the behavior of your application user ... read more »
Comments (12) | Post Comment | Ask Ben | Permalink
Removing Inline Opacity Filters After Fade-In / Fade-Out Transitions In IE8
Posted: March 15, 2013 at 4:50 PM by Ben Nadel
Recently, I demonstrated how to use jQuery's .css() method to clear inline CSS left in-place after a jQuery transition. This approach has been working well; but, recently, I found out that this approach falls short in IE8 (and IE7) when dealing with alpha / opacity filters. No matter what I did - no matter which CSS properties I cleared - "filte... read more »
Comments (7) | Post Comment | Ask Ben | Permalink
Accessing $scope On The DOM Using AngularJS
Posted: March 1, 2013 at 9:45 AM by Ben Nadel
Most of the time, when you create an AngularJS directive, you know what $scope reference you are dealing with - the one that is passed into your link() function. Sometimes, however, your directive needs to deal with a collection of DOM elements, each of which has its own scope. And, as much as you don't want your DOM tree to be your "source of tr... read more »
Comments (12) | Post Comment | Ask Ben | Permalink
Grouping Nested ngRepeat Lists In AngularJS
Posted: February 28, 2013 at 9:20 AM by Ben Nadel
The other day, I wanted to output a list of values in AngularJS using ngRepeat; however, I wanted that list to be grouped into sublists. Out of the box, ngRepeat doesn't have any group-by control, like ColdFusion does . But, nesting ngRepeats is fairly straightforward if you take on the responsibility of creating the groups yourself. ... read more »
