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 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.

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.