What do I need to include that angular bootstrap just simply works

Question

I have included these in my index.html because bower is including them:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->

Why is the ui-bootstrap.js not included? Because the bower.json from bootstrap and its main property has set "ui-bootstrap-tpls.js" but what about the ui-bootstrap.js?

Even when I include the file outside of the bower:js tags the popover from the datepicker is not visible and I get NO errors in my google chrome.

But when I click on the datepicker button no popover...

UPDATE

Now that I corrected my angularjs modules, now I use just this: 'ui.bootstrap.datepicker'

I get now these errors in google chrome:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/datepicker/datepicker.html
Error: [$compile:tpload] Failed to load template: template/datepicker/datepicker.html

When I look at the source ui-bootstrap-tpls.js file:

.directive( 'datepicker', function () {
  return {
    restrict: 'EA',
    replace: true,
    templateUrl: 'template/datepicker/datepicker.html',
    scope: {
      datepickerMode: '=?',
      dateDisabled: '&'
    },

Where are these above path template... ? I have them not here. I just installed the angular-bootstrap bower package. Should there not all be included?

UPDATE2

I get these angularjs error now:

See the parent is null and therefore the parent.InsertBefore can not work and throws the exception...

Answer 1

Official Doc

ui-bootstrap-tpls.js library contains the directives and the directive templates.

ui-bootstrap.js is just the directives and you are expected to supply the directive templates.

Most folks use the predefined directive templates (ui-bootstrap-tpls.js). You do not want to include both and that may be why the popover/datepicker is not working. You would essentially have 2 directives working to show/hide the popover/datepicker. Also, do not load the bootstrap.js library as that will cause the same problems.

UPDATE:

In regards to the template not found error, the datepicker directive is looking for the template 'template/datepicker/datepicker.html' in the $templatecache. The ui-bootstrap-tpls.js injects the templates into the template cache at the very end of the js file.

In the ui-bootstrap-tpls.js file you should see several $templatecache.put lines with 'template/datepicker/datepicker.html' being one of them.

Answer 2

Just in case someone else is having the same issue: I was having problems with the datepicker, and the issue was that I was loading the templates before the base JS:

From:

<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>

To:

<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

Answer 3

I just ran into this issue also, the answers above helped me a lot!

In my instance I was using a yo-angular build, and installed ui-bootsrap with bower. The problem was multiple references to ui-bootrap and bootstrap conflicting with the tpls.js verison

Here is my solution: Simply put within my index.html

Remove

<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>

Add

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>