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

This entry was posted in Musings and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

8 Comments

  1. Posted July 27 2013 at 10:57 am | Permalink

    Thank you very much for having published this tip!

  2. Uri
    Posted September 2 2013 at 5:51 pm | Permalink

    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″
    }
    }

  3. Uri
    Posted September 2 2013 at 6:00 pm | Permalink

    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″
    }
    }

  4. mediaguitarist
    Posted November 7 2013 at 12:14 pm | Permalink

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

  5. sploscho
    Posted November 19 2013 at 3:18 pm | Permalink

    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.

  6. Posted January 23 2014 at 7:08 pm | Permalink

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

  7. Eagery
    Posted April 16 2014 at 2:54 pm | Permalink

    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?

  8. Posted April 29 2014 at 10:25 am | Permalink

    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.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>