How do I load AngularJS bootstrap module correctly?

Question

In my Rails app, I have ui-bootstrap-0.2.0.js in the vendor/assets/javascripts directory. I have required the file in my application.js file.

I get an error when I specify the bootstrap as my dependency in this line, angular.module('myApp',['ui.bootstrap']);, as instructed to do here, http://angular-ui.github.io/bootstrap/

Chrome detects a Uncaught ReferenceError: angular is not defined at this defined module: angular.module("ui.bootstrap", ["ui.bootstrap.accordion", ...]) in the ui-bootstrap-0.2.0.js.

However, angular.js catches an error No module:ui.bootstrap. So it seems both of these javascript files cannot see eachother. Is there a solution to this?

Answer 1

Here is how I did it in my project:

<script type="text/javascript" src="libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="libs/jquery-ui-1.10.2.custom.min.js"></script>

<script type="text/javascript" src="libs/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-ui.min.js"></script>
<script type="text/javascript" src="libs/angular-resource.min.js"></script>

<script type="text/javascript" src="libs/ui-bootstrap-tpls-0.2.0.min.js"></script>

<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/utils.js"></script>

And this is how I set my application module:

var app = angular.module('myapp', ['ui.bootstrap','ngResource']);