How do I use UI Bootstrap?

Question

I've been searching on the internet how to use UI Bootstrap with AngularJS but I won't work.

This is my code right now:

<html> <head> <script src="componenten/bower_components/angular/angular.js"></script> <script src="componenten/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="componenten/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script> </head> <body ng-app="ui.bootstrap.demo"> <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <div class="modal-body"> <ul> <li ng-repeat="item in items"> <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> </div> </script> <button type="button" class="btn btn-default" ng-click="open()">Open me! </button> <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> <div ng-show="selected">Selection from a modal: {{ selected }}</div> </div> </body> </html>

I already tried to add almost every script and css file but it will never work.

Endre Simo · Accepted Answer · 2015-09-07 12:20:56Z

3

You need to include Angular Bootstrap as a dependency:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

And please delete the ui-bootstrap.min.js beacuse ui-bootstrap-tpls.min.js contains both the code and template.

edited Sep 7, 2015 at 12:20

answered Sep 7, 2015 at 11:58

Endre Simo

11.6k3 gold badges44 silver badges52 bronze badges

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

5 Comments

RiesvGeffen Over a year ago

Okey that fixed a lot already, no more errors when I start the page but when I click a button I get errors again.

RiesvGeffen Over a year ago

This is the error that is shown in the console "[$compile:tpload] Failed to load template: template/modal/window.html (HTTP status: 404 Not Found)"

FelisCatus Over a year ago

Please remove the ui-bootstrap.min.js script tag. You only need the ui-bootstrap-tpls.min.js one, which contains both code and templates.

Endre Simo Over a year ago

I think you need to change the order in which you are loading the bootstrap JS files.

charlietfl Over a year ago

@SimoEndre no... you use one or the other...not both.

Collectives™ on Stack Overflow

How do I use UI Bootstrap?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related