Come caricare correttamente il modulo bootstrap di AngularJS?

Question

Nella mia app Rails, ho ui-bootstrap-0.2.0.js nella directory vendor/assets/javascripts. Ho richiesto il file nel mio file application.js.

ottengo un errore quando ho specificare il bootstrap come la mia dipendenza in questa linea, angular.module('myApp',['ui.bootstrap']);, come indicato da fare qui, http://angular-ui.github.io/bootstrap/

Chrome rileva un Uncaught ReferenceError: angular is not defined a questo modulo definito: angular.module("ui.bootstrap", ["ui.bootstrap.accordion", ...]) nel ui-bootstrap-0.2.0.js.

Tuttavia, angular.js rileva un errore No module:ui.bootstrap. Quindi sembra che entrambi questi file javascript non possano vedersi. c'è una soluzione a questo?

Answer 1

Ecco come ho fatto nel mio progetto:

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

Ed è così che ho impostato il mio modulo applicativo:

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