Using Bower, npm and updates to AngularJS

I decided to use bower after a few nudges by my friend, and I know I should have used it before but laziness sometimes takes over, right? :)

I have now updated the GitHub repository for the Contact Manager. You can check the repo out, first execute npm install to install the necessary npm packages, and then call bower install to install the components.

A few more thoughts about bower, npm/node.js and the updates in AngularJS between version 1.1.5 and 1.2.0rc1.

Bower

As I have mentioned probably 100s of times I am using a Ubuntu Virtual Machine, running on VirtualBox for development purposes and I automatically login as the 'root' user to the server. This has caused every bower command to complain with the following message: "Bower is a user command, there is no need to execute it with superuser permissions". Well, I had to setup an alias to overcome this (no, I'm not going to create a new user, I am the superuser.) that utilises the --allow-root flag - and like all aliases it had to go to my .bashrc file:

root@ubuntu:/# vi ~/.bashrc
alias bower="bower --allow-root"

That's been taken care of.

Bower automatically creates a bower_components folder where it'll install all the required files for the project. To change this folder, I had to create a file inside my project called .bowerrc, which has the following content:

{
  "directory": "components"
}

This tells bower to install all components to - yeah, you guessed right - the components folder.

If you are using the Express JS framework like I do, you also need to add a static path for your /components folder otherwise Express will (righteously) throw a 404 error. I have added the following to my app.js:

app.use('/components', express.static(__dirname + '/components'));

npm and node.js

How many times did you execute node app.js, encountered a bug, fixed it in the source code, ctrl-c'd the application and re-initiated the start up command? Well, I did it way too many times and I had enough. For my project I am using a lovely npm package called nodemon which basically looks for changes in the project folder and if a particular file gets updated, it automatically restarts the application so no more work for me.

This also means that as opposed to starting the application via calling node app.js, I can simply type in npm start. But how does this work exactly? It's simple. npm start takes it's arguments from the package.json file which is also in the root project folder (this is the file that allows the installation of all the require npm package dependencies), this is how the whole file looks for the contact manager:

{
  "name": "contact-manager",
  "description": "",
  "version": "0.0.1",
  "author": {
    "name": "Tamas Piros",
    "email": "tamas@tamaspiros.co.uk",
    "web": "http://tamaspiros.co.uk"
  },
  "scripts": {
    "start": "NODE_PATH=./app/controllers NODE_ENV=development ./node_modules/.bin/nodemon app.js"
  },
  "dependencies": {
    "express": "latest",
    "mongoose": "latest",
    "ejs": "latest",
    "nodemon": "latest"
  }
}

Notice the highlighted line which tells nodemon which application to monitor - app.js in this case.

Updating AngularJS

I have run into quite a few issue while updating AngularJS from version 1.1.5 to 1.2.0rc1. The reason why I'm using a release candidate is because I am utilising the ng-if directive that was not available in the latest release back in the time of writing the contact manager but I wanted to use the feature.

I have run into the following problems:

1. urlSanitizationWhitelist failed

This function has been removed from angularJS 1.2.0 and now it should be aHrefSanitizationWhitelist:

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https|skype|mailto):/);

2. Uncaught Error: [$injector:modulerr] Failed to instantiate module contacts due to: Error: [$injector:unpr] Unknown provider: $routeProvider

The solution to this problem is to append the app.js file (relevant to AngularJS, not the backend file) and add the ngRoute directive:

angular.module('contacts', ['ngRoute','contacts.filters', 'ui.bootstrap']).

This alone, won't fix the problem, because we also need to add actual .js file as well:

<script src="/components/angular-route/angular-route.js"></script>

Make sure you are aware of these changes, it can cause quite a headache to figure these out.

The next thing I will explore is how to use grunt. Laters.