Install Latest Unstable AngularJS Using Bower

By default, Yeoman’s Generator Angular sets up your app to install the stable version of AngularJS and it’s dependencies. But if you want the latest and greatest you have to use one of the many separate repos that nice people have created to store the unstable branches. Here’s a working bower.js file that fetches AngularJS version 1.1.5, along with some other useful unstable packages:

Updated 10/14/2013 thanks you Uri in the comments:

{
  "name": "myApp",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.0-rc.2",
    "json3": "~3.2.4",
    "bootstrap-sass": "~2.3.1",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.2.0-rc.2",
    "angular-cookies": "~1.2.0-rc.2",
    "angular-sanitize": "~1.2.0-rc.2"
  },
  "devDependencies": {
    "angular-mocks": "~1.2.0-rc.2",
    "angular-scenario": "~1.2.0-rc.2"
  }
}

Save that file and run $ bower install to automagically update your app to AngularJS 1.1.5.

We’re not done just yet!

Added 10/14/2013

ngRoute is no longer bundled with Angular 1.2.x. So if you perform the above changes you will get an error like this:

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

To fix it, add angular-route to your project like this:

  1. Add the angular-route module to your project: $ bower install --save angular-route
  2. Include the script in your index.html file like this: <script src="bower_components/angular-route/angular-route.js"></script>
  3. Add the dependency to your project in app.js like this: angular.module('evaApp', ['ngRoute'])
  4. Add the angular-route.js script to the “files” array in karma.conf.js: 'app/bower_components/angular-route/angular-route.js',

Special thanks to Scotty.NET’s answer to this Stack Overflow question: http://stackoverflow.com/questions/18481863/failed-to-instantiate-module-injectorunpr-unknown-provider-routeprovider

  • http://www.vorburger.ch Michael Vorburger

    Thank you very much for having published this tip!

  • Uri

    Even better and from angular themselves:

    {
    “name”: “myApp”,
    “version”: “0.0.0”,
    “dependencies”: {
    “angular”: “1.2.0-rc.1″,
    “angular-route”: “1.2.0-rc.1″,
    “json3″: “~3.2.4″,
    “jquery”: “2.0.4-pre”,
    “bootstrap-sass”: “~3.0.0″,
    “es5-shim”: “~2.0.8″,
    “angular-resource”: “1.2.0-rc.1″,
    “angular-cookies”: “1.2.0-rc.1″,
    “angular-sanitize”: “1.2.0-rc.1″,
    “angular-touch”: “1.2.0-rc.1″
    },
    “devDependencies”: {
    “angular-mocks”: “1.2.0-rc.1″,
    “angular-scenario”: “1.2.0-rc.1″
    }
    }

  • Uri

    A small fix:

    {
    “name”: “myApp”,
    “version”: “0.0.0”,
    “dependencies”: {
    “angular”: “1.2.0-rc.1″,
    “angular-route”: “1.2.0-rc.1″,
    “angular-touch”: “1.2.0-rc.1″,
    “json3″: “~3.2.4″,
    “jquery”: “2.0.3”,
    “bootstrap-sass”: “~3.0.0″,
    “es5-shim”: “~2.0.8″
    },
    “devDependencies”: {
    “angular-mocks”: “1.2.0-rc.1″,
    “angular-scenario”: “1.2.0-rc.1″
    },
    “resolutions”: {
    “angular”: “1.2.0-rc.1″
    }
    }

  • mediaguitarist

    Thank you so much for this post. I’ve been struggling getting the interface on my app to do what I want and now, because of this I’m going to be able to move forward with all the things I want to do using ngAnimate. Thanks again :-).

  • sploscho

    Baboom! I just started with a project glued together by yeoman / bower / angular and since I’m pretty new to that turf – your post saved me another hour of struggling and searching.

  • http://www.camilolopes.com.br camilo lopes

    excellent post! saved my day. thanks for sharing!!

  • Eagery

    Is there a way of specifying the angular version in bower.js so that bower update always fetches the latest angularjs version? like, leaving it empty or something?

  • http://likesalmon.net/ Ammon

    I’m sure this can be done Eagery, but in practice it may be more trouble than it’s worth. Lots can change between Angular versions. This can introduce bugs that are hard to diagnose.