CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrap
Anonymoose
Anonymoose

Reputation: 2461

ui-bootstrap-tpls and ui-bootstrap

In my application, I'm using the $modal 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 ui-boostrap.js file and a ui-bootstrap-tpls 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?

Upvotes: 3

Views: 1497

Answers (2)

Seetharaman GR
Seetharaman GR

Reputation: 270

As explained by shashank, all bootstrap elements in bootstrap.js in converted to angular directives in ui-bootstrap-tpls. If you simply replace the file it wont work as you expected.

If you changes to ui-bootstrap-tpls then you need to change the corresponding bootstrap components to angular ui directives.

Upvotes: 1

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

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.

Upvotes: 3

Related Questions