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?

Yes, I made sure angular.js was loaded before the bootstrap. — user1002563, Apr 12 '13 at 00:29
I'm not very familiar with Rails' asset pipeline. Are the files requested asynchronously or does Rails generate the resulting `script` tags? That is, is there final output to look at to see what's going on? — Josh David Miller, Apr 12 '13 at 00:37
Then Rails is ordering them incorrectly. Check out jpmorin's comment to his answer. — Josh David Miller, Apr 12 '13 at 02:02

score 2 · Answer 1 · answered Apr 11 '13 at 23:16

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']);

I'm probably going to do it like yours manually, but I would prefer that I could require it in my Rails application.js using ```// require bootstrap_file```, then load all my js files by loading the application.js — user1002563, Apr 12 '13 at 00:31
Could this post help you? http://stackoverflow.com/questions/6149961/rails-3-1-asset-pipeline-and-manually-ordered-javascript-requires — jpmorin, Apr 12 '13 at 01:32

How do I load AngularJS bootstrap module correctly?

1 Answers1