Use input[type="email"]

The email input type was one of the most exciting new input types that HTML5 brought with it for me. Email validation is a pain. I want to be able to leave complex regex patterns to the back end devs, that's the kind of thing they're better at (and probably enjoy more) than I do. AngularJs does a fantastic job of building on top of the built in functionality for this input type. If you really want to play around with those crazy regex strings then you can thanks to an attribute that takes a regex string for parsing too.

Use input[type="checkbox"]

AngularJs overrides a few standard HTML elements as element based directives. Most of these are HTML5 input types, which come with a few extra attributes that are really clever and powerful. I was completely unaware of these until I started trawling through the documentation. Once I started looking into them I couldn't believe how useful these are, and I'm quite annoyed that I haven't made better use of them in my commercial products before now. There's too much to talk about in one blog post, so I'll make the next few posts about these. Form has some extra gubbins that deserve talking about separately, and I think that having some understanding of the input types will help with understanding them better. I'll start with the checkbox.

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.