Hazaart Hazaart - 3 months ago 58x
Javascript Question

ui-bootstrap-tpls and ui-bootstrap

In my application, I'm using the

directive of boostrap.ui. I'm also using the Bootstrap navbar with dropdown functionalities.

I'm having the problem that window.html cannot be found as described in this topic.

The problem in my case is that I have both a
file and a
file included (v1.3.2)

According to this topic, I should only need the tpls file.
However, when I remove the boostrap.js file, all the other bootstrap functionalities for the dropdowns in my header are not working anymore.

Is it not possible to have both functionalities available?


UI-Bootstrap library is just an Angular wrapper for core Bootstrap library to remove the dependency of jQuery from the application. From the docs:

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required.

ui-bootstrap-tpls.min.js or ui-bootstrap-tpls.js contains the default template for all the Javascript module shipped by Bootstrap i.e. why it's named -tpls.

The other file ui-bootstrap.min.js or ui-bootstrap.js does not include any templates for the Javascript modules/features.

So you should only include ui-bootstrap-tpls.min.js or ui-bootstrap-tpls.js if you are not planning to override any template.

The answer about why dropdown stopped working after removing bootstrap.js is that your HTML code is still using the jQuery version of Bootstrap but you should start using the ui-bootstrap version of those modules. Yes, it is possible to include both the Angular version of bootstrap (i.e. ui-bootstrap.min.js) and jQuery version of bootstrap (bootstrap.js) but it will be extra overhead on the app.

There is no need of jQuery in order to use Bootstrap's Javascript features if you have already included the ui-bootstrap library.