Stop Clicks Bubbling Up the DOM (Event Propagation)

When a user clicks on an element it triggers the onClick event of that element, and every parent element up the DOM. This is normally fine as it's rare to have a click on an element who has an ancestor with a click event too, but on those rare occasions where there is an ancestor with a click event it can be the most annoying thing ever. The last thing you want is to prevent the user from interacting with a button because it also triggers some other interaction. This can be stopped in many ways, but thankfully there is an AngularJs way to do it.

Use ngClassEven and ngClassOdd to Lists with Alternate Row Styling

At some point or another you'll have had a list or table that has been created programatically and requires alternate row/item styling. Prior to CSS3's nth-child() the only way to do this was to create separate classes for the alternate rows. Even when we did get nth-child(), not many of us had the luxury of being able to use this as we were still constrained by older browsers (IE I'm looking at you) and so couldn't use it anyway. I remember many a time creating a C# variable called cssClass that would be assigned to every other row based on a modulus calculation of the dataset's row's index that I may or may not have had to create another variable for. Thankfully AngularJs has now removed this pain from our development by creating this pair of directives for use within ngRepeats.

Create a List Using ng-repeat

I can't think of a single site that I've been involved in writing that hasn't had a list. They are an integral part of most sites; from navigation to product listings, every site contains at least one list. Whilst working on my current commercial product I've had to write multiple lists that contain identical datasets, supplied from a back end service to be displayed in a repetitive fashion. The best way to tackle this using AngularJs is to obtain some JSON from your endpoint and use ng-repeat to create each list item.

Programatically Set Inline Styles for an Element

A few months ago I wrote a directive that had a requirement to be somewhat responsive. In order to achieve this I needed to change the width of an inner element. I also wanted to style up different parts of the component dependant upon certain conditions. As a result I had to use ng-style.

When to use Braces, and Which Ones to Use

I've been using AngularJs for just over a year now but I think it was a couple of months before I really understood the difference between double and single braces, when to use them, and when not to use them at all. Although it is in the documentation as you go through, I don't remember seeing it explicitly written anywhere and I found myself randomly trying each thing before things would work. I've still not seen it written explicitly anywhere, so I'm sure that it must still be causing frustration to new AngularJs developers now.

Use Grunt to Minify your AngularJs Files

When my company decided to rebuild our primary product last year it allowed us devs to go crazy and attempt to implement as many best practices as possible. As part of this we wanted to use SASS so we needed something that would allow us to transpile and minify our code. As we had gone that far we thought we might as well minify our JavaScript files as well. I'm sad to say that we didn't go so far as to minify our HTML, and we didn't compress anything either. However, we did want to use a task runner that would do all this for us and so we started using Grunt.

Use WebStorm to Run Protractor

I've recently started playing around with unit testing. At first I looked at using Jasmine with Karma, and in Visual Studio there's a fabulous plugin called Chutzpah that can do some cool things in relation to testing. However, my company has yet to pick up unit testing and so a couple of months passed without me looking into it again. Then I went to an AngularJs meetup in London where Julie Ralph from Google talked to us about Protractor, which is a test framework designed with testing AngularJs in mind. I was blown away with the way it ran real browsers and sent real user interactions to the browser in order to complete e2e testing, and decided that I needed to look into it further.