Install and Use the AngularJs Batarang for Chrome

When I first started using AngularJs I did a lot of reading (as one might expect). In one of the books I read it kept mentioning the batarang, but never really explained what this was or how to use it. I eventually went off and Googled it. Not much came up but the Chrome extension itself, and so my team and I had to muddle through and teach ourselves how to use it. Writing this post has been on my list for a long time because I think it's one of the most important tools in your kit as an AngularJs developer.

Create a Filter

Filters in AngularJs are a great way to manipulate your data as part of it being bound, and helps to keep your logic separated and reusable. AngularJs has some useful filters built in so it’s worth checking the in-built filter documentation first to see if the filter you’re looking for is already in existence. If it isn’t, then writing a filter couldn’t be easier.

Use input[type="text"]

Time for another look into the input directives built into AngularJs. Today I'm going to be looking at the text input. This is probably the most frequently used of all the input types, and therefore is arguably the most important one to understand.

Decide Between ngIf and ngShow / ngHide

When I first started using AngularJs I used ngShow and ngHide a lot and never even consider ngIf. When someone explained the power of the latter to me it completely changed the way I thought about programatically showing and hiding content with AngularJs. There are plenty of reasons why you would want to hide and show content, and it's worth considering which option is best for you each time you need to do so. A large part of your decision is going to be to do with whether or not you are using psuedo-classes to style the element and it's siblings.

Use Bower to Install AngularJs

Recently I've changed my method of referencing AngularJs. Traditionally I've used the Google CDN, but after attending a Web Perf meetup here in London I had a change of heart. At this particular lecture we had we were told that rarely do CDNs give any benefit to users outside of the USA as that's where most of the CDNs are. When one compares the time it takes to retrieve the files to Europe (or other continents) it rarely beats retrieving individual copies for each site from the same servers as the site is hosted. The only benefit comes when the user has already downloaded a file from that particular CDN, and given how many CDNs there are and the lack of agreement as to which one to use in the development community, that isn't of much benefit either. Once I decided to stop using CDNs, other possibilities opened up for me and I decided to look at Bower.

Do Client-Side Routing with ui-router

I'm taking a little break from my mini-series on the input directives to talk about something a little different and a bit more interesting. Client side routing is a powerful concept, but it takes a little getting used to. We didn't originally use ui-router for our product as the decision had been made that we didn't need browser functionality (in particular back and forward) within our application. However, as the application grew it became apparent that we couldn't not have this functionality and so we investigated what was available in client side routing for us. We chose ui-router because it allowed us to have url rewriting, which allows our users to bookmark areas within our application as though they're separate pages on a standard website.

Use input[type="datetime-local"]

Continuing on in my repetitive mini-series on input types. Today I'm looking at the datatime-local input type. This is an interesting input. I like the different methods of user interactions the browsers have created for this input type. A few of the implementations still need some work, but then whose user interfaces don't?

Use input[type="number"]

The HTML5 number is a great little input, especially when it's being used on a mobile device. When I first had a smartphone I used to play with the different spinner interfaces, so form filling started taking longer than it really needed to. This is my third post on the input directives.

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.

Setup a Windows Development Environment with Webstorm for AngularJs

Although I used Linux environments at university, I've been working in Windows environments ever since I left. I've tried working on Mac, but I find it so hard to create an environment to work in that I'm put off before I finish. I continually find myself returning to Windows, because it allows me to do the 'risky' stuff that I have the knowledge to do without patronising me (quite as much as Mac). Still, there are things to learn when setting up an environment for web development.