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.

Installing and Configuring Bower

Bower is a NodeJs package, and therefore can be installed from the command line once NodeJs has been installed:

npm install -g bower

It's crucial to include the -g flag here so that it is available to you from any location. Each time you create a new project you're potentially going to be using Bower to install some if not all of your assets.

Installing AngularJs

The syntax for installing any package with Bower is:

bower install <package>

This has to be run from the command line in the directory that you want the package to be delivered to, typically the root of your site. To install AngularJs:

bower install angular

In my post about client side routing with ui-router I used Bower to install the code for that too:

bower install angular-ui-router

There are lots of cool codebases available through Bower. You can search packages on Bower here.

Benefits within WebStorm

The biggest benefit to me as a developer doing this was a completely unexpected one. Now that WebStorm can see a suite of files it knows about the functions contained within AngularJs and can provide auto-complete and suggestion prompts for me as I'm programming. This is just fantastic, and makes my life so much easier. I can't imagine not using AngularJs in this way now, and get frustrated when I'm at work and don't have this ability.

Auto complete whilst creating a module:

Auto complete whilst creating a controller:

To autocomplete from these stages you can use tab or ctrl+space in Windows, or ^+space on Mac.