Inject Module Dependancies into Unit Tests

When setting up unit tests for a module you need to make sure that your test harness is aware of any dependancies that module has. It doesn't stop there though; you also need to make sure that you include the dependancies of your dependancies. And so it goes on. Thankfully all dependancies are injected in the same way.

Set Up Tests with Jasmine

Since I've been trying to do my entire build process through Grunt I've had to rethink how testing works. Up until recently I've either been using Visual Studio plugins (Chutzpah or ReSharper) or Protractor as a macro in WebStorm. Both of these require a very specific configuration in order to run Jasmine tests. The same is true for setting up Jasmine testing in Grunt. However, what doesn't change is how to actually write the tests. Once you've got the configuration for your particular test harness setup this is how to structure tests.

Use ngInit to Track $index in Nested ngRepeats

Recently some colleagues of mine were trying to do some conditional logic on an input element buried away in a couple of ngRepeats based on the index of the first ngRepeat. They were getting into a pickle using $scope.$parent.$parent.$index. When they were printing out the $index it was giving them the answer they wanted, but then didn't behave in the same way when used within their logic on the input element. It turned out that this input was one $parent further away and they querying the wrong scope. This is the time to use ngInit.

Use Jasmine to Run Tests as Part of the Grunt Process

I've been using Jasmine to runt Unit tests for a while now, but I've always triggered them manually through WebStorm. This is fine as long as I remember to trigger them, which most of the time I don't. I've recently started a new project at work and have been able to define a new process as part of it. This has been a great opportunity for us to learn from the mistakes that we've previously made and think about how we can try to avoid them this time. As part of this we've decided to build our unit testing into our development process. We've set it up so that if our tests don't pass, then the code doesn't get published to the output file and therefore can't be loaded into the browser. Using watch to chain our tasks means that we know the moment we've saved our files whether or not our code works as we want it to.

Use ng-annotate with Grunt in WebStorm

After my last post on using $inject for protecting your dependancy injection against minification I did some further reading on ng-annotate. In his style guide, John Papa says that he uses $inject because it mirrors the technique used by ng-annotate, which he uses to automatically create minification safe dependancies and here is how you can too.

Use $inject for Better Dependency Injection

By now we should all be aware that if you minify your AngularJs code without building in some protection against it, then we can easily lose the references we've entered into the factory / controller / etc. without realising until we fill the console up with errors. Since the beginning I've been using the traditional inline array style protection. This is fine if you have only a couple of dependancies, but soon becomes a readability nightmare when you have any more. Whilst reading through the AngularJs Style Guide by John Papa I came to his recommendation of using $inject. I'm now a convert.

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.