How to manually install AngularJS ui.bootstrap

Question

I am building an SPA to run on a page in SharePoint 2013 online and having problems installing ui-bootstrap manually.

I have downloaded this file https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js and saved as ui-bootstrap.js.

Then I reference the file in index.html:

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script type="text/javascript" src="~site/Webparts/js/angular.min.js"></script>
 <script type="text/javascript" src="~site/Webparts/js/angular-route.min.js"></script>
 <script type="text/javascript" src="~site/Webparts/js/ui-bootstrap.js"></script>
 <script type="text/javascript" src="~site/Webparts/testLabApp/testLabApp.js"></script>
 <script type="text/javascript" src="~site/Webparts/testLabApp/dal.js"></script>
 <script type="text/javascript" src="~site/Webparts/testLabApp/email.js"></script>
 <link href="~site/Webparts/testLabApp/style.css" rel="stylesheet" />

Then added dependency in App js file:

var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);

However, I am getting injector error:

[$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=testLabApp&p1=Error%3A%20%5B%24injector%3Amodulerr...

Clearly, I have done something wrong, but I could not find how to download the right file(s) from github.

Any help is most appreciated.

Regards Craig

Tim Engel · Accepted Answer · 2015-08-25 16:33:45Z

4

If you are just using the modal.js, there is no module named ui.bootstrap.

Try changing:

var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);

To:

var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap.modal"]);

Make sure to also download the template files for the modal (window.html and backdrop.html)

answered Aug 25, 2015 at 16:33

Tim Engel

814 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Craig Roberts Over a year ago

Thanks. I downloaded the full ui.bootstrap file and templates. Modals then worked but showed a box in bottom left of my screen, not in the middle as I expected. Is because of the template files - where do I manually install them?

Tim Engel Over a year ago

@CraigRoberts On angular-ui.github.io/bootstrap, you can choose to bundle the templates with ui-bootstrap when downloading to make life easier. If you want them separate, I believe putting the template/ root directory in the same folder as the JS should do the trick. Also a ui-bootstrap dependency is bootstrap CSS, make sure you also have that for the CSS classes ui-bootstrap makes use of.

Timothy · Accepted Answer · 2015-08-25 16:32:21Z

3

It looks like the problem is that you only downloaded modal.js, which is only the modal section, not all of ui-bootstrap.

Try this file: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js

Or minified: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js

answered Aug 25, 2015 at 16:32

Timothy

1,1703 gold badges13 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to manually install AngularJS ui.bootstrap

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related