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.